vue-pdf-signature-wd v1.0.4
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,只需要添加标签：
`
<div>
<pdf
ref="pdf"
:src="url">
</pdf>
</div>`
其实，想要显示多页也没那么复杂，你每次就显示一页，我，直接v-for 循环，直接显示完，简单粗暴。
页面代码: `
<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")
`
<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>`