如何仅使用 JavaScript 下载文件

Question

我只有一个 JavaScript 页面和.asmx页面。我想只使用 JavaScript 下载文件，我该如何下载文件。我想下载一份特定的简历。

我在这里收到简历，

var res = data[i].resume;

Answer 1

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

jQuery.file下载

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

Github：https : //github.com/johnculviner/jquery.file下载
演示：http : //jqueryfiledownload.apphb.com/

用法：

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

文件保护程序

它将Blob对象作为输入并下载它。Blob可以使用XMLHttpRequest.

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基于图像、动态生成的文本和任何其他Blobs。

或者自己写

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

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

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 的随机源文件。

Answer 2

如果你使用 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