vue-pdf的使用及注意事项

m0_64096502

已于 2022-12-30 11:33:44 修改

阅读量4.7k

点赞数 4

分类专栏： vue能使用的插件文章标签： javascript vue.js

于 2022-12-30 10:01:25 首次发布

本文链接：https://blog.csdn.net/m0_64096502/article/details/128490569

版权

vue能使用的插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用

1.npm install vue-pdf

2.在页面使用vue-pdf

<template>
    <div>
        <pdf v-for="i in numPages" :key="i" :page="i" :src="src"></pdf>
    </div>
</template>
<script>
    import pdf from 'vue-pdf'
    export default {
		components:{
			pdf
		},
		props:{
            pdfSrc: String
        },
		data(){
			return {
				numPages: null,
                pdfSrc:'',//base64pdf或地址，如果是base64pdf 建议新建一个js文件单独写，因为字符串很长，很容易导致文件过大，字符串也编译不过来，可能本地运行还运行不起来
				src: "",//调完方法返回显示的PDF
			}
		},
		mounted() {
            this.getBase64Pdf() // base64pdf 文件的预览
            this.getUrlPdf() // pdf 文件地址的预览
        },
        methods:{
            // #计算pdf页码总数
            getBase64Pdf() {
                // 引入pdf.js的字体
            	let CMAP_URL = 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/'
                // let CMAP_URL = `${window.location.origin}/cmaps/`;  可以使用本地的字体
                // base64pdf拼接
                let perfix64 = 'data:application/pdf;base64,' + this.pdfSrc 
                this.src = pdf.createLoadingTask({
                    url: perfix64,
                    withCredentials: false,
                    cMapUrl: CMAP_URL,
                    cMapPacked: true
                    });
                this.src.promise.then(pdf => {
                    this.numPages = pdf.numPages
                    console.log(this.numPages)
                }).catch(err => {
                    console.error('pdf 加载失败', err);
                })
            },
            
            getUrlPdf(){
                this.src = pdf.createLoadingTask({
                    url: this.pdfSrc, //pdf地址
                    withCredentials: false
                    });
                this.src.promise.then(pdf => {
                    this.numPages = pdf.numPages
                    console.log(this.numPages)
                }).catch(err => {
                    console.error('pdf 加载失败', err);
                })
            }
        }
	}
</script>

注意事项

1、如果是base64pdf 建议新建一个js文件单独写，因为字符串很长，很容易导致文件过大，字符串也编译不过来，可能本地运行还运行不起来

2、PDF文件有电子签章但现实不出来的正确解决方法如下

步骤一找到 vue-pdf 文件夹。首先我们要找到 vue-pdf 源代码的文件夹，找到关于 pdfjs-list 的引用文件地址。
步骤二 pdfjs-list 源码修改。这里网上很多解决方法都很坑，只是说 node_modules\pdfjs-dist\build\pdf.worker.js，但是 vue-pdf 使用的是它 es5 这个文件夹下的文件！！！！我没注意一直修改无效！！！！！这就需要我们按照上面的路径去查看源代码引用的具体路径，版本不一样可能都不同，所有还是的得自己去找啊！（
下面就是找到下面的代码注释掉就行，完美解决！
```
  if (data.fieldType === "Sig") {
      // data.fieldValue = null;
      // this.setFlags(_util.AnnotationFlag.HIDDEN);
  }
```

3、在控制台会出现如下警告⚠️（产生主要原因：是有pdf不支持的字体格式，可以通过引入pdf.js的字体来解决该问题）：

Warning: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.

当PDF文件中有中文的情况下，在引用pdfjs过程中可能会出现中文不显示问题，在console中会提示如上错误。解决方案就是引入字体UNPKG - pdfjs-dist

4、如果将pdfjs-dist字体包引入静态文件了，cMapUrl：‘../../xxxx/pdfjs-dist/cmaps/’,这个时候还是会报错，其实还是不能解析中文；这个时候引入CMapReaderFactory

// 中文PDF加载空白引入依赖
import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";
@Override
    // 这里是重点，然后将流数据转换为url，CMapReaderFactory方法在进行处理
	src = pdf.createLoadingTask({
        url: src,
        // cMapUrl: 'https://unpkg.com/browse/pdfjs-dist@2.2.228/cmaps/',
        cMapUrl: '../../assets/pdfjs-dist/cmaps/',
        cMapPacked: true,
        CMapReaderFactory
    })