vue-pdf实现pdf文件在线预览

在日常的工作中在线预览 PDF 文件的需求是很多的，下面介绍一下使用 vue-pdf 实现pdf文件在线预览

使用 npm 安装 vue-pdf

npm install vue-pdf
使用 vue-pdf 显示 PDF 文件

<template><div><pdf :src="url"></pdf></div>
</template>
<script>
import pdf from 'vue-pdf'export default {components:{pdf},data(){return {url: "http://example.com/example.pdf"}}
</script>

此时页面中就会显示我们提供的 PDF 文件了，但是此时只显示了 PDF 文件的第一页

按页显示 PDF 文件

<template><div><button @click="prevPage">上一页</button><button @click="nextPage">下一页</button><div >{{ pageNumber }} / {{ totalNumber }}</div><pdf:page="pageNum":src="url"@progress="loadedRatio = $event"@num-pages="pageTotalNum=$event" ></pdf></div>
</template><script>
import pdf from 'vue-pdf'export default {components: {pdf,},data() {return {url: "http://example.com/example.pdf",pageNum: 1,totalNumber: 1,loadedRatio: 0}},mounted() {this.getNumPages()},methods: {getNumPages() {let loadingTask = pdf.createLoadingTask(this.url)loadingTask.promise.then(pdf => {this.totalNumber = pdf.numPages}).catch(err => {console.error('pdf 加载失败', err);})},// 上一页prePage() {let page = this.pageNumberpage = page > 1 ? page - 1 : this.totalNumberthis.pageNumber = page},// 下一页nextPage() {let page = this.pageNumberpage = page < this.totalNumber ? page + 1 : 1this.pageNumber = page}}
}
</script>

使用 vue-pdf 能满足我们预览 PDF 文件的要求，但是使用起来太繁琐了，配置很多，无法开箱使用，下面介绍一款 PDF SDK 实现 PDF 在线预览

使用 ComPDFKit PDF SDK 实现 PDF 文件的在线预览

第一步：添加 ComPDFKit PDF SDK 包

将 @compdfkit 文件夹添加到项目的根目录或 assets 目录下的 lib 目录中。这将作为 ComPDFKit PDF SDK for Web 的入文件，并将它导入到您的项目中。
将包含运行 ComPDFKit PDF SDK for Web 所需的静态资源文件的 webviewer 文件夹添加到项目的静态资源文件夹中。获取地址和试用地址：https://www.compdf.com/webviewer/demo

第二步：显示PDF文档

将 @compdfkit 文件夹中的 webviewer.js 文件导入到您的项目中。
调用 ComPDFKitViewer.init() 在您的项目中初始化 ComPDFKit Web Viewer。
将要显示的 PDF 地址和许可证密钥传递给 init 函数

// Import the JS file of ComPDFKit Web Viewer
import ComPDFKitViewer from "/@compdfkit/webviewer";
const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({pdfUrl: 'Your PDF Url',license: 'Input your license here'
}, viewer)
.then((core) => {const docViewer = core.docViewer;docViewer.addEvent('documentloaded', () => {console.log('ComPDFKit Web Viewer loaded');})
})