强制下载“data:text/plain”网址

发布于 2024-11-17 06:58:15 字数 381 浏览 6 评论 0原文

我想知道是否可以强制浏览器(至少是 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?

I was wondering whether it is possible to force a browser (at least Chrome) to download a data:text/plain URL.

Chrome does download binary URLs (e.g. data:application/zip;base64,...), but it does not download files that can be viewed inside the browser (such as text files).

What I already tried with no luck so far is this:

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

But it seems like I cannot add headers like this.

Is there any way to make Chrome download a data:text/plain,... URL?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

梅窗月明清似水 2024-11-24 06:58:15

到目前为止,已经可以在 Chrome 中使用。使用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 前缀,但两者都可以避免。

As of now, it has been made possible to use <a download> in Chrome. Using dispatchEvent, you can download any string as file (even with a custom filename) whenever you want. Here's a utility function to use it:

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);
};

Usage:

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

It uses jQuery and the webkit prefix, but both can be avoided.

柠檬色的秋千 2024-11-24 06:58:15

试试这个:

<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 标头的文件内容 Content-disposition:attachment;filename=filename.txt)。

Try this:

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

It uses HTML5 attribute download="filename.ext". (no JS needed:)

More about:
http://www.w3.org/TR/html/links.html#downloading-resources

Browser support can be checked at http://caniuse.com/download

(As for now, 2013, no IE nor Safari support)

I think, you can make a fallback for not-supporting browsers: use JS to change value of href="..." to the URL of your server script (which will return the file contents with appropriate HTTP header Content-disposition: attachment;filename=filename.txt).

小苏打饼 2024-11-24 06:58:15

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

Here is a pure Javascript solution for creating a text blob and download as text file

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();
青衫儰鉨ミ守葔 2024-11-24 06:58:15

我所做的是将数据发送到服务器,服务器将它们发送回以下 HTTP 标头:

Content-disposition: attachment;filename=test.txt

我不喜欢这样,但它工作得相当好。

What I did was sending the data to a server, which sends them back with the following HTTP header:

Content-disposition: attachment;filename=test.txt

I don't like this, but it works rather well.

筑梦 2024-11-24 06:58:15

这工作得像地狱一样......

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

This works as hell ...

<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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文