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

base64 的值为 data:application/octet-stream;base64,Mzc4MDY4...

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

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

Answer 1

我无法确定您的代码为什么不起作用，但我可以确定您的所作所为充其量是无用的。

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

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

在这里，你想要做的（设置一个锚点指向你的 Blob 的数据）可以直接用 Blob 完成：只需通过调用 @ 创建一个 blobURI（它只是一个指向内存中数据的指针） 987654321@.

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

Answer 2

我尝试使用 Fetch API 从服务器下载 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 之前解码八位字节流的内容。