强制下载 'data:text/plain' URL答案

【问题标题】：Force download of 'data:text/plain' URL强制下载 'data:text/plain' URL
【发布时间】：2011-06-24 13:31:47
【问题描述】：

我想知道是否可以强制浏览器（至少是 Chrome）下载data:text/plain URL。

Chrome 会下载二进制 URL（例如 data:application/zip;base64,...），但不会下载可在浏览器中查看的文件（例如文本文件）。

到目前为止，我已经尝试过但没有运气的是：

data:text/plain;content-disposition=attachment;filename=test.txt;...

但我好像不能添加这样的标题。

有没有办法让 Chrome 下载一个data:text/plain,... URL？

【问题讨论】：

标签： file text download content-disposition data-url

【解决方案1】：

这是一个纯 Javascript 解决方案，用于创建文本 blob 并下载为文本文件

var fileContent = 'This is sample text file';
var fileName = 'sampleFile.txt';

const blob = new Blob([fileContent], { type: 'text/plain' });
const a = document.createElement('a');
a.setAttribute('download', fileName);
a.setAttribute('href', window.URL.createObjectURL(blob));
a.click();

【讨论】：

我尝试了其他解决方案，但它始终无法在 Microsoft Edge 上运行。但这个简单的解决方案似乎在 Chrome、Mozilla 和 Microsoft Edge 上运行良好。谢谢！

【解决方案2】：

试试这个：

<a download="file_downloaded_via_data_URL.txt"
href="data:text/plain;base64,SGVsbG8sIHdvcmxkISBJJ20gZG93bmxvYWRlZCB2aWEgImRhdGE6dGV4dC9wbGFpbjsuLi4iIFVSTCB1c2luZyA8YSBkb3dubG9hZD0iZmlsZV9uYW1lIi4uLj4uDQpNeSBiaXJ0aHBsYWNlOiBodHRwOi8vc3RhY2tvdmVyZmxvdy5jb20vcXVlc3Rpb25zLzY0Njg1MTcvDQoNCk1vcmUgYWJvdXQ6DQpodHRwOi8vd3d3LnczLm9yZy9UUi9odG1sL2xpbmtzLmh0bWwjYXR0ci1oeXBlcmxpbmstZG93bmxvYWQNCmh0dHA6Ly93d3cudzMub3JnL1RSL2h0bWwvbGlua3MuaHRtbCNkb3dubG9hZGluZy1yZXNvdXJjZXMNCg0KQnJvd3NlciBzdXBwb3J0OiBodHRwOi8vY2FuaXVzZS5jb20vZG93bmxvYWQ=">
    Download text file
</a>

它使用 HTML5 属性 download="filename.ext"。（不需要 JS：）

可以在http://caniuse.com/download查看浏览器支持

（截至目前，2013 年，不支持 IE 和 Safari）

我认为，您可以对不支持的浏览器进行回退：使用 JS 将 href="..." 的值更改为服务器脚本的 URL（这将返回带有适当 HTTP 标头 Content-disposition: attachment;filename=filename.txt 的文件内容）。

【讨论】：

这太棒了，2017年一些新的浏览器现在不支持导航到数据url
即使启用了 CORS，这也不适用于托管在第三方网站（即 CDN）上的文件。

【解决方案3】：

到目前为止，已经可以在 Chrome 中使用 <a download>。使用dispatchEvent，您可以随时将任何字符串下载为文件（即使使用自定义文件名）。这是一个使用它的实用函数：

var downloadFile = function(filename, content) {
  var blob = new Blob([content]);
  var evt = document.createEvent("HTMLEvents");
  evt.initEvent("click");
  $("<a>", {
    download: filename,
    href: webkitURL.createObjectURL(blob)
  }).get(0).dispatchEvent(evt);
};

用法：

downloadFile("foo.txt", "bar");

它使用 jQuery 和 webkit 前缀，但两者都可以避免。

【讨论】：

<a download> 看起来真的很棒，而且这个功能就像在 Chrome 中宣传的那样工作。（我已经在使用 jQuery）是否可以修改此功能以在 Firefox 和/或 Safari 中也可以使用？我对initEvent 和Blob 和createObjectURL 知之甚少，不知道有什么可能。谢谢。
@Harold Safari 不支持 download 属性。

【解决方案4】：

我所做的是将数据发送到服务器，服务器使用以下 HTTP 标头将它们发送回：

Content-disposition: attachment;filename=test.txt

我不喜欢这个，但效果很好。

【讨论】：

【解决方案5】：

这简直就是地狱......

<div class="tags-style-one dragme" draggable="true" data-transfer="33343">some value is 33343</div>

    <script type="text/javascript">
    (function ($) {
        $(document).ready(function () {
        $('.dragme').on("dragstart",function(evt) {
            evt.originalEvent
                    .dataTransfer
                    .setData(
                            "text/plain",
                            $(this).data('transfer').toString()
                    );
        });
    })(jQuery);
</script>

【讨论】：