在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中，PDF是动态生成的，因此不能在刷新之前将其上传到第三方解决方案。
当前回答
您可以像这样使用保存的pdf的相对位置:
例二
<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>
Example2
<iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>
其他回答
如果您不想自己托管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>
这是快速、简单、直截了当的，不需要任何第三方脚本:
<embed src="http://example.com/the.pdf" width="500" height="375"
type="application/pdf">
更新(2/3/2021)
Adobe现在提供了自己的PDF嵌入API。
https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html
更新(1/2018):
Android上的Chrome浏览器不再支持PDF嵌入。你可以通过使用谷歌Drive PDF查看器来解决这个问题
<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">
构造一个输入PDF字节的blob 使用跨浏览器补丁的iframe和PDF.js 解决方案
iframe的URI应该是这样的:
/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B
现在FF, Chrome, IE 11和Edge都在iframe中显示PDF，通过URL中的标准blob URI传递。
现代的“完整页面截图”服务或脚本如今能够生成完整HTML和PDF页面的长屏幕截图，并将其转换为JPG或PNG文件，然后可以作为img元素嵌入。
最好的方法可能是使用PDF.JS库。它是一个纯HTML5/JavaScript PDF文档渲染器，没有任何第三方插件。
在线演示: https://mozilla.github.io/pdf.js/web/viewer.html
GitHub: https://github.com/mozilla/pdf.js
