在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。
在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。
当前回答
看看这段代码-将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>
其他回答
同时使用<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>
我必须用React预览PDF,所以在尝试了几个库之后,我的最佳解决方案是获取数据并emed它。
const pdfBase64 = //fetched from url or generated with jspdf or other library
<embed
src={pdfBase64}
width="500"
height="375"
type="application/pdf"
></embed>
您还可以使用谷歌PDF查看器来实现此目的。据我所知,这不是谷歌的官方功能(我错了吗?),但它对我来说非常好和顺利。你需要先上传PDF文件,然后使用它的URL:
<iframe src="https://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>
重要的是它不需要Flash播放器,而是使用JavaScript。
如果您不想自己托管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字节的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传递。