如何启动客户端数据的文件下载并指定其文件名？ [英] How can I initiate a file download of client-side data and specify its file name?

问题描述

我一直在寻找一种方式来启动仅在用户浏览器上执行的代码中存在的数据的文件下载（而不是从服务器启动下载），并在该过程中指示文件名。 / p>

对StackOverflow的搜索会产生一些不太需要的有前途的帖子。

这个答案不是IE兼容的，不允许指定文件名。

这个问题提供了一些启动下载的方法，但允许指定文件名的答案不是IE兼容的，需要用户交互，而其他答案不允许指定文件名。

有没有办法从JavaScript启动文件下载：

• 下载客户端 -


• 不需要用户手动启动下载


• 允许指定下载文件的文件名

解决方案

经过多次搜索和尝试各种方法，我能够提出以下几点。

tryAnchorDownload（）方法应该适用于现代版本的FireFox和Chrome，并且是一个清除版本的代码， a href =http：// w ww.codingforums.com/javascript-programming/285618-output-byte-array-pdf-javascript.htmlrel =nofollow>在这个论坛帖子。

trySaveAsDownload（）的方法在理论上适用于任何主要的现代浏览器，尽管Safari可能不遵守指定的文件名。它需要 FileSaver.js 库，某些浏览器可能需要 Blob.js polyfill。

您可以在这里调用主要功能，如这个：

  initiateFileDownload（bytes，myFile.txt）; 
  

其中字节是一个 Uint8Array 文件的字节。

  function byteArrayToBase64（bytes）{
 var chArray = Array.prototype.map.call（bytes，
 function（byte）{return String.fromCharCode（byte）;}）; 
 
 return window.btoa（chArray.join（））; 
} 
 
 var octetStreamMimeType =application / octet-stream; 
 
函数tryAnchorDownload（fileBytes，fileName）{
 var aElement = document.createElement（a），
事件; 
 
 if（a中的下载）{
 aElement.setAttribute（download，fileName）; 
 aElement.href =data：+ octetStreamMimeType + 
; base64，+ byteArrayToBase64（fileBytes）; 
 
 document.body.appendChild（aElement）; 
 event = document.createEvent（MouseEvents）; 
 event.initMouseEvent（click，true，false，window，0，0，0，0，0，
 false，false，false，false，0，null） 
 aElement.dispatchEvent（event）; 
 document.body.removeChild（aElement）; 
 
返回true; 
} 
 
 return false; 
} 
 
函数trySaveAsDownload（fileBytes，fileName）{
 var blob; 
 
 if（window.saveAs）{
 blob = new Blob（[fileBytes]，{type：octetStreamMimeType}）; 
 
 saveAs（blob，fileName）; 
 
返回true; 
} 
 
 return false; 
} 
 
 // fileBytes是一个Uint8Array 
函数initiateFileDownload（fileBytes，fileName）{
 return tryAnchorDownload（fileBytes，fileName）|| 
 trySaveAsDownload（fileBytes，fileName）; 
} 
  

对于 byteArrayToBase64（）以上功能可以在在MDN上。

I have been looking for a way to initiate a file download of data that only exists within the code executing on the user's browser (as opposed to initiating a download from the server), and indicate the file name in the process.

A search of StackOverflow turns up a number of promising posts that don't quite do what I need.

This answer is not IE-compatible and doesn't allow specifying a file name anyway.

This question provides a few ways to initiate downloads, but the answers that allow specifying a file name are not IE compatible and require user interaction, while other answers don't allow specifying a file name.

Is there a way to initiate a file download from JavaScript that:

• Downloads client-side data
• Does not require the user to manually initiate the download
• Allows specifying the filename of the downloaded file

解决方案

After much searching around and trying approaches from various places, I was able to come up with the following.

The tryAnchorDownload() approach should work on modern versions of FireFox and Chrome, and is a cleaned-up version of code provided in this forum post.

The trySaveAsDownload() approach should theoretically work on any major modern browser, though Safari may not respect the specified file name. It requires the FileSaver.js library and some browsers may need the Blob.js polyfill.

You can call the main function here like this:

initiateFileDownload(bytes, "myFile.txt");

where bytes is a Uint8Array of the file's bytes.

function byteArrayToBase64(bytes) {
    var chArray = Array.prototype.map.call(bytes, 
                     function (byte) { return String.fromCharCode(byte); });

    return window.btoa(chArray.join(""));
}

var octetStreamMimeType = "application/octet-stream";

function tryAnchorDownload(fileBytes, fileName) {
    var aElement = document.createElement("a"),
        event;

    if ("download" in aElement) {
        aElement.setAttribute("download", fileName);
        aElement.href = "data:" + octetStreamMimeType + 
                        ";base64," + byteArrayToBase64(fileBytes);

        document.body.appendChild(aElement);
        event = document.createEvent("MouseEvents");
        event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0,
                             false, false, false, false, 0, null);
        aElement.dispatchEvent(event);
        document.body.removeChild(aElement);

        return true;
    }

    return false;
}

function trySaveAsDownload(fileBytes, fileName) {
    var blob;

    if (window.saveAs) {
        blob = new Blob([fileBytes], { type: octetStreamMimeType });

        saveAs(blob, fileName);

        return true;
    }

    return false;
}

// fileBytes is a Uint8Array
function initiateFileDownload(fileBytes, fileName) {
    return tryAnchorDownload(fileBytes, fileName) ||
           trySaveAsDownload(fileBytes, fileName);
}

A more thorough (and probably more efficient) alternative to the byteArrayToBase64() function above can be found on MDN.

这篇关于如何启动客户端数据的文件下载并指定其文件名？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！