在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。
在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。
当前回答
我发现这工作得很好,浏览器处理它在firefox。我没有检查IE…
<script>window.location='url'</script>
其他回答
看看这段代码-将PDF嵌入HTML
<!-- Embed PDF File -->
<object src="YourFile.pdf" type="application/pdf" title="SamplePdf" width="500" height="720">
<a href="YourFile.pdf">shree</a>
</object>
如果可能的话,使用本机解决方案,它总是最好的解决方案,因为它来自本机浏览器(使用embed或iframe),或者你可以使用这个小库来支持你:https://pdfobject.com
大多数人推荐使用著名的pdf。js。它一直工作得很好,直到我需要使用ShadowDOM。有些页面是空白的(白色),有些是黑色的。我不可能知道发生了什么,而且它正在制作中:)。
如果您不想自己托管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的相对位置:
例二
<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>
这是快速、简单、直截了当的,不需要任何第三方脚本:
<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">