diff --git a/package.json b/package.json index 07dad3f5..98e49d2e 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "jsbarcode": "^3.11.5", "jsencrypt": "3.2.1", "jsmind": "^0.4.11", + "jspdf": "^2.5.1", "lodash": "^4.17.21", "luckyexcel": "^1.0.1", "marked": "^4.3.0", diff --git a/public/index.html b/public/index.html index 88505bfb..389d916d 100644 --- a/public/index.html +++ b/public/index.html @@ -209,4 +209,5 @@ + diff --git a/src/components/PdfViewer/viewer.vue b/src/components/PdfViewer/viewer.vue index 11f6b7b5..e107875c 100644 --- a/src/components/PdfViewer/viewer.vue +++ b/src/components/PdfViewer/viewer.vue @@ -14,64 +14,57 @@
- @@ -288,6 +485,13 @@ export default { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23fff' /%3E%3Crect x='50%' width='1' height='100%' fill='rgb(203 213 225)' /%3E%3Crect y='50%' width='100%' height='1' fill='rgb(203 213 225)' /%3E%3C/svg%3E%0A"); } +.showA4 { + position: absolute; + left: 100%; + width: 1920px; + overflow: visible; +} + .pdf-viewer { position: relative; width: 100%; diff --git a/src/utils/TanexPrinterSdk.js b/src/utils/TanexPrinterSdk.js index 036955fd..380a0763 100644 --- a/src/utils/TanexPrinterSdk.js +++ b/src/utils/TanexPrinterSdk.js @@ -490,6 +490,10 @@ class TanexPrinterSdk { // if (console && // console.log) { // // console.log(ex); // } + setTimeout(() => { + this.connect() + }, 1000 ) + } } diff --git a/src/utils/pdfUtils.js b/src/utils/pdfUtils.js index 61291c6f..3b468699 100644 --- a/src/utils/pdfUtils.js +++ b/src/utils/pdfUtils.js @@ -1,6 +1,8 @@ import { degrees, PDFDocument, rgb, StandardFonts } from 'pdf-lib'; import axios from "axios"; import Buffer from 'vue-buffer' +import * as pdfjs from 'pdfjs-dist'; +import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'; /** * 浏览器打开新页签预览pdf @@ -215,6 +217,117 @@ export default class PdfUtils { // console.log(+new Date() - startTime) } + getPdfnum(url) { + return new Promise((resolve, reject) => { + const imgFiles = []; + //文件读取成功完成时触发 + const loadingTask = pdfjs.getDocument(url); + loadingTask.promise.then(async (pdf) => { + const pageNum = pdf.numPages; + if (pageNum > 10) { + reject('此pdf页数过多,请线下合并'); + } + //准备图片 + for (let i = 1; i <= pageNum; i++) { + imgFiles.push(i); + } + resolve(imgFiles); + }); + }); + } + + /** + * pdf保存图片 + * @param {Array} newimgList - canvas列表 + * @param {Number} x - 页面展示宽 + * @param {Number} y - 页面展示高 + * @param {String}fileName - 文件名称 + */ + savePdfImage(newimgList, x, y, fileName) { + return new Promise((resolve, reject) => { + + // 创建canvas + var canvas = document.createElement("canvas"); + canvas.width = 100; + canvas.height = 100; + canvas.id='d_canvas0'; + document.body.appendChild(canvas) + + let allcanvas = document.getElementById('d_canvas0'); + let allctx = allcanvas.getContext('2d'); + allcanvas.style.width = x; + allcanvas.style.height = y * newimgList.length; + const subCanvasWidth = newimgList[0].width; + const subCanvasHeight = newimgList[0].height; + allcanvas.width = subCanvasWidth; + allcanvas.height = subCanvasHeight * newimgList.length; + newimgList.forEach((subCanvas, index) => { + // 计算当前图片在Canvas中的垂直位置 + const yPosition = index * subCanvasHeight; + // 绘制图片 + // 使用drawImage的四个参数版本来指定绘制的源图像区域和目标区域 + allctx.drawImage(subCanvas, 0, yPosition, subCanvasWidth, subCanvasHeight); + if (index === newimgList.length - 1) { + let pngData = allcanvas.toDataURL('image/png'); + let obj = { + url: pngData, + name: fileName, + imgWidth:subCanvasWidth, + imgHeight:subCanvasHeight + }; + document.body.removeChild(canvas) + resolve(obj); + } + }); + }); + } + + pdfToImg(pdfUrl) { + return new Promise((resolve, reject) => { + const newimgList = []; + const fileName = new Date().getTime()+""; + const loadingTask = pdfjs.getDocument(pdfUrl); + loadingTask.promise.then(async (pdf) => { + let pageNum = pdf.numPages; + console.log(pageNum); + // 处理 + for (let i = 1; i <= pageNum; i++) { + + // 创建canvas + var canvas = document.createElement("canvas"); + canvas.width = 100; + canvas.height = 100; + canvas.id='vmpdf_canvas_' + i; + document.body.appendChild(canvas) + + let canvasItem = ''; + pdf.getPage(i).then(async (page) => { + const canvas = document.getElementById('vmpdf_canvas_' + i); + const ctx = canvas.getContext('2d'); + const viewport = page.getViewport({ scale: 4 }); + canvas.height = viewport.height; + canvas.width = viewport.width; + const destWidth = 298; + const destheight = destWidth * (viewport.height / viewport.width); + canvas.style.width = destWidth + 'px'; + canvas.style.height = destWidth * (viewport.height / viewport.width) + 'px'; + newimgList.push(canvas); + await page.render({ canvasContext: ctx, viewport }); + + // 使用file对象进行后续操作 + if (i === pageNum) { + document.body.removeChild(canvas) + setTimeout(async () => { + const res = await this.savePdfImage(newimgList, destWidth, destheight, fileName); + resolve(res); + }, 500); + } + }); + } + }); + + }); + } getBlobUrl(base64Str, fileName,isNeedDown=false) { let blob = this.base64ToBlobNoHeader(base64Str); diff --git a/src/views/emis/EmisBaseTools/TanexPrinterPanel.vue b/src/views/emis/EmisBaseTools/TanexPrinterPanel.vue index 7d87d4bd..b0215d87 100644 --- a/src/views/emis/EmisBaseTools/TanexPrinterPanel.vue +++ b/src/views/emis/EmisBaseTools/TanexPrinterPanel.vue @@ -18,7 +18,7 @@
- +
@@ -102,7 +102,12 @@ type: [Boolean], required: false, default: false - } + }, + isInitA4:{ + type: [Boolean], + required: false, + default: false + }, }, data() { return { diff --git a/src/views/emis/emisWaybill/A4WaybillIPrinted.vue b/src/views/emis/emisWaybill/A4WaybillIPrinted.vue index 8cd82af6..37458361 100644 --- a/src/views/emis/emisWaybill/A4WaybillIPrinted.vue +++ b/src/views/emis/emisWaybill/A4WaybillIPrinted.vue @@ -138,7 +138,7 @@ - +