有什麼辦法在使用資料時指定建議的檔名：URI？

問題描述

例如，如果您按照以下連結：

data:application/octet-stream;base64,SGVsbG8=

瀏覽器將提示您下載包含超連結本身儲存為 base64 的資料的檔案。有沒有辦法在標記中建議預設名稱？如果沒有，是否有 JavaScript 解決方案？

最佳解決方案

使用 download 屬性：

<a download='FileName' href='your_url'>

html5-demos.appspot.com/… 的例項。

Currently works on Chrome，Firefox，Edge，Opera，但不是 Safari 10 或 IE11 。

次佳解決方案

Chrome 這幾天非常簡單：

function saveContent(fileContents, fileName)
{
    var link = document.createElement('a');
    link.download = fileName;
    link.href = 'data:,' + fileContents;
    link.click();
}

第三種解決方案

根據 RFC 2397，不，沒有。

也不會有任何 attribute 的<a> 元素，您也可以使用。

不過，HTML5 隨後在<a> 元素上引入了 download 屬性，儘管在編寫支援時並不普及 (例如，不支援 MSIE)

第四種方案

僅 HTML：使用 download 屬性：



<a download="logo.gif" href="">Download transparent png</a>

僅限 JavaScript：您可以使用此程式碼儲存任何資料 URI：



function saveAs(uri, filename) {
  var link = document.createElement('a');
  if (typeof link.download === 'string') {
    link.href = uri;
    link.download = filename;

    //Firefox requires the link to be in the body
    document.body.appendChild(link);

    //simulate click
    link.click();

    //remove the link when done
    document.body.removeChild(link);
  } else {
    window.open(uri);
  }
}

var file = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
saveAs(file, 'logo.gif');

Chrome，Firefox 和 Edge 13+將使用指定的檔名。

IE11，Edge12 和 Safari 9(不支援 download 屬性) 將以預設名稱下載該檔案，或者將其簡單地顯示在新的選項卡中，如果它是受支援的檔案型別：影像，影片，音訊檔案…

如果現在需要更好的相容性，請使用 Flash-based Downloadify 作為後備。

第五種方案

我在 netwerk /protocol /data /nsDataHandler.cpp 裡看了一下 firefox 原始碼

資料處理程序只解析內容/型別和字元集，並檢視字串中是否有”;base64″

rfc 具體沒有檔名，至少 firefox 不會處理它的檔名，程式碼生成一個隨機名稱加上”.part”

我也檢查過 firefox 日誌

[b2e140]: DOCSHELL 6e5ae00 InternalLoad data:application/octet-stream;base64,SGVsbG8=
[b2e140]: Found extension '' (filename is '', handling attachment: 0)
[b2e140]: HelperAppService::DoContent: mime 'application/octet-stream', extension ''
[b2e140]: Getting mimeinfo from type 'application/octet-stream' ext ''
[b2e140]: Extension lookup on '' found: 0x0
[b2e140]: Ext. lookup for '' found 0x0
[b2e140]: OS gave back 0x43609a0 - found: 0
[b2e140]: Searched extras (by type), rv 0x80004005
[b2e140]: MIME Info Summary: Type 'application/octet-stream', Primary Ext ''
[b2e140]: Type/Ext lookup found 0x43609a0

有趣的檔案，如果你想看看 mozilla 來源：

data uri handler: netwerk/protocol/data/nsDataHandler.cpp
where mozilla decides the filename: uriloader/exthandler/nsExternalHelperAppService.cpp
InternalLoad string in the log: docshell/base/nsDocShell.cpp

我想你現在可以停止搜尋解決方案，因為我懷疑沒有:)

正如在這個執行緒中注意到的，html5 有 download 屬性，它也在 firefox 20 上工作 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download

第六種方案

沒有。

整個目的是它是一個資料流，而不是一個檔案。資料來源不應該有任何知識的使用者代理處理它作為一個檔案… 而不是。

第七種方案

以下 JavaScript 程式碼段可以在 Chrome 中使用新的’download’ 屬性連結並模擬點選。

function downloadWithName(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  link.click();
}

以下示例顯示它的用途：

downloadWithName("data:,Hello%2C%20World!", "helloWorld.txt")

第八種方案

您可以向錨點元素新增一個下載屬性。

樣品：

<a download="abcd.cer"
    href="">down</a>

第九種方案

看這個連結：http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html

引用：

It even works (as in, doesn’t cause a problem) with ;base64 at the end
like this (in Opera at least):

data:text/plain;charset=utf-8;headers=Content-Disposition%3A%20attachment%3B%20filename%3D%22with%20spaces.txt%22%0D%0AContent-Language%3A%20en;base64,4oiaDQo%3D

在討論的其餘訊息中也有一些資訊。

第十種方案

Google 程式碼上有一個小巧的解決方法指令碼適用於我：

http://code.google.com/p/download-data-uri/

它新增一個表單中的資料，提交它，然後再次刪除該表單。哈基，但是為我做了工作。需要 jQuery 。

Google 執行緒在 Google 內碼表面之前出現了這個執行緒，我認為在這裡也可能有幫助。

參考文獻

Is there any way to specify a suggested filename when using data: URI?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

有什麼辦法在使用資料時指定建議的檔名：URI？