当前位置: 首页 > news >正文

vue移动端实现vue-pdf在线预览与展示,并且解决页面汉字空白的问题

vue移动端实现pdf的页面在线预览展示,CMapReaderFactory可以解决文字不展示、空白问题

//1、安装依赖vue-pdf

npm install --save vue-pdf

//2、使用组件

<pdf v-for="i in numPages" ref="pdfs" :src="pdfUrl" :key="i" :page="i"></pdf>

//3、js文件

<script>
//引入pdf
important pdf from "vue-pdf";
important CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js"
export default{components:{ pdf },data(){pdfUrl:"",numPages:[]},created(){this.getPdf();//调用方法},//获取pdfmethods:{//接口获取pdfgetPdf(){getPdf({fcn:3 }).then(res=>{if(res.code === '0'){ //需要转换为base64位this.pdfUrl =  "data:application/pdf;base64," + res.data.pdfUrl;this.pdfUrl = pdf.createLoadingTask(this.pdfUrl ,CMapReaderFactory);this.pdfUrl .promise.then(pdf => {this.$nextTick(() => {this.numPages = pdf.numPages}).catch((err) => {console.error('pdf 加载失败', err)})});}})}
}</script>
http://www.lryc.cn/news/58384.html

相关文章:

  • 代码随想录算法训练营第四十九天 | 121. 买卖股票的最佳时机、122.买卖股票的最佳时机II
  • 【职场篇】程序员是否吃青春饭?程序员在35岁之后是否需要转行?
  • ( “树” 之 DFS) 226. 翻转二叉树 ——【Leetcode每日一题】
  • 实验7---myBatis和Spring整合
  • DJ3-4 传输层(第四节课)
  • 2023爱分析·商业智能应用解决方案市场厂商评估报告:数聚股份
  • Kotlin方法执行顺序
  • Ubuntu系统配置SonarQube + cppcheck + Jenkins
  • Spring @Valid 不生效 问题记录
  • 五步教你如何注册一个公司网站
  • CSS绘制气泡对话框样式(有边框)
  • 12款 Macmini A1347 跑 Stable Diffusion,20多分钟一张图
  • 流量控制和拥塞控制的原理和区别
  • 金融机构断卡行动中外部数据
  • 携程总监的单元测试是怎么样写的?
  • 算法每日一题:P2089 烤鸡 -DFS练习
  • Spring中的循环依赖是什么?如何解决它?
  • 不良事件报告系统源码,PHP医院安全(不良)事件报告系统源码,在大型医院稳定运行多年
  • MySQL 查询常用操作(3)——排序 order by
  • Android Jetpack 从使用到源码深耕【数据库注解Room 从实践到原理 】(二)
  • 传统企业如何实现数字化转型?
  • Linux修改密码报错Authentication token manipulation error的终极解决方法
  • ROS实践06 自定义消息类型
  • 《剑指offer》——从尾到头打印链表
  • Javaweb基础配置模板(mybatis+javaweb)
  • 物联网 JS 前端框架开发 - 执行 js 程序
  • 区块链概论
  • MAC地址表安全
  • 处理CSV(python)
  • 【云原生】Kubernetes(k8s)之容器的探测