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

iFrame吗? 对象? 嵌入?

Adobe是怎么说的呢?

在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。


当前回答

在我得到嵌入base64编码PDF的问题之前,因为URI限制,所以任何超过2MB的文件都不会在Chrome上正确呈现。

我的解决方案是:

转换uri编码为Blob: 基于Blob生成临时DOM字符串。 const blob = dataURItoBlob(this.dataUrl); var temp_url = window.URL.createObjectURL(blob); 决定你想把iframe附加到DOM的位置: const target = document.querySelector(targetID); 目标。innerHTML =' <iframe src='${temp_url}' type="application/pdf"></iframe> .

其他回答

我已经在其他地方回答了这个问题,但是,我在多个解之间做了一个求值。另外,如果你打算用于商业用途,这些可能会有所帮助:

免费的解决方案

iframe:只是使用一个iframe,然而,这不是大多数人在这里搜索的。 [谷歌Docs预览]谷歌Docs有预览(在这里查看其他答案) Pdf.js是没有外部依赖的开源解决方案 Adobe提供了一种“免费”的PDF嵌入API——如果你对基于云的解决方案满意,推荐使用这种方法。

商业服务提供商

Pdf.js Express是Pdf.js的商业化扩展(性能最差的产品,不贵) PSPDFKit -来自奥地利的供应商,提供良好的业务支持(价格适中,产品好) Foxit -中国公司提供PDF网页solton以及。(最便宜的商业报价) PDFTron -美国PSDPDFkit的竞争对手(更昂贵,但也更先进)

希望这能有所帮助。我可能会在博客中发布更详细的信息,如果这对人们有帮助的话(请在评论中告诉我)。

这是我对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>

Scribd不再要求你把你的文档放在他们的服务器上。如果你和他们一起创建一个账号,你就会得到一个出版商ID。只需要几行JavaScript代码就可以加载存储在您自己服务器上的PDF文件。

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

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

在线演示: https://mozilla.github.io/pdf.js/web/viewer.html

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

值得注意的PDF是您应该考虑的选项之一 它有一个免费的计划,除非你打算在pdf文件上进行实时在线协作

将以下iframe嵌入到任何html并享受结果:

<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>