你瞭解HTML5的download屬性嗎？

王铁柱6發表於2024-11-23
HTML

是的，我瞭解 HTML5 的 download 屬性。它用於強制瀏覽器下載連結指向的資源，而不是在瀏覽器中直接開啟它。 這對於提供使用者下載檔案（例如文件、圖片、影片等）非常有用。

以下是關於 download 屬性的一些關鍵點：

  • 功能： download 屬性指示瀏覽器下載連結的資源。
  • 適用元素：<a> 元素 (超連結) download 屬性只能用於 <a> 元素。
  • 屬性值：
    • 無值 (空字串或只寫 download)： 瀏覽器會下載連結指向的資源，並使用原始檔名或伺服器提供的檔名。
    • 指定檔名： 可以為 download 屬性指定一個值，該值將作為下載檔案的名稱（包括副檔名）。例如：<a href="path/to/file.pdf" download="mydocument.pdf">下載 PDF</a>。 這會將檔案下載為 mydocument.pdf，無論伺服器提供的檔名是什麼。
  • 跨域資源： 如果連結指向跨域資源，伺服器必須設定 Content-Disposition HTTP header，並且其值為 attachment 或 inline，才能使 download 屬性生效。 如果未設定此 header，瀏覽器可能會忽略 download 屬性並在新標籤頁或視窗中開啟資源。 attachment 會強制下載，而 inline 則允許瀏覽器嘗試顯示檔案。
  • 資料 URI： download 屬性也適用於資料 URI。
  • JavaScript 動態修改： 可以使用 JavaScript 動態新增或修改 download 屬性，從而實現更靈活的下載控制。

示例：

  • 下載名為 image.jpg 的圖片：
<a href="path/to/image.jpg" download="image.jpg">下載圖片</a>
  • 下載名為 document.pdf 的 PDF 檔案，伺服器檔名可能是 file123.pdf：
<a href="path/to/file123.pdf" download="document.pdf">下載文件</a>
  • 使用 JavaScript 動態新增 download 屬性：
const link = document.createElement('a');
link.href = 'path/to/file.txt';
link.download = 'myfile.txt';
link.textContent = '下載文字檔案';
document.body.appendChild(link);

總而言之，download 屬性為開發者提供了一種簡單有效的方式來控制檔案下載，提升使用者體驗。 請記住，跨域資源需要伺服器配合設定正確的 HTTP header 才能確保 download 屬性正常工作。

相關文章