使用纯粹的javascript创建下载提示

Question

我在当前窗口的javascript变量中有一些文本数据（比如var a = 'Hello World From Javascript';）。我想做以下事情 通过javascript -

1. open a new window and write the text data to the window.
2. set the content type to text/plain.
3. set the content-disposition to attachment, so that download prompt comes.
4. user downloads the text data as a text file and saves it to his local disk.

这一切都可以通过javascript实现吗？

我知道我们可以对服务器或重定向进行ajax调用，但在这种情况下，不要执行上述步骤。但在这种情况下，这些解决方法不具备适应性。

Answer 1

在没有任何服务器请求的情况下触发文件下载

不幸的是，这不是普通浏览器功能所能做到的。像flash或特定浏览器这样的插件可以满足您的需求，但javascript中的安全限制不允许您下载在浏览器中创建的任意数据。

此外，所有浏览器/版本组合均不支持“数据”网址。我不确定您的用户是否受限于他们使用的是什么浏览器，但这可能会限制您可以使用该解决方案执行的操作。

来源：Triggering a file download without any server request

Answer 2

你可以用JS＆amp; HTML5功能。请在下面找到示例代码。

        var fileParts = ['Hello World From Javascript'];

        // Create a blob object.
        var bb = new Blob(fileParts,{type : 'text/plain'});

        // Create a blob url for this. 
        var dnlnk = window.URL.createObjectURL(bb);

        var currentLnk = $('#blobFl').attr('href');

        // blobFl is the id of the anchor tag through which the download will be triggered.

        $('#blobFl').attr('href',dnlnk);
        $('#blobFl').attr('download','helloworld.txt');

        // For some reason trigger from jquery dint work for me.
        document.getElementById('blobFl').click();

Answer 3

如果您已在服务器上拥有该文件（我在服务器上进行ajax调用以生成并保存PDF） - 您可以这样做

window.location.replace(fileUrl);

Answer 4

不，Content-Disposition是一个响应头，它必须来自服务器。我认为你可以用Flash做到，但我不推荐它。

Answer 5

这是一个干净、纯 js 版本的 @Rajagopalan Srinivasan's answer：

var fileParts = ["Hello World From Javascript"];
// The anchor tag to use.
const blobLink = document.getElementById("blobLink");
// Create a blob object.
var blob = new Blob(fileParts, { type: "text/plain" });

// Create a blob url for this.
var blobUrl = window.URL.createObjectURL(blob);

blobLink.setAttribute("href", blobUrl);
blobLink.setAttribute("download", "helloworld.txt");
blobLink.click();

<a id="blobLink">Download</a>