diff --git a/package.json b/package.json index 5a8ad0cc0f2783b74637f3e46e0398bcbcf80fd3..4454aae76c57ff749e312c92f1905aac570d80f4 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "vue": "^2.6.11", "vue-count-to": "^1.0.13", "vue-pdf": "^4.3.0", + "vue-pdf-signature": "^4.2.7", "vue-router": "^3.3.4", "vue-virtual-scroller": "^1.0.10", "vuedraggable": "^2.24.3", diff --git a/src/views/Home/PdfView/index.vue b/src/views/Home/PdfView/index.vue index 6c286b2b44d453a12c6d52c2aa7d64392ee8888f..00586f968fbc9b5b0bed5688a2ff506980bc7aff 100644 --- a/src/views/Home/PdfView/index.vue +++ b/src/views/Home/PdfView/index.vue @@ -1,9 +1,12 @@ <template> <div class="pdf"> - <div v-loading="!loadedRatio" class="show"> + <div + v-loading="!loadedRatio" + class="show" + > <pdf ref="pdf" - :src="pdfUrl" + :src="pdfSrc" :page="pageNum" :rotate="pageRotate" @password="password" @@ -18,17 +21,29 @@ <div class="pdf_footer"> <div class="info"> - <div>当å‰é¡µæ•°/总页数:{{ pageNum }}/{{ pageTotalNum }}</div> - <div>进度:{{ loadedRatio }}</div> - <div>页é¢åŠ è½½æˆåŠŸ: {{ curPageNum }}</div> + <div style="margin:0 auto;">当å‰é¡µæ•°/总页数:{{ 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.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> --> @@ -40,7 +55,9 @@ <script> /* eslint-disable */ -import pdf from "vue-pdf" +import pdf from "vue-pdf-signature" +import CMapReaderFactory from "vue-pdf-signature/src/CMapReaderFactory.js"; + export default { name: "vue_pdf_preview", props: { @@ -53,8 +70,10 @@ export default { components: { pdf, }, - data() { + data () { return { + // pdfSrcs: "/早期胃癌.pdf", + pdfSrc: "", // 总页数 pageTotalNum: 1, // 当å‰é¡µæ•° @@ -73,11 +92,19 @@ export default { }, watch: {}, computed: {}, - created() {}, - mounted() {}, + created () { + }, + mounted () { + }, methods: { + loadPDF () { + this.pdfSrc = pdf.createLoadingTask({ + url: this.pdfUrl, + CMapReaderFactory + }); + }, //下载PDF - fileDownload(data, fileName) { + fileDownload (data, fileName) { let blob = new Blob([data], { //type类型åŽç«¯è¿”回æ¥çš„æ•°æ®ä¸ä¼šæœ‰ï¼Œæ ¹æ®è‡ªå·±å®žé™…进行修改 type: "application/pdf;charset-UTF-8", @@ -103,7 +130,7 @@ export default { }, //放大 - scaleD() { + scaleD () { if (this.scale == 120) { return } @@ -113,7 +140,7 @@ export default { }, //ç¼©å° - scaleX() { + scaleX () { // scale 是百分百展示 ä¸å»ºè®®ç¼©æ”¾ if (this.scale == 85) { return @@ -124,55 +151,56 @@ export default { this.$emit("scale", this.scale) }, // 切æ¢ä¸Šä¸€é¡µ - prePage() { + prePage () { var p = this.pageNum p = p > 1 ? p - 1 : this.pageTotalNum this.pageNum = p document.querySelector(".pdf .show").scrollTop = 0 }, // 切æ¢ä¸‹ä¸€é¡µ - nextPage() { + nextPage () { var p = this.pageNum p = p < this.pageTotalNum ? p + 1 : 1 this.pageNum = p document.querySelector(".pdf .show").scrollTop = 0 }, // 顺时针选ä¸è§’度 - clock() { + clock () { this.pageRotate += 90 }, // 逆时针旋转角度 - counterClock() { + counterClock () { this.pageRotate -= 90 }, // pdf 有密ç 则需è¦è¾“入秘密 - password(updatePassword, reason) { + password (updatePassword, reason) { updatePassword(prompt('password is "test"')) console.log("...reason...") console.log(reason) console.log("...reason...") }, // 页é¢åŠ è½½æˆåŠŸ 当å‰é¡µæ•° - pageLoaded(e) { + pageLoaded (e) { this.$emit("current", e) this.curPageNum = e + this.loadedRatio = 1 }, // å¼‚å¸¸ç›‘å¬ - pdfError(error) { + pdfError (error) { console.error(error) }, // æ‰“å°æ‰€æœ‰ - pdfPrintAll() { + pdfPrintAll () { this.$refs.pdf.print() }, // æ‰“å° ç¬¬ä¸€é¡µå’Œç¬¬äºŒé¡µ - pdfPrint() { + pdfPrint () { // ç¬¬ä¸€ä¸ªå‚æ•° 文档打å°çš„分辨率 // ç¬¬äºŒä¸ªå‚æ•° 文档打å°çš„页数 this.$refs.pdf.print(100, [1, 2]) }, // 获å–当å‰é¡µé¢pdf的文å—ä¿¡æ¯å†…容 - logContent() { + logContent () { this.$refs.pdf.pdf.forEachPage(function (page) { return page.getTextContent().then(function (content) { let text = content.items.map((item) => item.str) @@ -186,6 +214,9 @@ export default { }) }, }, + beforeDestroy () { + this.pdfSrc = null + } } </script> diff --git a/yarn.lock b/yarn.lock index 5bfd0c81c30336fc9955697651eac009b3d87c94..dbebca1bc63130ef613de63a510997464e924e58 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7996,6 +7996,11 @@ pbkdf2@^3.0.3: safe-buffer "^5.0.1" sha.js "^2.4.8" +pdfjs-dist-sign@^2.5.208: + version "2.5.208" + resolved "https://registry.npmmirror.com/pdfjs-dist-sign/-/pdfjs-dist-sign-2.5.208.tgz#34c840d01a7d3fa992bcf06709461311083c9cb5" + integrity sha512-/bOZqdVkq1vQzCJY0qH/d6vO739VJ6X9mF7UWEWJ2WoZJij1+NOl+qTQxNgpXACp07/fhxC3GE/1+IgeDq40kQ== + pdfjs-dist@2.6.347: version "2.6.347" resolved "https://registry.npmmirror.com/pdfjs-dist/-/pdfjs-dist-2.6.347.tgz#f257ed66e83be900cd0fd28524a2187fb9e25cd5" @@ -8804,7 +8809,7 @@ raw-body@2.4.0: iconv-lite "0.4.24" unpipe "1.0.0" -raw-loader@^4.0.2: +raw-loader@^4.0.1, raw-loader@^4.0.2: version "4.0.2" resolved "https://registry.npmmirror.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6" integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA== @@ -10884,6 +10889,18 @@ vue-observe-visibility@^0.4.4: resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz#878cb8ebcf3078e40807af29774e97105ebd519e" integrity sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q== +vue-pdf-signature@^4.2.7: + version "4.2.7" + resolved "https://registry.npmmirror.com/vue-pdf-signature/-/vue-pdf-signature-4.2.7.tgz#44851a425dc89d93fb02574d3f79bccac69a3fb2" + integrity sha512-JPyd46wkY3E8OQZ0VklIco4J2Zo2YsEUz1bfyheDtLd9NaJS0+YYRrfxCotQMLvR1QHNJZmcOsPBZ+5mosHiqQ== + dependencies: + babel-plugin-syntax-dynamic-import "^6.18.0" + loader-utils "^1.4.0" + pdfjs-dist-sign "^2.5.208" + raw-loader "^4.0.1" + vue-resize-sensor "^2.0.0" + worker-loader "^2.0.0" + vue-pdf@^4.3.0: version "4.3.0" resolved "https://registry.npmmirror.com/vue-pdf/-/vue-pdf-4.3.0.tgz#d5f790ee7967e7b7aa9089b97b11ab168e19dbd0"