vue-pdf 的使用示例 官方入口>>> github地址
vue版本:"vue": "^2.6.14"
vue-pdf版本:"vue-pdf": "^4.2.0"、"vue-pdf": "^4.3.0"
安装指令:npm install --save vue-pdf
1、分页显示：
效果图：
组件模板:
<template><div class="pdf"><div class="show"><pdfref="pdf":src="pdfUrl":page="pageNum":rotate="pageRotate"@password="password"@progress="loadedRatio = $event"@page-loaded="pageLoaded($event)"@num-pages="pageTotalNum = $event"@error="pdfError($event)"@link-clicked="page = $event"></pdf></div><div class="pdf_footer"><div class="info"><div>当前页数/总页数：{{pageNum }}/{{pageTotalNum }}</div><div>进度：{{loadedRatio }}</div><div>页面加载成功: {{curPageNum }}</div></div><div class="operate"><div class="btn" @click.stop="clock">顺时针</div><div class="btn" @click.stop="counterClock">逆时针</div><div class="btn" @click.stop="prePage">上一页</div><div class="btn" @click.stop="nextPage">下一页</div><div class="btn" @click="scaleD">放大</div><div class="btn" @click="scaleX">缩小</div><div class="btn" @click="pdfPrint()">打印所有指定页</div><div class="btn" @click="pdfPrintAll()">打印所有</div><div class="btn" @click="logContent()">获取页面信息</div><div class="btn" @click="fileDownload(pdfUrl, 'pdf文件')">下载</div></div></div></div></template><script>/* eslint-disable */import pdf from "vue-pdf";export default {name: "vue_pdf_preview",props: {// 当前pdf路径pdfUrl: {type: String,default:"/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",},},components: {pdf,},data() {return {// 总页数pageTotalNum: 1,// 当前页数pageNum: 1,// 加载进度loadedRatio: 0,// 页面加载完成curPageNum: 0,// 放大系数 默认百分百scale: 100,// 旋转角度 ‘90’的倍数才有效pageRotate: 0,// 单击内部链接时触发 (目前我没有遇到使用场景)page: 0,};},watch: {},computed: {},created() {},mounted() {},methods: {//下载PDFfileDownload(data, fileName) {let blob = new Blob([data], {//type类型后端返回来的数据中会有，根据自己实际进行修改type: "application/pdf;charset-UTF-8",});let filename = fileName || "pdf.pdf";if (typeof window.navigator.msSaveBlob !== "undefined") {window.navigator.msSaveBlob(blob, filename);} else {var blobURL = window.URL.createObjectURL(blob);// 创建隐藏<a>标签进行下载var tempLink = document.createElement("a");tempLink.style.display = "none";tempLink.href = blobURL;tempLink.setAttribute("download", filename);if (typeof tempLink.download === "undefined") {tempLink.setAttribute("target", "_blank");}document.body.appendChild(tempLink);tempLink.click();document.body.removeChild(tempLink);window.URL.revokeObjectURL(blobURL);}},//放大scaleD() {this.scale += 5;this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";},//缩小scaleX() {// scale 是百分百展示 不建议缩放if (this.scale == 100) {return;}this.scale += -5;console.log(parseInt(this.scale) + "%");this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";},// 切换上一页prePage() {var p = this.pageNum;p = p > 1 ? p - 1 : this.pageTotalNum;this.pageNum = p;},// 切换下一页nextPage() {var p = this.pageNum;p = p < this.pageTotalNum ? p + 1 : 1;this.pageNum = p;},// 顺时针选中角度clock() {this.pageRotate += 90;},// 逆时针旋转角度counterClock() {this.pageRotate -= 90;},// pdf 有密码 则需要输入秘密password(updatePassword, reason) {updatePassword(prompt('password is "test"'));console.log("...reason...");console.log(reason);console.log("...reason...");},// 页面加载成功 当前页数pageLoaded(e) {this.$emit("current", e);this.curPageNum = e;},// 异常监听pdfError(error) {console.error(error);},// 打印所有pdfPrintAll() {this.$refs.pdf.print();},// 打印 第一页和第二页pdfPrint() {// 第一个参数 文档打印的分辨率// 第二个参数 文档打印的页数this.$refs.pdf.print(100, [1, 2]);},// 获取当前页面pdf的文字信息内容logContent() {this.$refs.pdf.pdf.forEachPage(function (page) {return page.getTextContent().then(function (content) {let text = content.items.map((item) => item.str);let allStr = content.items.reduce((initVal, item) => (initVal += item.str),"");console.log(allStr); // 内容字符串console.log(text); // 内容数组});});},},};</script><style lang="scss" scoped>.pdf {padding: 20px;.show {overflow: auto;margin: auto;max-width: 75%;height: 80vh;// max-height: 530px;}.pdf_footer {position: sticky;bottom: 0;left: 0;right: 0;padding: 10px 0;background-color: rgba(255, 255, 255, 0.5);.info {display: flex;flex-wrap: wrap;div {width: 30%;}}.operate {margin: 10px 0 0;display: flex;flex-wrap: wrap;div {// width: 80px;text-align: center;font-size: 15px;}.btn {cursor: pointer;margin: 5px 10px;width: 120px;border-radius: 10px;padding: 5px;color: #fff;background-color: #3dcbbc;}}}}</style>
2、整页显示：
效果图：
组件模板：
<template><div class="pdf"><pdf v-for="i in numPages" :key="i" :src="laoclUrl" :page="i"></pdf> </div></template><script>/* eslint-disable */import pdf from 'vue-pdf'export default {name: "index",props: {// 当前pdf的路径pdfUrl: {type: String,default: '/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'}},components: {pdf },data () {return {// 当前页数numPages: 1,// 预览路径laoclUrl: '',};},watch: {},computed: {},created () {this.laoclUrl = this.pdfUrl;},mounted () {this.getNumPages()},methods: {getNumPages() {let loadingTask = pdf.createLoadingTask(this.laoclUrl)// 网上查询 都没有加promise执行的整页渲染 emmmm... 不知道他们怎么运行的loadingTask.promise.then(pdf => {// this.laoclUrl = loadingTaskthis.numPages = pdf.numPages}).catch((err) => {console.error('pdf加载失败')})},}}</script><style lang="scss" scoped></style>
关于旋转时err：Cannot read properties of undefined (reading ‘catch’)，网上查询都是修改node_modules源码，不建议这样操作。
目前没有什么解决方法，且报错不影响正常功能操作，有强迫症患者可以去修改源码中的pdfjsWrapper.js文件
this.renderPage = function(rotate) {if ( pdfRender !== null ) {if ( canceling )return;canceling = true;//pdfRender.cancel().catch(function(err) {//emitEvent('error', err);//});// 修改这里pdfRender.cancel()；return;}//....}
