Vue 项目实战——如何在页面中展示 PDF 文件以及 PDFObject 插件实战
<template>
<div>
<!-- PDF.js 用于在网页中显示 PDF -->
<iframe :src="pdfUrl" style="width:100%;height:500px;"></iframe>
</div>
</template>
<script>
export default {
data() {
return {
pdfUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.7.570/web/viewer.html?file=你的PDF文件地址'
}
}
}
</script>在这个例子中，我们使用了一个 iframe 来加载 PDF.js 的查看器，并通过查询参数 file 指定了要显示的 PDF 文件的地址。这样，我们就可以在 Vue 项目的页面上显示 PDF 文件了。这是一种不需要使用额外库的方法，是一种较为轻量级的解决方案。
评论已关闭