如何仅使用JavaScript下载文件

Question

我有一个仅包含JavaScript页面和.asmx页面。我想使用JavaScript下载文件，如何才能下载文件？我想下载特定的简历。

我在这里获取简历，

var res = data[i].resume;

- amit

---

请提供更多关于您想要实现的内容的信息。根据提示[ask]和[edit]修改您的问题。 - Felix Kling

这不是Javascript，但我认为你可能仍然感兴趣：<form method="get" action="filepath/filename.txt"> <button type="submit">下载！</button></form> - online Thomas

请参见：https://dev59.com/Q2865IYBdhLWcg3wkfcW#70969399 - Gilbert

Answer 1

您可以使用不同的第三方库：

jQuery.fileDownload

它以URL作为输入并下载文件，同时显示加载对话框。

Github: https://github.com/johnculviner/jquery.fileDownload
演示: http://jqueryfiledownload.apphb.com/

用法：

$.fileDownload(requestUrl, {
    preparingMessageHtml: "Downloading...",
    failMessageHtml: "Error, please try again."
});

FileSaver.js

FileSaver.js用于接收Blob对象作为输入并进行下载，可以使用XMLHttpRequest获取Blob对象。

Github地址：https://github.com/eligrey/FileSaver.js/
演示地址：http://eligrey.com/demos/FileSaver.js/

用法：

var xhr = new XMLHttpRequest();
xhr.open("GET", requestUrl);
xhr.responseType = "blob";

xhr.onload = function () {
    saveAs(this.response, 'filename.txt'); // saveAs is a part of FileSaver.js
};
xhr.send();

它也可用于保存基于canvas的图像、动态生成的文本和任何其他Blob。

或者自己编写

function saveData(blob, fileName) // does the same as FileSaver.js
{
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";

    var url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
}

现在，如果它是一个文本文件，您可以简单地下载它，创建一个 Blob 并保存它：

$.ajax({ 
    url: requestUrl,
    processData: false,
    dataType: 'text'
}).done(function(data) {
    var blob = new Blob([data], { type: "text/plain; encoding=utf8" });
    saveData(blob, 'filename.txt');    
});

或者您可以使用 XMLHttpRequest，它适用于任何类型的文件，包括二进制文件:

var xhr = new XMLHttpRequest();
xhr.open("GET", requestUrl);
xhr.responseType = "blob";

xhr.onload = function () {
    saveData(this.response, 'filename'); // saveAs is now your function
};
xhr.send();

这里是工作演示。请注意，此代码片段在打开后会立即下载一个文件。该文件只是来自GitHub的随机源文件。

- Yeldar Kurmangaliyev

---

还是不行，我尝试了所有的方法... "var res = data[i].resume;" // 在这里我得到了文件名，但接下来怎么下载呢？ - amit

"blob" 是从哪里来的？如果我只有一个 URL…那我该怎么办呢？ - gumuruh

但我们不能在Google Chrome扩展程序的background.js中使用它。 - gumuruh

Answer 2

实际上，有一个叫做 FileSaver.js 的 JavaScript 库，它可以在客户端保存文件。它可以帮助你实现这个目标。

链接：https://github.com/eligrey/FileSaver.js 使用方法如下：Usage:

<script src="http://cdn.jsdelivr.net/g/filesaver.js"></script>
<script>
  function SaveAsFile(t,f,m) {
    try {
      var b = new Blob([t],{type:m});
      saveAs(b, f);
    } catch (e) {
      window.open("data:"+m+"," + encodeURIComponent(t), '_blank','');
    }
  }

SaveAsFile("text","filename.txt","text/plain;charset=utf-8");

</script>

- Kexin Li

---

链接在哪里？ - gumuruh

Answer 3

如果您使用jQuery，可以这样做：

var getFile = function( path_to_file, callback ) {
    $.ajax( {
        url: path_to_file,
        success: callback
    } );
};

getFile( 'path_to_your_asmx_page', function( file_as_text ) {
    console.log( file_as_text );
} );

调用getFile函数，您将在callback函数中获取文件内容。

- Legotin

Answer 4

使用下面的代码。

var sampleBytes = base64ToArrayBuffer('THISISTHETESTDATA');

saveByteArray([sampleBytes], 'ashok.text');

function base64ToArrayBuffer(base64)
 {
    var binaryString =  window.atob(base64);

    var binaryLen = binaryString.length;
    var bytes = new Uint8Array(binaryLen);
    for (var i = 0; i < binaryLen; i++)
        {
        var ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
    }
    return bytes;
}

var saveByteArray = (function ()
 {
    var a = document.createElement("a");

    document.body.appendChild(a);

    a.style = "display: none";

    return function (data, name) {

        var blob = new Blob(data, {type: "text/plain"}),

            url = window.URL.createObjectURL(blob);

        a.href = url;
        a.download = name;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

- Ashok Baghele