在 JavaScript 中从字节下载文件

Question

我想从 AJAX 响应下载以字节形式出现的文件。

我试图在Blob的帮助下这样做：

var blob=new Blob([resultByte], {type: "application/pdf"});
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download="myFileName.pdf";
link.click();

它实际上是在下载pdf文件，但文件本身已损坏。

我怎样才能做到这一点？

Answer 1

我很久以前就问过这个问题，所以我可能在某些细节上是错误的。

事实证明，Blob需要数组缓冲区。这就是为什么需要首先将 base64 字节转换为数组缓冲区的原因。

这是执行此操作的函数：

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

这是我保存pdf文件的函数：

function saveByteArray(reportName, byte) {
    var blob = new Blob([byte], {type: "application/pdf"});
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    var fileName = reportName;
    link.download = fileName;
    link.click();
};

下面介绍如何结合使用这两个函数：

var sampleArr = base64ToArrayBuffer(data);
saveByteArray("Sample Report", sampleArr);

Answer 2

你只需要添加一个额外的行，它应该可以工作。您的响应是来自服务器应用程序的字节数组

var bytes = new Uint8Array(resultByte); // pass your byte response to this constructor
var blob=new Blob([bytes], {type: "application/pdf"});// change resultByte to bytes
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download="myFileName.pdf";
link.click();

Answer 3

在构造

函数Blob而不是在createObjectURL设置Blob type

var blob = new Blob([resultByte], {type: "application/pdf"});
var link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = "myFileName.pdf";
link.click();

Answer 4

如上所述，如果您在前端使用 Axios.get()，请确保添加 { responseType: 'blob' } 选项：

const res = await axios.get("/api/pdf-route", 
    { responseType: 'blob' } // <----- ***
);

然后下载就像许多人提到的：

const pdfBlob = new Blob([res.data], { type: 'application/pdf' });
const downloadUrl = URL.createObjectURL(pdfBlob);
const link = document.createElement("a");
link.href = downloadUrl;
link.download = filename;
link.click();
URL.revokeObjectURL(downloadUrl);

欲了解更多信息： https://stackoverflow.com/a/76126845/12056841

Answer 5

最简单的方法是将字节转换为 base64 格式并构建链接，如下所示

let link=document.createElement('a');
const mimeType = "application/pdf";
link.href=`data:${mimeType};base64,${base64Str}`;
link.download="myFileName.pdf";
link.click();

链接可以在后端生成并从响应中检索。
文件字节可以在 Python 中读取为 base64 字符串，如下所示：

with open("my-file.pdf", "rb") as file:
    base46_str = base64.b64encode(file.read()).decode("utf-8")