vue pdf文件预览

**

一、pdf.js

**
1.首先导入pdf.js插件 官网链接

2.存放在项目中
将下载下来的文件 存在在public/pdf文件夹中

3.代码中使用pdf.js预览文件
window.open(’/pdf/web/viewer.html?file=’ + 文件url)
二、Vue-pdf
1.引入依赖

npm install --save vue-pdf

2.基本使用

<div v-if="isPdf">
            <Pdf 
            :src="pdfUrl"  // 文件路径
            :page="currentPage" //  当前页数
            @num-pages="totalCount=$event"  // 监听pdf加载，获取pdf的页数
            @page-loaded="currentPage=$event"  // pdf某个页面加载成功回调
            @loaded="loadPdfHandler" // 初始化加载方法
            ref="pdf" 
            class="pdf" />
        </div>

// 这个方法创建一个当前pdf的加载任务，可以作为:src使用或者公开的获取当前pdf的页面总数；
init() {
	this.pdfUrl = Pdf.createLoadingTask({
	    url: this.pdfSrc,
	    cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/cmaps/', // 
	    cMapPacked: true,
	})
	this.currentPage = 1 // 默认pdf当前页
	this.totalCount = Pdf.numPages
	this.isPdf = true
}

3.效果

遇到的问题：

第一条 不显示签名问题
第二条 无法显示中文
解决无法显示中文
一般票据、合同之类的pdf会出现中午不显示的情况

import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js';

this.pdfUrl = pdf.createLoadingTask({ url: data.url, CMapReaderFactory })

这个方式首次加载没问题 再次加载还是无法显示中文
还有的是去找到字体集文件引入

	node_modules\vue-pdf\node_modules\pdfjs-dist\cmaps // 路径

this.url= pdf.createLoadingTask({ 
     url: 'http://localhost/11.pdf',
     cMapUrl: '../../../../static/cmaps/', 
     cMapPacked: true
  })

我试过都是首次加载没问题 再次加载就无法显示了

我这里的处理方法是

	 cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/cmaps/', //

暂时使用这个方法 如果有大佬有更好的方法麻烦留言教一下

不显示签名问题 ()

	 修改代码：

pdf.worker.js 找到

// if (data.fieldType === 'Sig') {undefined

//   _this2.setFlags(_util.AnnotationFlag.HIDDEN);

 // }