在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。
在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。
当前回答
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
这是我对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>
<embed src="data:application/pdf;base64,..."/>
如果您不想自己托管PDF文件,或者希望使用额外的安全功能(例如防止用户下载PDF文件)自定义PDF查看器。我建议使用CloudPDF。https://cloudpdf.io
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudPDF Viewer</title>
<style>
body, html {
height: 100%;
margin: 0px;
}
</style>
</head>
<body style="height: 100%">
<div id="viewer" style="width: 800px; height: 500px; margin: 80px auto;"></div>
<script type="text/javascript" src="https://cloudpdf.io/viewer.min.js?version=0.1.0-beta.11"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
const config = {
documentId: 'eee2079d-b0b6-4267-9812-b6b9eadb9c60',
darkMode: true,
};
CloudPDF(config, document.getElementById('viewer')).then((instance) => {
});
});
</script>
</body>
</html>
您可以通过在查询字符串中传递一些选项来控制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>