使用嵌入元素显示超过 2MB 的 pdf 文件

Question

我正在制作一个可以预览 PDF 文件的应用程序。嵌入元素embed对于小型 PDF 文件效果很好，但对于较大的 PDF 文件则失败，因为数据 URL 的大小限制。我正在寻找一种使用浏览器的本机 PDF 查看器来查看 PDF 文件但不使用数据 url 的方法。

我的代码目前如下所示：

<script>
function addToCard(input) {
   if (input.files.length <= 0) return;
   let fileReader = new FileReader();
   fileReader.onload = async function () {
       pdfCard.src = fileReader.result;
   };
   fileReader.readAsDataURL(input.files[0]);
}
</script>

<input type=file oninput="addToCard(this)" />

<embed id=pdfCard style="width:100%;height:100%" />

例子。原始 PDF 在这里。

Answer 1

您可以URL.createObjectURL()在 PDF 上使用。它还创建一个代表该对象的 URL；然而，对象 URL 和数据 URL 之间的区别在于，数据 URL 包含对象本身，而对象 URL 是对存储在内存中的对象的引用。这意味着对象 URL 比数据 URL 短得多，并且创建时间更短。

这种方法有两个缺点，可能会阻止您使用它。首先，对象 URL 只能在创建它的页面上工作。尝试在不同页面上使用对象 URL是行不通的。如果您需要在创建该 URL 的页面以外的任何地方访问此 URL，则此方法将不起作用。

第二个是对象 URL 将为其创建的对象保存在内存中。当你使用完该URL.revokeObjectURL()方法后，你必须撤销该对象 URL，否则会导致内存泄漏。这意味着您可能需要添加一些额外的代码，以便在加载 PDF 后撤销对象 URL。这个例子可能会有帮助。

实现可能看起来像这样：

function addToCard(input) {
  if (input.files.length <= 0) return;

  pdfCard.src = URL.createObjectURL(input.files[0])

  // gonna have to call revokeObjectURL eventually...
}