在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。
在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。
当前回答
这是我对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>
其他回答
如果你不想自己托管PDF.JS,你可以试试DocDroid。它类似于谷歌Drive PDF查看器,但允许自定义品牌。
您还可以使用谷歌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。
<embed src="data:application/pdf;base64,..."/>
我发现嵌入pdf的最好方法是使用bootstrap,因为它不仅可以显示pdf,而且还可以填充可用空间,您可以根据自己的需要指定比例。下面是我用它做的一个例子:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <div class=" font - family -宋体"> <iframe class="embed- response -item" src="http://example.com/the.pdf" type="application/pdf" allowfullscreen></iframe> . < / div > < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> < script src = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js " > < /脚本>
看看这段代码-将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>