1.安装引入
npm i vue-pdf-signature
javascript
import Pdf from 'vue-pdf-signature';
// 引入CMapReaderFactory库 解决动态文字丢失问题
import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory.js';
2.使用方式
javascript
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里渲染
javascript
<div v-for="i in pageCount" :key="i" style="outline: 1px solid #ccc;margin: 15px auto;">
<!-- pdf预览 -->
<pdf ref="pdfRef" :src="pdfSrc" :page="i" />
</div>