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

html HTML

GOHarry猪猪

2020-03-16

将PDF嵌入HTML的推荐方法是什么?

  • iFrame?
  • 宾语?
  • 嵌入?

Adobe对此有何评价?

就我而言,PDF是动态生成的,因此在刷新之前无法将其上载到第三方解决方案。

第1640篇《在HTML中嵌入PDF的推荐方法?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

12个回答
小胖Pro 2020.03.16

I had to preview a PDF with React so after trying several libraries my optimal solution was to fetch the data and ebmed it.

const pdfBase64 = //fetched from url or generated with jspdf or other library

  <embed
    src={pdfBase64}
    width="500"
    height="375"
    type="application/pdf"
  ></embed>
老丝达蒙 2020.03.16
  1. Construct a blob of the input PDF bytes
  2. Use an iframe and PDF.js patched with this cross browser workaround

The URI for the iframe should look something like this:

/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B

Now FF, Chrome, IE 11, and Edge all display the PDF in a viewer in the iframe passed via standard blob URI in the URL.

DavaidHarry 2020.03.16
<object width="400" height="400" data="helloworld.pdf"></object>
老丝阿飞 2020.03.16
  1. 创建一个容器来保存您的PDF

    <div id="example1"></div>
    
  2. 告诉PDFObject嵌入哪个PDF,以及在哪里嵌入

    <script src="/js/pdfobject.js"></script>
    <script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>
    
  3. 您可以选择使用CSS来指定视觉样式,包括尺寸,边框,边距等。

    <style>
    .pdfobject-container { height: 500px;}
    .pdfobject { border: 1px solid #666; }
    </style>
    

来源:https : //pdfobject.com/

斯丁 2020.03.16

Scribd不再要求您将文档托管在其服务器上。如果您使用他们创建一个帐户,那么您将获得一个发布者ID。只需几行JavaScript代码即可加载存储在您自己的服务器上的PDF文件。

有关更多详细信息,请参见开发人员工具

Davaid飞羽 2020.03.16

您可以像这样使用保存的pdf的相对位置:

例1

<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>

例2

<iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>

理查德小宇宙 2020.03.16

FDViewPDF2SWF(其本身基于xpdf)与SWF查看器结合在一起因此您可以在服务器上即时转换和嵌入PDF文档。

xpdf不是一个完美的PDF转换器。如果需要更好的结果,则Ghostview可以将PDF文档转换为其他格式,从而可以更轻松地为其构建Flash查看器。

但是对于简单的PDF文档,FDView应该可以正常工作。

蛋蛋小卤蛋 2020.03.16

看看这段代码-将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>
小胖Davaid 2020.03.16

同时使用<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>
乐猴子樱 2020.03.16

您也可以为此使用Google PDF查看器。据我所知,这不是Google的正式功能(我对这个功能有误吗?),但它对我非常顺利。您需要先上传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。

DavaidAJim 2020.03.16

这一点很快速,容易,并且不需要任何第三方脚本:

<embed src="http://example.com/the.pdf" width="500" height="375" 
 type="application/pdf">

更新(1/2018):

Android上的Chrome浏览器不再支持PDF嵌入。您可以使用Google云端硬盘PDF查看器解决此问题

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">
Eva梅 2020.03.16

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

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android