PDF.js-预览pdf文件

1.安装引入

npm i vue-pdf-signature


import Pdf from 'vue-pdf-signature';
// 引入CMapReaderFactory库 解决动态文字丢失问题
import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory.js';

2.使用方式 

data() {
    return {
      pageCount: 0,
    }
}

// 方法里调用  通过文件路径
const loadingTask = window.location.origin + file[0].filePath;
this.pdfSrc = Pdf.createLoadingTask({
     url: loadingTask,
     CMapReaderFactory,
});
this.pdfSrc.promise.then(pdf => {
this.pageCount = pdf.numPages;
    this.loading = false;
}).catch(err => {
   this.$message.warning('预览失败,请重试');
   console.log(err);
});

 3.template里渲染

          

PDF.js-预览pdf文件_第1张图片 

你可能感兴趣的:(随笔,Vue,pdf,javascript,开发语言)