在HTML中嵌入PDF的推荐方式是什么?
Adobe自己对它是怎么说的?
在我的案例中,PDF是即时生成的,所以它不能在冲洗之前上传到第三方解决方案。
最好的方法可能是使用PDF.JS库。它是一个纯粹的HTML5/JavaScript的PDF文档渲染器,没有任何第三方插件。
这样做快速、简单、到位,不需要任何第三方脚本。
<embed src="http://example.com/the.pdf" width="500" height="375"
type="application/pdf">
更新(1/2018):。
Android上的Chrome浏览器不再支持PDF嵌入。 你可以通过使用Google Drive PDF查看器来解决这个问题。
<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">
你也可以使用谷歌的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。
你确实有一些控制如何在浏览器中出现的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>
同时使用"
<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>
通过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只有一两页,这是一个不错的选择。 当然,你需要在你的网络服务器上安装ImageMagick(这反过来又需要Ghostscript),这个选项在共享主机环境中可能无法使用。 也有一个PHP插件(称为imagick),工作[像这样](http://www.php.net/manual/en/imagick.examples-1.php),但它有自己的特殊要求。
我们的问题是,由于法律原因,我们不允许在硬盘上临时存储PDF。 此外,当在浏览器中显示一个PDF作为预览时,整个页面不应该被重新加载。
首先,我们尝试了PDF.js。 它在Firefox和Chrome浏览器的查看器中与Base64一起工作。 然而,它对我们的PDF是不可接受的慢。 IE/Edge根本没有工作。
因此,我们尝试在 HTML 对象标签中使用 Base64 字符串。
这对IE/Edge来说也是不行的(也许和PDF.js的问题一样)。
在Chrome/Firefox/Safari中也没有问题。
这就是为什么我们选择了一个混合解决方案。
在IE/Edge中,我们使用IFrame,而对于所有其他浏览器,则使用对象标签。
<br/>。
IFrame解决方案当然也适用于Chrome等浏览器。
我们之所以没有在 Chrome 浏览器上使用这个解决方案,是因为虽然 PDF 正确显示,但只要你点击预览中的 "下载",Chrome 就会向服务器发出新的请求。
就会向服务器发出新的请求。
所需的隐藏字段pdfHelperTransferData(用于发送生成PDF所需的表单数据)不再被设置,因为PDF是在一个IFrame中显示的。
关于这个功能/bug,请看https://stackoverflow.com/questions/32725608/chrome-sends-two-requests-when-downloading-a-pdf-and-cancels-one-of-them。
现在,问题儿童IE9和IE10仍然存在。 对于这些问题,我们放弃了预览解决方案,只是通过点击预览按钮将文档作为下载发送给用户(而不是预览)。 我们已经尝试了很多,但即使我们找到了解决方案,为了这一小部分用户的额外努力也是不值得的。 你可以在这里找到我们的下载解决方案。 [用IFrame下载不刷新的PDF][1]。
我们的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的浏览器类型请看这里。 [如何使用JavaScript检测Internet Explorer(IE)和Microsoft Edge?][2]希望这些发现能给别人节省时间。
[1]: https://stackoverflow.com/a/46843185/7302498 [2]: https://stackoverflow.com/a/31757969/7302498
你可以像这样使用保存的pdf的相对位置。
例1
<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>
例2
<iframe src="example.pdf" style="width:1000px; height:800px;".iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>
。
要将文件流传到浏览器,请参见Stack Overflow问题如何使用.NET 2.0将PDF文件以二进制形式流传到浏览器--请注意,只要稍加改动,无论你是从文件系统中提供文件还是动态生成的文件,这都应该是有效的。
说到这里,MSDN的文章对这个世界的看法相当简单,所以你可能想读一下通过HTTPS成功地将PDF流向浏览器,以了解你可能需要提供的一些头信息。
使用这种方法,一个iframe可能是最好的方法。有一个流媒体文件的web表单,然后把iframe放在另一个页面,其src
属性设置为第一个表单。
这是我用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>
使用iframe和PDF.js打上[此跨浏览器]补丁。 办法](https://stackoverflow.com/a/47395608/6620171)
iframe的URI应该是这样的。
/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B
现在,FF、Chrome、IE 11和Edge都能在浏览器中通过标准blob URI传递的URL中的iframe中显示PDF。