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

时间:2011-06-24 13:31:47

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

我想知道是否可以强制浏览器(至少是Chrome)下载data:text/plain网址。

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

到目前为止,我已经尝试过没有运气的是:

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

但似乎我无法添加这样的标题。

有没有办法让Chrome下载data:text/plain,...网址?

5 个答案:

答案 0 :(得分:13)

截至目前,已经可以在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前缀,但两者都可以避免。

答案 1 :(得分:7)

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

它使用HTML5属性download="filename.ext"。 (不需要JS:)

更多关于: http://www.w3.org/TR/html/links.html#downloading-resources

可以在http://caniuse.com/download

检查浏览器支持

(至于现在,2013年,没有IE或Safari支持)

我认为,你可以为不支持的浏览器做一个后备:使用JS将href="..."的值更改为服务器脚本的URL(这将使用适当的HTTP头{{1}返回文件内容})。

答案 2 :(得分:1)

我所做的是将数据发送到服务器,然后使用以下HTTP标头将其发回:

Content-disposition: attachment;filename=test.txt

我不喜欢这样,但效果很好。

答案 3 :(得分:0)

这就像地狱......

<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>

答案 4 :(得分:0)

这是一个纯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();