代码之家 › 专栏 › 技术社区 › Barry Michael Doyle

在JavaScript中下载PDF blob时出现问题

blob base64 download file javascript

Barry Michael Doyle · 技术社区 · 6 年前

我创建了一个函数 blob 和 fileName 它应该下载实现如下的blob:

const blobToBase64 = (blob, callback) => {
  const reader = new FileReader();
  reader.onloadend = () => {
    const base64 = reader.result;
    console.log({ base64 });
    callback(base64);
  };
  reader.readAsDataURL(blob);
};

const downloadFile = (blob, fileName) => () => {
  const link = document.createElement('a');
  blobToBase64(blob, (base64) => {
    link.href = base64;
    link.download = fileName;
    link.click();
  });
};


downloadFile(myBlob, myFileName);

为了调试这个我做了一个 console.log base64 它是由 reader.result

那个 data:application/octet-stream;base64,Mzc4MDY4...

我的PDF文件已下载,但已损坏。在我的文件下载实现中我做错了什么?

1 回复 | 直到 6 年前

Kaiido NickSlash 4 年前

不要将Blob转换为dataURI ,99%*通常,您想用这个dataURI做的事情可以直接用原始Blob和blobURI来完成。

^{*剩下的1%是当您需要创建包含二进制数据的独立文档时,会发生这种情况,但并不经常发生。}

在这里,您想做的事情(设置一个锚点指向Blob的数据)可以直接用Blob完成:只需通过调用 URL.createObjectURL(blob)

const downloadFile = (blob, fileName) => {
  const link = document.createElement('a');
  // create a blobURI pointing to our Blob
  link.href = URL.createObjectURL(blob);
  link.download = fileName;
  // some browser needs the anchor to be in the doc
  document.body.append(link);
  link.click();
  link.remove();
  // in case the Blob uses a lot of memory
  setTimeout(() => URL.revokeObjectURL(link.href), 7000);
};


downloadFile(new Blob(['random data']), "myfile.txt");

Akansh 5 年前

我试着使用fetchapi从服务器下载PDF文件 octet-stream 内容作为回应。所以,如果你检查响应,你会得到这样的字符 %PDF-1.4

以下是解决方案:

function download(pdfUrl) {
        fetch(pdfUrl).then(resp => resp.arrayBuffer()).then(resp => {

            // set the blog type to final pdf
            const file = new Blob([resp], {type: 'application/pdf'});

            // process to auto download it
            const fileURL = URL.createObjectURL(file);
            const link = document.createElement('a');
            link.href = fileURL;
            link.download = "FileName" + new Date() + ".pdf";
            link.click();
        });
    }

在创建blob之前,可以使用相同的方法对八位字节流的内容进行解码。