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

Question

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

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

Answer 1

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

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

例：

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

以上是这个最小 PDF 示例的 Base64 编码数据。但是，您不能给它一个这样的文件名，并且可能会在其位置看到一些奇怪的东西。

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