在HTML中嵌入PDF的推荐方法？-Java 学习之路

1017

在HTML中嵌入PDF的推荐方法是什么？

iFrame？
对象？
嵌入？

Adobe对此有何看法？

就我而言，PDF是即时生成的，因此在刷新之前无法将其上传到第三方解决方案 .

19 回答

20

如果您不想自己托管PDF.JS，可以尝试DocDroid . 它类似于Google Drive PDF查看器，但允许自定义品牌 .

回复于 2024-04-26T02:09:29+08:00
1
我们的问题是，出于法律原因，我们不允许在硬盘上临时存储PDF . 此外，在浏览器中将PDF显示为预览时，不应重新加载整个页面 .

首先我们尝试了PDF.jS.它适用于Firefox和Chrome浏览器中的Base64 . 但是，我们的PDF格式慢得令人无法接受 . IE / Edge根本不起作用 .

因此，我们在HTML对象标记中使用Base64字符串进行了尝试 . 这再次没有为我们选择混合解决方案的原因 . IE/Edge we use an IFrame and for all other browsers the object-tag.

IFrame解决方案当然也适用于Chrome和co . 我们之前未针对Chrome使用此解决方案的原因是，虽然PDF显示正确，但只要您在预览中单击"download"，Chrome就会向服务器发出新请求 . 由于PDF显示在IFrame中，因此不再设置所需的隐藏字段pdfHelperTransferData（用于发送PDF生成所需的表单数据） . 对于此功能/错误，请参阅Chrome sends two requests when downloading a PDF (and cancels one of them) .

现在问题儿童IE9和IE10仍然存在 . 对于这些，我们放弃了预览解决方案，只需通过单击预览按钮向用户下载（而不是预览）来发送文档 . 我们已经尝试了很多但是即使我们找到了解决方案，这个小部分用户的额外努力也不值得付出努力 . 您可以在此处找到我们的下载解决方案：Download PDF without refresh with IFrame .

我们的Javascript
```
var transferData = getFormAsJson()
if (isMicrosoftBrowser()) {
        // Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe)
        var form = document.getElementById('pdf-helper-form');
        $("#pdfHelperTransferData").val(transferData);
        form.target = "iframe-pdf-shower";
        form.action = "serverSideFunctonWhichWritesPdfinResponse";
        form.submit();
 } else {
        // Case non IE use Object tag instead of iframe
        $.ajax({
            url: "serverSideFunctonWhichRetrivesPdfAsBase64",
            type: "post",
            data: { downloadHelperTransferData: transferData },
            success: function (result) {
                $("#object-pdf-shower").attr("data", result);
            }
        })
 }
```
我们的HTML
```
<div id="pdf-helper-hidden-container" style="display:none">
   <form id="pdf-helper-form" method="post">
        <input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />
   </form>
</div>

<div id="pdf-wrapper" class="modal-content">
    <iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe>
    <object id="object-pdf-shower" type="application/pdf"></object>
</div>
```
要检查IE / Edge的浏览器类型，请参阅此处：How can I detect Internet Explorer (IE) and Microsoft Edge using JavaScript?我希望这些发现可以节省其他人的时间 .
回复于 2024-04-26T02:09:29+08:00
5
你应该考虑的选择之一是 Notable PDF
除非您计划在pdf上进行实时在线协作，否则它有一个免费的计划

将以下 iframe 嵌入任何HTML并享受结果：
```
<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>
```
回复于 2024-04-26T02:09:29+08:00
13

FDView将PDF2SWF（它本身基于xpdf）与SWF查看器结合在一起，因此您可以在服务器上即时转换和嵌入PDF文档 .

xpdf不是一个完美的PDF转换器 . 如果您需要更好的结果，那么Ghostview有能力将PDF文档转换为其他格式，您可以更轻松地为其构建Flash查看器 .

但对于简单的PDF文档，FDView应该可以很好地工作 .

回复于 2024-04-26T02:09:29+08:00
2
通过在查询字符串中传递一些选项，您可以控制PDF在浏览器中的显示方式 . 我很高兴这个工作，直到我意识到它在IE8中不起作用 . :(

它适用于Chrome 9和Firefox 3.6，但在IE8中，它会显示消息“如果无法显示PDF，请在此处插入错误消息” .

不过，我还没有测试过任何上述浏览器的旧版本 . 但是这里是我所拥有的代码，以防它帮助任何人 . 这将缩放设置为85％，删除滚动条，工具栏和导航窗格 . 如果我确实遇到过在IE中运行的东西，我会更新我的帖子 .
```
<object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0">
    <p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>
```
回复于 2024-04-26T02:09:29+08:00

这是我用 AXIOS 和Vue.js做的方式：

axios({
            url: `urltoPDFfile.pdf`,
            method: 'GET',
            headers: headers,
            responseType: 'blob'
        })
        .then((response) => {
            this.urlPdf = URL.createObjectURL(response.data)
        })
        .catch((error) => {
            console.log('ERROR   ', error)
        })

将urlPDF动态添加到HTML：

<object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>

回复于 2024-04-26T02:09:29+08:00

428
我发现这个工作正常，浏览器在firefox中处理它 . 我没有检查IE ...
```
<script>window.location='url'</script>
```
回复于 2024-04-26T02:09:29+08:00
-1
您也可以使用Google PDF查看器来实现此目的 . 据我所知，这不是官方的谷歌功能（我错了吗？），但它对我非常好，顺利 . 您需要在之前的某个地方上传PDF并使用其URL：
```
<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>
```
重要的是它不需要Flash播放器，而是使用JavaScript .
回复于 2024-04-26T02:09:29+08:00

同时使用 <object> 和 <embed> 将为您提供更广泛的浏览器兼容性 .

<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
    <embed src="http://yoursite.com/the.pdf" type="application/pdf">
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p>
    </embed>
</object>

回复于 2024-04-26T02:09:29+08:00

-6
- 创建一个容器来保存PDF
```
<div id="example1"></div>
```
- 告诉PDFObject要嵌入哪些PDF，以及嵌入它的位置
```
<script src="/js/pdfobject.js"></script>
<script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>
```
- 您可以选择使用CSS指定视觉样式，包括尺寸，边框，边距等 .
```
<style>
.pdfobject-container { height: 500px;}
.pdfobject { border: 1px solid #666; }
</style>
```
来源：https://pdfobject.com/
回复于 2024-04-26T02:09:29+08:00
469

Scribd不再要求您在其服务器上托管您的文档 . 如果您使用这些帐户创建帐户，则会获得发布商ID . 只需几行JavaScript代码即可加载存储在您自己的服务器上的PDF文件 .

有关更多详细信息，请参阅Developer Tools .

回复于 2024-04-26T02:09:29+08:00
12

可能最好的方法是使用PDF.JS库 . 对于没有任何第三方插件的PDF文档，它是一个纯粹的HTML5 / JavaScript渲染器 .

在线演示：http://mozilla.github.com/pdf.js/web/viewer.html

GitHub：https://github.com/mozilla/pdf.js

回复于 2024-04-26T02:09:29+08:00
7

PdfToImageServlet使用ImageMagick的 convert 命令 .

用法示例： <img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>

回复于 2024-04-26T02:09:29+08:00

查看此代码 - 将PDF嵌入HTML中

<!-- Embed PDF File -->
<object data="YourFile.pdf" type="application/x-pdf" title="SamplePdf" width="500" height="720">
    <a href="YourFile.pdf">shree</a> 
</object>

回复于 2024-04-26T02:09:29+08:00

0
这是快速，简单，重要的，不需要任何第三方脚本：
```
<embed src="http://example.com/the.pdf" width="500" height="375" 
 type='application/pdf'>
```
UPDATE (1/2018):

Android上的Chrome浏览器不再支持PDF嵌入 . 您可以使用Google Cloud 端硬盘PDF查看器解决此问题
```
<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">
```
回复于 2024-04-26T02:09:29+08:00

<object width="400" height="400" data="helloworld.pdf"></object>

回复于 2024-04-26T02:09:29+08:00

5

要将文件流式传输到浏览器，请参阅堆栈溢出问题How to stream a PDF file as binary to the browser using .NET 2.0 - 请注意，无论您是从文件系统提供文件还是动态生成，只需稍作修改即可 .

话虽如此，引用的MSDN文章对世界的看法相当简单，因此您可能还需要阅读Successfully Stream a PDF to browser through HTTPS以及您可能需要提供的一些 Headers .

使用这种方法，iframe可能是最好的方法 . 有一个流式传输文件的webform，然后将iframe放在另一个页面上，并将 src 属性设置为第一个表单 .

回复于 2024-04-26T02:09:29+08:00
92
- 构造输入PDF字节的blob
- 使用 iframe 和 PDF.js 修补this cross browser workaround
iframe的URI应如下所示：
```
/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B
```
现在，FF，Chrome，IE 11和Edge都在通过URL中的标准blob URI传递的iframe中的查看器中显示PDF .
回复于 2024-04-26T02:09:29+08:00
332
通过ImageMagick将其转换为PNG，并显示PNG（快速和脏） .
```
<?php
  $dir = '/absolute/path/to/my/directory/';
  $name = 'myPDF.pdf';
  exec("/bin/convert $dir$name $dir$name.png");
  print '<img src="$dir$name.png" />';
?>
```
如果您需要快速解决方案，希望避免跨浏览器PDF查看问题，以及PDF只是一两页，这是一个不错的选择 . 当然，您需要在Web服务器上安装ImageMagick（这反过来需要Ghostscript），这是在共享托管环境中可能无法使用的选项 . 还有一个PHP插件（称为imagick）可以工作like this但它有自己的特殊要求 .
回复于 2024-04-26T02:09:29+08:00

在HTML中嵌入PDF的推荐方法？

19 回答

相关问题