在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中，PDF是动态生成的，因此不能在刷新之前将其上传到第三方解决方案。
当前回答
创建一个容器来保存PDF < div id = "例二" > < / div > 告诉PDFObject要嵌入哪个PDF，以及在哪里嵌入它 < script src = " / js / pdfobject.js " > < /脚本> > <脚本PDFObject.embed(“/ pdf / sample-3pp.pdf”、“#例二”),> < /脚本 您可以选择使用CSS来指定视觉样式，包括尺寸、边框、页边距等。 <时尚> .pdfobject-container{高度:500px;} .pdfobject {border: 1px solid #666;｝ > < /风格
来源:https://pdfobject.com/
其他回答
最好的方法可能是使用PDF.JS库。它是一个纯HTML5/JavaScript PDF文档渲染器，没有任何第三方插件。
在线演示: https://mozilla.github.io/pdf.js/web/viewer.html
GitHub: https://github.com/mozilla/pdf.js
如果您不想自己托管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或iframe)，或者你可以使用这个小库来支持你:https://pdfobject.com
大多数人推荐使用著名的pdf。js。它一直工作得很好，直到我需要使用ShadowDOM。有些页面是空白的(白色)，有些是黑色的。我不可能知道发生了什么，而且它正在制作中:)。
同时使用<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>
<object width="400" height="400" data="helloworld.pdf"></object>
