Javascript 将 BLOB 下载为 PDF答案

【问题标题】：Javascript download BLOB as PDFJavascript 将 BLOB 下载为 PDF
【发布时间】：2022-01-22 23:58:23
【问题描述】：

我正在尝试将 blob 对象转换为 pdf 并下载它。

到目前为止，我已经尝试了以下方法：

var downloadLink = document.createElement('a');
            downloadLink.target = '_blank';
            downloadLink.download = 'name_to_give_saved_file.pdf';

            // convert downloaded data to a Blob
            var blob = new Blob([file.$binary], { type: 'application/pdf' });

            // create an object URL from the Blob
            var URL = window.URL || window.webkitURL;
            var downloadUrl = URL.createObjectURL(blob);

            // set object URL as the anchor's href
            downloadLink.href = downloadUrl;

            // append the anchor to document body
            document.body.append(downloadLink);

            // fire a click event on the anchor
            downloadLink.click();

文件大小似乎是正确的，但我无法查看它，因为它似乎已损坏。

在我的 html 文件中查看 PDF 的工作方式如下：

 $('#test').html('<embed width=100% height=100%'
            + ' type="application/pdf"'
            + ' src="data:application/pdf;base64,'
            + escape(file.$binary)
            + '"></embed>')

这没有任何问题！

现在我的问题...为什么一个工作而另一个不工作？

感谢您的帮助...

【问题讨论】：

你的file.$binary是二进制PDF数据还是base64数据？
我相信是二进制PDF数据！文件对象如下所示：` $binary: "JVBERi0xLjQKJcK1wrYKCjEgMCBvYmoKPDwvQXJ0Qm94WzAgM...." $type: "00" `
是的，它不是二进制文件。它是一个字符串，包含二进制数据的 base64 表示。请注意您的 <embed> 标签如何具有 data:application/pdf;base64,。

标签： javascript pdf blob

【解决方案1】：

您的file.$binary 不是二进制数据（即使对象名称是`$binary）。它实际上是一个 string，包含二进制数据的 base64 表示。

所以，在制作Blob之前，需要将字符串转换为二进制数据。

您可以使用以下方法（来自https://stackoverflow.com/a/16245768）：

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

那你就可以了

var blob = b64toBlob(file.$binary, 'application/pdf');

查看同一问题的其他答案 (https://stackoverflow.com/a/36183085)，有一个更小的方法可以做到这一点：

const b64toBlob = (base64, type = 'application/octet-stream') => 
    fetch(`data:${type};base64,${base64}`).then(res => res.blob())

那你还是可以的

var blob = b64toBlob(file.$binary, 'application/pdf');

【讨论】：