vue-pdf
vue.js pdf viewer
Install
npm install --save vue-pdf-signature-wd说明
此组件fork自vue-pdf，以解决预览PDF签章,部分中文乱码,删除图片报错及解决重复预览PDF无法重载的问题.使用方法和vue-pdf-signature 一样.
安装完之后，使用vue-pdf-signature-wd非常简单，和vue-pdf,vue-pdf-signature等其他的组件并没有什么不同，上代码：
<script> import pdf from 'vue-pdf-signature-wd'; // 中文PDF加载空白引入依赖 import CMapReaderFactory from 'vue-pdf-signature-wd/src/CMapReaderFactory.js' export default { components:{ pdf }, data(){ return { url:"http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf", }, created(){ // 1.解决中文PDF加载空白并报错： this.$nextTick(()=>{ this.url = pdf.createLoadingTask({ url: this.url, CMapReaderFactory })); }) } } </script>
然后在页面使用vue-pdf-signature-wd,只需要添加标签：
<template> <div> <pdf ref="pdf" :src="url"> </pdf> </div> </templat>
其实，想要显示多页也没那么复杂，你每次就显示一页，我，直接v-for 循环，直接显示完，简单粗暴。
页面代码:
<template> <div> <pdf v-for="i in numPages" :key="i" :src="url" :page="i"></pdf> </div> </template> <script> import pdf from 'vue-pdf' export default { components: { pdf }, data(){ return{ url: '', numPages:1, } }, mounted: function() { this.getNumPages("http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf") }, methods: { getNumPages(url) { var loadingTask = pdf.createLoadingTask(url) loadingTask.then(pdf => { this.url = loadingTask this.numPages = pdf.numPages }).catch((err) => { console.error('pdf加载失败') }) }, } } </script>
各个属性：
url ：pdf 文件的路径，可以是本地路径，也可以是在线路径。 numPages ： pdf 文件总页数。 getNumPages 计算总页数，顺便给url和numPages赋值。
this.getNumPages("http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf")
<template> <div> <div class="tools"> <bk-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="prePage" class="mr10"> 上一页</bk-button> <bk-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="nextPage" class="mr10"> 下一页</bk-button> <div class="page">{{pageNum}}/{{pageTotalNum}} </div> <bk-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="clock" class="mr10"> 顺时针</bk-button> <bk-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="counterClock" class="mr10"> 逆时针</bk-button> </div> <pdf ref="pdf" :src="url" :page="pageNum" :rotate="pageRotate" @progress="loadedRatio = $event" @page-loaded="pageLoaded($event)" @num-pages="pageTotalNum=$event" @error="pdfError($event)" @link-clicked="page = $event"> </pdf> </div> </template>