需求是点击查看收据按钮,进入新页面直接显示收据,可以放大、缩小、旋转、下载,没有分页

1、安装

npm i vue-pdf --save

2、使用

<template><div ><pdf v-if="show" :rotate="pageRotate" ref="pdf" :src="pdfSrc" /><div v-if="show" class="btn_contain"><div class="com_btn" @click="scaleD">放大</div><div class="com_btn" @click="scaleX">缩小</div><div class="com_btn" @click.stop="clock">旋转</div><div class="com_btn" @click="downloadPDF">下载</div></div></div>
</template>
<script>
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
import { Toast } from 'vant'
export default {components: {pdf},data() {return {pdfSrc: '',pxheight: '',pxwidth: '',scale: 100, // 放大系数pageRotate: 0,//旋转系数url: ``,//此处为后台返回的预览pdf的url接口路径,带参数,不便展示,所以删除,自己加上就好loadingInstance: null,show: false}},created(){},mounted() {this.loadPdf(this.url)},methods: {// pdf加载时loadPdf(url) {// 展示loadingthis.loadingInstance = Toast.loading({duration: 0, // 持续展示 toastforbidClick: true,message: '加载中...'})let CMAP_URL = "https://unpkg.com/pdfjs-dist@2.0.943/cmaps/";this.pdfSrc = pdf.createLoadingTask({url,cMapUrl: CMAP_URL,cMapPacked: true,CMapReaderFactory});this.pdfSrc.promise.then((pdf) => {// 清除loadingthis.loadingInstance && this.loadingInstance.clear();this.show = true}).catch(()=>{})},// 放大scaleD(){this.scale += 5this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'},// 缩小scaleX () {if (this.scale === 100) {return} this.scale += -5this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'},// 旋转clock () {this.pageRotate += 90},//下载PDFdownloadPDF(){window.location.href = ''//此处为后台返回的下载pdf的url接口路径,带参数,不便展示,所以删除,自己加上就好},
}
</script>

使用vue-pdf遇到的坑,总的来说有三个

1、进入页面后不显示文字

查阅解决方法,看到了两种,

一种是导入cMapReaderFactory,但是用第一种方法会导致问题2 (看了一个大佬写的)

一种是代码中加CMAP_URL和cMapPacked两个参数(这种的不知道管不管用)

巧的是这两种我都不管用,哈哈哈哈哈

2、进入页面后显示,但是再次进入页面不显示问题

引入了cMapPacked之后解决了上面的问题,但是紧接着出现了再次进入页面不显示的问题。

在CMapReaderFactory文件中的代码是这样的

import { CMapCompressionType } from 'pdfjs-dist/es5/build/pdf.js'// see https://github.com/mozilla/pdf.js/blob/628e70fbb5dea3b9066aa5c34cca70aaafef8db2/src/display/dom_utils.js#L64export default function() {this.fetch = function(query) {return import('./buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap' /* webpackChunkName: "noprefetch-[request]" */).then(function(bcmap) {return {cMapData: bcmap.default,compressionType: CMapCompressionType.BINARY,};});}
};

这段代码通过动态import PDF的语言文件实现解决中文显示的问题

3、pdf签章没显示出来,控制台提示:Warning: Unimplemented widget field type "Sig", falling back to base field type

(1)找到 node_modules\pdfjs-dist\build\pdf.worker.js 将下面的代码行注释掉

if (data.fieldType === "Sig") {data.fieldValue = null;// this.setFlags(_util.AnnotationFlag.HIDDEN);//将这一行注释掉解决签章不显示问题}

2、找到 node_modules\pdfjs-dist\es5\pdf.worker.js 将下面的代码行注释掉

if (data.fieldType === "Sig") {data.fieldValue = null;// _this3.setFlags(_util.AnnotationFlag.HIDDEN);//将这一行注释掉
}

移动端H5+vue使用vue-pdf在线预览PDF相关推荐

  1. pdf在线预览 pdf.js的使用

    1.官网:https://mozilla.github.io/pdf.js/ 2.使用方法 1) 通过官网,下载pdfJs插件包,放至项目中: window.open("./js/pdfJS ...

  2. vue配合element 实现在线预览pdf文档

    使用插件 npm install --save vue-pdf <template><div id="app"><el-button type=&qu ...

  3. 网页中实现安卓手机在线预览PDF文件

    写在前面:本文为转载,原文链接:https://blog.csdn.net/super_DuoLa/article/details/90207965原文链接 苹果手机可以直接在线预览PDF文件,而安卓 ...

  4. vue移动端pdf在线预览,并实现手势缩放、移动

    通常我们会遇到ios手机不能下载文件的问题,那是因为苹果手机的拦截机制,这时我们只能通过别的方法来解决问题,我这里的解决方法是直接实现在线预览 pdf预览跟图片预览不同,pdf可能会有多张,而图片只有 ...

  5. vue调用手机浏览器打开pdf_vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法...

    目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框.网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受 ...

  6. vue 在线预览PDF

    一.如果是本地文件,则直接运行下面的代码就可以了 window.open(url,"_blank") 二.使用vue-pdf vue 使用 vue-pdf 实现pdf在线预览 报错 ...

  7. vue 使用 vue-pdf 实现pdf在线预览

    vue 使用 vue-pdf 实现pdf在线预览 1.安装 npm install --save vue-pdf 2.引用 import pdf from 'vue-pdf' export defau ...

  8. 前端【vue】实现文档在线预览功能,在线预览pdf、word、xls、ppt等office文件

    前端江太公 前端实现文档在线预览功能 最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本.带参数文本.html文本.json文本.公 ...

  9. 前端vue利用flexpaper实现在线预览

    前端vue利用flexpaper实现在线预览 下载flexpaper 只需要用到js文件和FlexPaperViewer.swf: flexpaper_flash_debug.js flexpaper ...

  10. uni-app移动端-H5-微信小程序在线预览pdf,图片,视频

    封装了一个插件,可直接导入hbuilderx查看使用: 插件地址:uni-app移动端-H5-微信小程序在线预览pdf,图片,视频 <template><view class=&qu ...

最新文章

  1. anaconda3配置环境变量_Python:Anaconda安装及LabelMe配置(1)
  2. Happy birthday! Hubble
  3. Java 程序员排行前 10 的错误,你有没有中?
  4. 以下哪个不是python中的关键字-以下不是python中的关键字
  5. 使用DX 一些知识点整理(随时添加)
  6. tkinter 笔记: radiobutton 选择按钮(莫烦python笔记)
  7. 如何消除网站安全的七大风险
  8. 目标又多又密?多轮迭代的方式进行密集目标检测
  9. 程序员如何面对 HR 面试的 40 个问题
  10. Linux 下搭建jsp服务器(配置jsp开发环境)
  11. linux手动安装unzip_centos7离线安装unzip和zip
  12. Java 字符串格式化 String.format()
  13. bzoj 3173: [Tjoi2013]最长上升子序列(离线二分+树状数组)
  14. is和==,encode和decode
  15. 为什么世界是由数学构成的
  16. linux里面ping地址停不下来解决方法
  17. Subpalindromes
  18. DOTA双功能螯合剂127985-74-4,p-SCN-Bn-DOTA,实验室科研试剂
  19. 【黑马程序员】《Java基础入门》——02 面向对象
  20. mac 提示文件已损坏 解决办法

热门文章

  1. word双栏排版,最后一页由于分节符造成最后一页是空白页,删除分节符双栏就变成了单栏
  2. 程序员行业,前端,测试,后端哪个未来工资高,或者发展前景好?
  3. BugKu CTF(杂项篇MISC)—赛博朋克
  4. C#二维码的生成及打印
  5. [从头学数学] 第124节 不等式与不等式组
  6. 最新SourceInsight 4.0.124下载及安装教程
  7. 计算机毕业设计Java贵州农产品交易系统(源码+系统+mysql数据库+Lw文档)
  8. 美国互联网大厂“扎堆”Web3
  9. Android BUG定位
  10. 博客网站之WordPress急速搭建