从JavaScript中的字节下载文件

时间:2023-02-06 07:56:36

I want to download the file which is coming in the form of bytes from AJAX response.

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

I tried to do it this way with the help of Bolb:

我试图在Bolb的帮助下这样做:

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();

It is in fact downloading the pdf file but the file itself is corrupted.

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

How can I accomplish this?

我怎么能做到这一点?

3 个解决方案

#1


46  

I asked the question long time age, so I might be wrong in some details.

我问了很长时间的问题,所以我可能在某些细节上错了。

Blob as it turned out needs array buffers. That's why base64 bytes need to be converted to array buffers first.

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

Here is the function to do that:

这是执行此操作的功能:

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

Here is my function to save a pdf file:

这是我保存pdf文件的功能:

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

Here is how to use these two functions together:

以下是如何将这两个函数结合使用:

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

#2


2  

You just need to add one extra line and it should work. Your response is byte array from your server application

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

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();

#3


0  

Set Blob type at Blob constructor instead of at createObjectURL

在Blob构造函数而不是createObjectURL上设置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();

#1


46  

I asked the question long time age, so I might be wrong in some details.

我问了很长时间的问题,所以我可能在某些细节上错了。

Blob as it turned out needs array buffers. That's why base64 bytes need to be converted to array buffers first.

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

Here is the function to do that:

这是执行此操作的功能:

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

Here is my function to save a pdf file:

这是我保存pdf文件的功能:

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

Here is how to use these two functions together:

以下是如何将这两个函数结合使用:

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

#2


2  

You just need to add one extra line and it should work. Your response is byte array from your server application

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

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();

#3


0  

Set Blob type at Blob constructor instead of at createObjectURL

在Blob构造函数而不是createObjectURL上设置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();