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

2022-01-21 00:00:00 file download blob base64 javascript

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

I've created a function that takes a blob and fileName which is supposed to download that blob implemented as follows:

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 以注销 reader.result 创建的 base64 的值.

To try debug this I've made a console.log to log out the value of base64 which is created by reader.result.

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

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

My PDF file get's downloaded but it's corrupted. What am I doing wrong in my file download implementation?

如果有任何其他细节可能对此有所帮助，请告诉我?我 100% 确定 blob 本身不是损坏的文件.

Let me know if there are any additional details that might help with this? I'm 100% sure that the blob itself is not a corrupted file.

推荐答案

我无法确定您的代码为什么不起作用，但我可以确定您所做的最多是无用的.

I can't tell for sure why your code doesn't work, but I can tell for sure that what you are doing is useless at best.

p>

不要将 Blob 转换为 dataURI，在 99%* 的情况下，您想要使用此 dataURI 执行的操作可以直接使用原始 Blob 和 blobURI 完成.

Do not convert a Blob to a dataURI, 99%* of the time, what you want to do with this dataURI can be done directly with the original Blob and a blobURI.

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

在这里，你想要做的(设置一个锚点指向你的 Blob 的数据)可以直接用 Blob 完成:只需通过调用创建一个 blobURI(它只是指向内存中数据的指针)URL.createObjectURL(blob).

Here, once again what you want to do (set an anchor to point to your Blob's data) can be done with the Blob directly: simply create a blobURI (which is just a pointer to the data in memory) by calling 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");

相关文章