我要评论前言
vue-pdf 可以实现pdf文件在线预览并且支持分页。安装方式：npm install --save vue-pdf
完整代码
<template>
<el-dialog :visible="visible" title="查看pdf" width="1100px" top="2vh" append-to-body @close="handleclose">
<pdf-viewer
v-if="url"
style="height: 750px;overflow: auto;"
:src="url"
:page="pagedata.currentpage"
@num-pages="pagedata.total = $event"
@page-loaded="pagedata.currentpage = $event"
@loaded="loadpdfhandler()">
</pdf-viewer>
<div class="ui-pdf-page" v-if="pagedata.total > 1">
<span @click="changepdfpage(0)" :class="pagedata.currentpage == 1 ? '' : 'ui-link'">上一页</span>
<span>{{pagedata.currentpage + '/' + pagedata.total}}</span>
<span @click="changepdfpage(1)" :class="pagedata.currentpage == pagedata.total ? '' : 'ui-link'">下一页</span>
</div>
</el-dialog>
</template>
<script>
import pdfviewer from 'vue-pdf'
import cmapreaderfactory from 'vue-pdf/src/cmapreaderfactory.js' //解决中文显示
export default{
components: {
pdfviewer
},
name: 'compdfview',
props: {
src: {
type: string,
default: '',
},
visible: {
type: boolean,
default: false
},
},
data(){
return {
url: '',
pagedata: {
currentpage: 0,
total: 0,
}
}
},
watch:{
visible(val) {
if (val) {
this.url = pdfviewer.createloadingtask({ url: this.src, cmapreaderfactory });
}
}
},
methods: {
handleclose() {
this.pagedata.currentpage = 1;
this.$emit('update:visible', false);
},
changepdfpage (val) {
if (val === 0 && this.pagedata.currentpage > 1) {
this.pagedata.currentpage--
}
if (val === 1 && this.pagedata.currentpage < this.pagedata.total) {
this.pagedata.currentpage++
}
},
loadpdfhandler() {
this.pagedata.currentpage = 1;
}
}
}
</script>
<style scoped lang="less">
.ui-pdf-page span {
font-size: 12px;
padding: 0 20px;
color: #626879;
}
.ui-pdf-page span.ui-link {
color: #3c8cff;
cursor: pointer;
}
</style>
解决无法显示中文问题
关键代码
import pdfviewer from 'vue-pdf'
import cmapreaderfactory from 'vue-pdf/src/cmapreaderfactory.js'
this.url = pdfviewer.createloadingtask({ url: this.src, cmapreaderfactory });以上就是vue pdf二次封装解决无法显示中文问题方法详解的详细内容，更多关于vue pdf封装中文显示的资料请关注代码网其它相关文章！
发表评论