vue-pdf

一些后台管理系统通常会出现预览文件的操作，我的项目中就是用了预览pdf 的操作，经过一番寻找，最后确定使用 pdfjs 作为实现方法。

vue 项目中的安装方法

npm install vue-pdf --save

vue文件

html 结构

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

js 引用

import pdf from 'vue-pdf'

data 中的定义

numPages: 0,    // PDF 文件的总页码
src:'',         // PDF 的网络地址

methods 方法调用

goLookPdf(pdfFileLink){
    let _this = this                                    // 修改 this 指向
    _this.pdfLoadingLoading = true                      // 等待 PDF 加载时候的加载动画
    let loadingTask = pdf.createLoadingTask(pdfFileLink)// 调用 PDF 插件中的方法
    loadingTask.promise.then(loadedPdf => {             // promise 方法 执行
        _this.src = loadingTask                         // 获取 src 并赋值
        _this.numPages = loadedPdf.numPages             // 获取整个 PDF 总页码
    }).catch((err) => {                                
        console.error(`加载失败`)                        
    }).finally(() => {                                  // setTimeout 的使用为了 PDF 在页面加载过程中出现卡顿不顺畅，所以稍微延时一点点
        setTimeout(() => {                            
            _this.pdfLoadingLoading = false  
        }, 500)})
}

注意点 

我在项目中因为需要多次重复预览，结果就出现了第一遍预览时候全部加载正确且完成，当耳边开始的时候 有个别文件出现 空白页面的情况。当开始以为是代码出现了问题，但是当我尝试各种加载切换的时候，问题情况并没有达到解决，于是尝试在看源码，但是最终没有找到根源，PDF 一旦渲染出错，将影响大后续所有的PDF渲染操作，也就是说只要有一次的错误的渲染情况出现，那么后续页面的就会出现空白。

于是我重新将流程走了一遍，并且拉上后端同事一起，当有题的pdf 展示时候，后端同事说了 问题PDF 文件和其他文件不同，因为问题pdf 是可以编辑的，也就是文件上有表单信息，而其他文件是图片信息，瞬间就像找到救星一样，于是后端同事将表单文件转为图片文件存入PDF，此时无论怎样切换，PDF 渲染成功。