vue pdf二次封装解决无法显示中文问题方法详解
导读:收集整理的这篇文章主要介绍了vue pdf二次封装解决无法显示中文问题方法详解,觉得挺不错的,现在分享给大家,也给大家做个参考。 目录前言完整代码解决无法显示中文问题前言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" 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封装中文显示的资料请关注其它相关文章!
您可能感兴趣的文章:- vue在线预览word、excel、pdf、txt、图片的方法实例
- Vue实现docx、pdf格式文件在线预览功能
- vue中使用vue-pdf组件实现文件预览及相应报错解决
- vue+elementUI实现多文件上传与预览功能实战记录(word/PDF/图片/docx/doc/xlxs/txt)
- vue3如何实现PDF文件在线预览功能
- Vue3 + Vue-PDF 实现PDF 文件在线预览实战
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: vue pdf二次封装解决无法显示中文问题方法详解
本文地址: https://pptw.com/jishu/609440.html