这篇文章主要介绍了vue pdf无法显示中文如何解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue pdf无法显示中文如何解决文章都会有所收获，下面我们一起来看看吧。
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"
: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无法显示中文如何解决”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
