iT邦幫忙

0

HTML-瀏覽器下載檔案

1.問題:如何才能使顯示的結果讓瀏覽器下載網頁或圖片,而非只是呈現圖片檔(如下圖)?

2.呈現結果
https://ithelp.ithome.com.tw/upload/images/20210219/201284272c3yjNEPsN.png

3.程式碼

<!DOCTYPE html>
<meta charset = "UTF-8">

<html lang="en">
    <head><title>瀏覽器下載檔案</title></head>

    <body>
        <a href="C:\Users\***\Desktop\VS Code\picture\TCU.jpg" download="TCU">點此下載</a>
    </body>
</html>
看更多先前的討論...收起先前的討論...
補覺鳴詩 iT邦研究生 2 級 ‧ 2021-02-19 19:58:46 檢舉
為什麼你的連結是 C:\
憤怒鳥 iT邦新手 5 級 ‧ 2021-02-19 20:59:07 檢舉
因為這是我的儲存路徑
我的儲存路徑是由windows(C)開始的
補覺鳴詩 iT邦研究生 2 級 ‧ 2021-02-19 22:36:30 檢舉
你沒懂我的意思
正常不會是用絕對路徑 就算是 也用 http:\\
你是用 web server 去跑 html 嗎?
還是你直接用瀏覽器開 html

我只能說
主要問題在於你的執行環境
你的觀念錯了,所以才用 c:\ 做作路徑
我只能說,你再不將觀念給搞懂。
還在那邊堅持自已的儲存路徑是c開始。
你的問題永遠都會是一堆。

你的問題,已經不是程式碼的問題。而是真的是你的問題。
0
coreyqaq
iT邦新手 5 級 ‧ 2021-02-19 20:04:39

我的環境 windows 10
https://ithelp.ithome.com.tw/upload/images/20210219/201351524D4AkADftp.png

因為我懶得載apache XDDDD
所以直接 在該目錄下 python -m http.server 8080 開一個server
https://ithelp.ithome.com.tw/upload/images/20210219/20135152eb06gFWR6M.png

把以下程式碼貼進index.html裡:

<!DOCTYPE html>
<meta charset = "UTF-8">

<html lang="en">
    <head><title>瀏覽器下載檔案</title></head>

    <body>
		
        <a download="OAO.jpg" href="./OAO.jpg" >點此下載</a>
    </body>
</html>

之後瀏覽器打入127.0.0.1:8080 按下連結
https://ithelp.ithome.com.tw/upload/images/20210219/20135152Lihmryt5jT.png

醬子就有惹

player iT邦大師 1 級 ‧ 2021-02-23 19:44:52 檢舉

HTML的 a element 的 download attribute 記得不是所有的瀏覽器都能用

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

1

html5的用法

<a href="test.jpg" download="newTest.jpg">下載圖片</a>

如果要維持原檔名。就直接用download的屬性就好。不用給值。

<a href="test.jpg" download>下載圖片</a>

如果還是不行,一定是你那該死的c:在搞鬼。
你還是快搞懂何謂主機路徑,何謂web路徑。

正常在html碼內。除了使用file:// 呼叫。才會看到c:
直接用c:的實體路徑。有些會被瀏覽器的安全性給檔掉不給你用的。
快搞懂吧!!!你好幾個問題都是這個問題。

0
camabula
iT邦新手 5 級 ‧ 2021-02-20 09:50:31

請問你有沒有發現你的「程式碼」中是用反斜線(backslash) \

<a href="C:\Users\***\Desktop\VS Code\picture\TCU.jpg" download="TCU">

而coreyqaq兄的「程式碼」是用斜線(slash) / 呢?

<a download="OAO.jpg" href="./OAO.jpg" >點此下載</a>

另外,請注意看網站的網址緊接在http:之後的是兩條斜線(slash) / 喲!
並且,路徑分隔符號也是用斜線(slash) / 來隔開的喲!

https://ithelp.ithome.com.tw/questions/10202278?sc=nl.daily

還有,星空兄的苦口婆心一定要聽:

你還是快搞懂何謂主機路徑,何謂web路徑。

你要寫網頁,終究還是得要接觸到網頁伺服器(Web Server),作業系統(OS) != 伺服器(Server),上次你的問題就有建議把Windows 10的IIS(Internet Information Services)啟用了!而IIS就是網頁伺服器的一種。

真希望你能明白我們在說什麼。

憤怒鳥 iT邦新手 5 級 ‧ 2021-02-20 23:34:10 檢舉

請問web路徑是相對路徑,主機路徑是絕對路徑嗎?(不好意思,我才剛學,對於網頁的概念生疏,請見諒)

camabula iT邦新手 5 級 ‧ 2021-02-22 12:50:45 檢舉

你有兩個問題要先釐清,第一個問題是網頁伺服器(你還沒有啟用IIS或安裝其他的伺服器軟體)與作業系統(你的是Windows,就撇開Linux等不談了),第二個問題是相對路徑絕對路徑
如此一來2×2=4,你就有四種情況了:

  1. Windows的相對路徑
  2. Windows的絕對路徑
  3. 網頁伺服器的相對路徑
  4. 網頁伺服器的絕對路徑

假設1、2你已經瞭解,就直接說明3、4。
以你的網頁檔為例

星空兄的:

href="test.jpg" <!--與網頁檔同目錄(資料夾)-->

coreyqaq兄的:

href="./OAO.jpg" <!--與網頁檔同目錄(資料夾)下-->

他們都是用相對路徑,沒有指定路徑則為現行路徑,即與該網頁檔相同路徑。
.為現行目錄(資料夾)的意思,而./為現行目錄(資料夾)下的意思。

若是你有啟用IIS網頁伺服器,預設的網頁伺服器根錄是C:\inetpub\wwwroot,如果你在這裡建立網頁檔index.html(首頁檔預設為index.htmlindex.htm等),若你還建立資料夾picture及並把圖片檔TCU.jpg放到該資料夾內。
那麼路徑結構如下:
狀況一:
https://ithelp.ithome.com.tw/upload/images/20210222/201246328uIM6tkmwi.png

相對路徑寫法:

<a href="./picture/TCU.jpg" download>下載圖片</a>
<!--現行目錄(.)下的picture目錄下的TCU.jpg-->

絕對路徑寫法:

<a href="/picture/TCU.jpg" download>下載圖片</a>
<!--根目錄(/)下的picture目錄下的TCU.jpg-->

如果你在wwwroot下建立一個目錄html用來放網頁檔,那麼路徑結構如下:
狀況二:
https://ithelp.ithome.com.tw/upload/images/20210222/20124632L8ZgEuSwSG.png

相對路徑寫法:

<a href="../../picture/TCU.jpg" download>下載圖片</a>
<!--父目錄(html)的父目錄(/)下的picture目錄下的TCU.jpg-->

絕對路徑寫法:

<a href="/picture/TCU.jpg" download>下載圖片</a>
<!--根目錄(/)下的picture目錄下的TCU.jpg-->

如果你在picture下建立一個目錄jpg用來放jpg類型的圖片檔,那麼路徑結構如下:
狀況三:
https://ithelp.ithome.com.tw/upload/images/20210222/20124632xDjSGo0IiA.png

相對路徑寫法:

<a href="../../picture/jpg/TCU.jpg" download>下載圖片</a><!--父目錄(html)的父目錄(/)下的picture目錄下jpg目錄下的TCU.jpg-->

絕對路徑寫法:

<a href="/picture/jpg/TCU.jpg" download>下載圖片</a><!--根目錄(/)下的picture目錄下jpg目錄下的TCU.jpg-->

如果你在html下建立一個目錄homepage用來放index.html檔,那麼路徑結構如下:
狀況四:
https://ithelp.ithome.com.tw/upload/images/20210222/20124632esSX13Rxrx.png

相對路徑寫法:

<a href="../../../picture/jpg/TCU.jpg" download>下載圖片</a><!--父目錄(homepage)的父目錄(html)的父目錄(/)下的picture目錄下jpg目錄下的TCU.jpg-->

絕對路徑寫法:

<a href="/picture/jpg/TCU.jpg" download>下載圖片</a><!--根目錄(/)下的picture目錄下jpg目錄下的TCU.jpg-->

以上舉的例子,跟OS底下大同小異,只是沒有分C槽、D槽...等,而且根目錄是網頁伺服器啟動或安裝好後指定的某個目錄(directory)也就是現在的用語叫做資料夾(folder)。

我要發表回答

立即登入回答