HTML嵌入PDF，从缓冲区设置内容

Question

我有一个 html 嵌入标签，想在里面显示一个 pdf。这适用于来自文件的 src。但我想从文件中加载内存中的内容。因此，我从缓冲区中的休息 api 取回 pdf 数据，并希望将其输入到嵌入标签中。这可能吗？ 这是一些示例代码

<div id ="pdfView">
    <embed class="form-control" src="some/path/file.pdf" id="pdf"/>
</div>

Answer 1

一种笨拙的方法是在服务器上下载一个临时文件，然后更新src 中使用的文件名。我还没有测试过，但它似乎应该可以工作。

另一种方法是使用数据标签。您需要对 PDF 内容进行 Base64 编码，然后使用 the data URL scheme 生成 src 标签。

例子：

<embed class="form-control" src="data:application/pdf;base64,JVBERi0xLjEKJcKlwrHDqwoKMSAwIG9iagogIDw8IC9UeXBlIC9DYXRhbG9nCiAgICAgL1BhZ2VzIDIgMCBSCiAgPj4KZW5kb2JqCgoyIDAgb2JqCiAgPDwgL1R5cGUgL1BhZ2VzCiAgICAgL0tpZHMgWzMgMCBSXQogICAgIC9Db3VudCAxCiAgICAgL01lZGlhQm94IFswIDAgMzAwIDE0NF0KICA+PgplbmRvYmoKCjMgMCBvYmoKICA8PCAgL1R5cGUgL1BhZ2UKICAgICAgL1BhcmVudCAyIDAgUgogICAgICAvUmVzb3VyY2VzCiAgICAgICA8PCAvRm9udAogICAgICAgICAgIDw8IC9GMQogICAgICAgICAgICAgICA8PCAvVHlwZSAvRm9udAogICAgICAgICAgICAgICAgICAvU3VidHlwZSAvVHlwZTEKICAgICAgICAgICAgICAgICAgL0Jhc2VGb250IC9UaW1lcy1Sb21hbgogICAgICAgICAgICAgICA+PgogICAgICAgICAgID4+CiAgICAgICA+PgogICAgICAvQ29udGVudHMgNCAwIFIKICA+PgplbmRvYmoKCjQgMCBvYmoKICA8PCAvTGVuZ3RoIDU1ID4+CnN0cmVhbQogIEJUCiAgICAvRjEgMTggVGYKICAgIDAgMCBUZAogICAgKEhlbGxvIFdvcmxkKSBUagogIEVUCmVuZHN0cmVhbQplbmRvYmoKCnhyZWYKMCA1CjAwMDAwMDAwMDAgNjU1MzUgZiAKMDAwMDAwMDAxOCAwMDAwMCBuIAowMDAwMDAwMDc3IDAwMDAwIG4gCjAwMDAwMDAxNzggMDAwMDAgbiAKMDAwMDAwMDQ1NyAwMDAwMCBuIAp0cmFpbGVyCiAgPDwgIC9Sb290IDEgMCBSCiAgICAgIC9TaXplIDUKICA+PgpzdGFydHhyZWYKNTY1CiUlRU9GCg==" id="pdf"/>

以上是this minimal PDF example的Base64编码数据。但是，你不能给它一个这样的文件名，并且可能会在它的位置看到一些奇怪的东西。

如果您需要有关 Base64 编码的指南，这可能超出范围但这里有很多解决方案，例如 this one。