javascript - 在 JavaScript 中下载 PDF Blob 时出现问题

Question

我创建了一个接受 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 创建.

那 base64值为 data:application/octet-stream;base64,Mzc4MDY4...
我的 PDF 文件已下载，但已损坏。我在文件下载实现中做错了什么？

让我知道是否有任何其他细节可能对此有所帮助？我 100% 确定 blob 本身不是损坏的文件。

Answer 1

我无法确定为什么您的代码不起作用，但我可以确定您所做的事情充其量是无用的。
不要将 Blob 转换为 dataURI , 99%* 的时间，你想用这个 dataURI 做的事情可以直接用原始的 Blob 和一个 blobURI 来完成。
*剩下的 1% 是当您需要创建包含二进制数据的独立文档时，它会发生但并不经常发生。
在这里，你想要做的(设置一个 anchor 指向你的 Blob 的数据)可以直接用 Blob 完成:只需调用 URL.createObjectURL(blob) 创建一个 blobURI(它只是指向内存中数据的指针)。 .

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