diff --git a/src/components/PdfViewer/viewer.vue b/src/components/PdfViewer/viewer.vue index e107875c..1fb99783 100644 --- a/src/components/PdfViewer/viewer.vue +++ b/src/components/PdfViewer/viewer.vue @@ -31,8 +31,8 @@
- 切换单页 - 切换A4 + 切换单页 + 切换A4 下载 打印
@@ -63,7 +63,6 @@ * 一定要使用4.2的话就手动装一下pdfjs-dist的2.5.207 ==> npm i pdfjs-dist@2.5.207 */ import pdf from 'vue-pdf' -import { jsPDF } from "jspdf"; import PdfUtils from '@/utils/pdfUtils.js'; export default { components: { pdf }, @@ -78,6 +77,10 @@ export default { isInitA4:{ type: Boolean, default: false + }, + isLoadComplete:{ + type: Boolean, + default: false } }, data() { @@ -101,14 +104,8 @@ export default { scale: 20, preScale: 20, - // // A4 - // newPrototype: [], - // newPrototypeValue: [], - // imgFiles: [], //pdf页数列表 - // filelist: [], //列表 - // //img - // realWidth: 720, - // dpr: '', + pdfUtils:new PdfUtils(), + loading: false, } @@ -130,43 +127,91 @@ export default { watch: { pdfList(){ this.cacheFileList=this.pdfList; - this.pageCount=this.cacheFileList.length; - if(this.isA4){ - setTimeout( this.showA4Page(),2000); - } + this.initA4List(); + + this.showFirstFile(); + + // if(this.isA4){ + // this.pageCount=this.cacheA4FileList.length; + // setTimeout( this.showA4Page(this.cacheA4FileList.length),2000); + // }else{ + // this.pageCount=this.cacheFileList.length; + // setTimeout( this.showSinglePage(1),2000); + // } // console.log(this.loadPdfUrl); // this.showFirstFile(); }, thisPageCount(value) { - // console.log("============11111====================") - // console.log(this.isA4) - if(this.isA4){ - // if (value) this.page = 1 this.doScale(75); }else{ this.doScale(20); } + }, + isLoadComplete(newVal,oldVal){ + console.log("isLoadComplete==>"+this.isLoadComplete); + this.showA4Page(1); } }, mounted() { + this.initA4List(); this.showFirstFile(); window.addEventListener('mousewheel', this.handleScroll, { passive: false }) }, methods: { - showFirstFile(){ - if(this.isA4){ - // this.isA4=false; - setTimeout( this.showA4Page(),2000); - - }else{ - if(this.cacheFileList&& this.cacheFileList.length>0){ - this.loadPdfUrl =this.pdfList[0].pdfUrl; - this.resetCountKey++; + initA4List(){ + this.cacheA4FileList=[]; + const newList = Object.assign([], this.pdfList); + if(newList&&newList.length>4){ + let spliteArr = (array = [], subGroupLength = 0) => { + let index = 0; + const newArray = []; + while (index < array.length) { + newArray.push(array.slice(index, index += subGroupLength)); + } + return newArray; } + + const subPdfList=spliteArr(newList, 4); + for (let i=0; i < subPdfList.length;i++){ + let fileItem={ + "billCode":"page-"+(i+1), + "pdfUrl":null, + "childreen":subPdfList[i] + } + this.cacheA4FileList.push(fileItem); + } + }else{ + let fileItem={ + "billCode":"page-"+1, + "pdfUrl":null, + "childreen":newList + } + this.cacheA4FileList.push(fileItem); } + console.log(this.cacheA4FileList) + }, + showFirstFile(){ + // if(this.isA4){ + // setTimeout( this.showA4Page(this.cacheA4FileList.length),2000); + // }else{ + // if(this.cacheFileList&& this.cacheFileList.length>0){ + // setTimeout( this.showSinglePage(this.cacheFileList.length),2000); + // this.resetCountKey++; + // } + // } + + if(this.isA4){ + this.pageCount=this.cacheA4FileList.length; + setTimeout( this.showA4Page(this.cacheA4FileList.length),2000); + }else{ + this.pageCount=this.cacheFileList.length; + setTimeout( this.showSinglePage(1),2000); + } + + this.resetCountKey++; }, addPdfUrl(billCode,pdfUrl){ let item={ @@ -240,13 +285,13 @@ export default { let fileNo = this.currentPage - 1 if (fileNo < 1) return this.currentPage = fileNo - this.loadPdfUrl =this.cacheFileList[this.currentPage-1].pdfUrl; + this.showSinglePage(this.currentPage) } else{ let fileNo = this.currentPage - 1 if (fileNo < 1) return this.currentPage = fileNo - this.loadPdfUrl =this.cacheA4FileList[this.currentPage-1].pdfUrl; + this.showA4Page(this.currentPage) } }, nextPage() { @@ -255,13 +300,13 @@ export default { let fileNo = this.currentPage + 1 if (fileNo > this.pageCount) return this.currentPage = fileNo - this.loadPdfUrl =this.cacheFileList[this.currentPage-1].pdfUrl; + this.showSinglePage(this.currentPage) } else{ let fileNo = this.currentPage + 1 if (fileNo > this.pageCount) return this.currentPage = fileNo - this.loadPdfUrl =this.cacheA4FileList[this.currentPage-1].pdfUrl; + this.showA4Page(this.currentPage) } }, // 下载 @@ -269,13 +314,27 @@ export default { // 下载所有预览的PDF文件 if(this.isA4){ if(this.cacheA4FileList&&this.cacheA4FileList.length>0){ - this.cacheA4FileList.forEach(item=>{ + this.cacheA4FileList.forEach(async item=>{ + + if(!item.pdfUrl){ + // 分页生成文件,只渲染第一页 + let thisSubList=item.childreen; + let needGenList=[]; + for(let j=0;j0){ - this.cacheFileList.forEach(item=>{ + this.cacheFileList.forEach( item=>{ + if(!item.pdfUrl){ + item.pdfUrl = this.pdfUtils.getBlobUrl(item.pdfBase64); + } this.downPdfFile(item.billCode,item.pdfUrl); }); } @@ -298,7 +357,18 @@ export default { // this.$refs.pdf.print() if(this.isA4){ if(this.cacheA4FileList&&this.cacheA4FileList.length>0){ - this.cacheA4FileList.forEach(item=>{ + this.cacheA4FileList.forEach(async item=>{ + if(!item.pdfUrl){ + item.pdfUrl = this.pdfUtils.getBlobUrl(pdfBase64); + } + // 分页生成文件,只渲染第一页 + let thisSubList=item.childreen; + let needGenList=[]; + for(let j=0;j ({ [v]: Array.prototype[v] })); - // // 删除直接属性 - // this.newPrototype.forEach((v) => delete Array.prototype[v]); - - // }, - showSinglePage(){ - this.showFirstFile(); + showSinglePage(page){ this.isA4 = false; + if(!page || Object.is(page, NaN)){ + page=1; + } + + this.pageCount=this.cacheFileList.length; + const thisPage=this.cacheFileList[page-1]; + + const pdfBase64 = thisPage.pdfBase64; + + this.loadPdfUrl = this.pdfUtils.getBlobUrl(pdfBase64); + this.doScale(20); this.resetCountKey++; }, - async showA4Page(){ - // this.initA4(); - this.isA4 = true - this.doScale(75); - this.cacheA4FileList=[]; - let pdfUtils= new PdfUtils(); - - let that = this; - const loadingInstance = this.$loading({ - text: '正在生成A4预览...' - }) - - try { - let imgFiles = []; - for(let i=0;i0){ - - // 数组拆分 - const subImageList=imgFiles.reduce((acc, curr, index) => { - if (index % 4 === 0) acc.push([]) - acc[Math.floor(index / 4)].push(curr) - return acc - }, []) - - // 分页生成文件 - for(let i=0; i1){ - x=0; - y=0; - // doc.addPage() //添加页 - } - } - var pdfBase64 = doc.output('datauristring') - let pdfUrl=URL.createObjectURL(pdfUtils.base64ToBlob(pdfBase64)); - - return pdfUrl; - } catch (error) { - console.log(error); - return null; + if(!this.cacheA4FileList || this.cacheA4FileList.length==0){ + return; } - } + + const loadingInstance = this.$loading({ + text: '正在生成A4预览...' + }) + + this.pageCount=this.cacheA4FileList.length; + + + + console.log(this.cacheA4FileList) + // 分页生成文件,只渲染第一页 + let thisSubList=this.cacheA4FileList[page-1].childreen; + let needGenList=[]; + for(let j=0;j { // 创建canvas @@ -403,6 +402,99 @@ export default class PdfUtils { return URL.createObjectURL(mergedPdfBlob); } } + + + async mergePdfToA4(pdfFileList, fileName,isNeedDown=false) { + let pdfBuffers = []; + pdfFileList.map((item) => { + let dateArray=this.base64ToBuffer(item); + pdfBuffers.push(Buffer.from(dateArray)); + }); + const pdfDoc = await PDFDocument.create(); + const pageA4 = pdfDoc.addPage(PageSizes.A4); + const drawHeight = pageA4.getHeight()/2; + const drawWidth = pageA4.getWidth()/2; + let i=0; + let x=0; + let y=0; + let width=0; + let height=0; + for (let buffer of pdfBuffers) { + const [page] = await pdfDoc.embedPdf(buffer); + const pageDims = page.scale(1.0); + // ...pageDims, + // rotate: degrees(30), + // opacity: 0.75, + // Optional blendMode + // Optional height + // Optional opacity + // Optional rotate + // Optional width + // Optional x + // Optional xScale + // Optional xSkew + // Optional y + // Optional yScale + // Optional ySkew + + let rateDif=pageDims.width/pageDims.height; + // width = drawHeight*rateDif + width = drawWidth-1*rateDif; + height = drawHeight-1; + + + + if(i==0){ + x=0; + y=pageA4.getHeight()/2; + } + else if(i==1){ + x=pageA4.getWidth()/2; + y=pageA4.getHeight()/2; + } + else if(i==2){ + x=0; + y=0; + } + else if(i==3){ + x=pageA4.getWidth()/2; + y=0; + } + + pageA4.drawPage(page, { + x: x, + y: y, + width:width, + height:height + }); + + i++; + } + + const uint8Array = await pdfDoc.save(); + let mergeBuffer = Buffer.from(uint8Array); + + var blob=new Blob([mergeBuffer]); + + if(isNeedDown){ + const url = window.URL.createObjectURL(blob); + const link = document.createElement("a"); + link.href = url; + link.setAttribute("download", fileName); + if (typeof link.download === 'undefined') { + link.setAttribute('target', '_blank') + } + document.body.appendChild(link) + link.click() + document.body.removeChild(link) + }else{ + const mergedPdfBlob = new Blob([mergeBuffer], { + type: "application/pdf", + }); + return URL.createObjectURL(mergedPdfBlob); + } + } + downloadBase64(base64Str,fileName) { let result = base64Str.replace(/[\r\n]/g, ""); let pdfBase64 = `data:application/pdf;base64,${result}`; @@ -419,11 +511,41 @@ export default class PdfUtils { } + + + async urlToBlob(url) { + const response = await fetch(url); + const arrayBuffer = await response.arrayBuffer(); + const byteArray = new Uint8Array(arrayBuffer); + return new Blob([byteArray], {type: response.headers.get('content-type')}); + } + + blobToBase64(blob) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = () => resolve(reader.result); + reader.onerror = reject; + reader.readAsDataURL(blob); + }); + } + fileTobase64(file) { let reader = new FileReader(); reader.readAsDataURL(file) } + blobToArrayBuffer(blob, callback) { + let reader = new FileReader(); + reader.readAsArrayBuffer(blob); + reader.onload = function () { + return callback(this.result); + } + } + +// let blob = new Blob([1, 2, 3, 4, 5]); +// blobToArrayBuffer(blob, (arrayBuffer) => { console.log(arrayBuffer) }) + + base64ToFile(base64Data, filename) { // 64转file if (typeof base64Data != 'string') { diff --git a/src/views/emis/EmisBaseTools/TanexPrinterPanel.vue b/src/views/emis/EmisBaseTools/TanexPrinterPanel.vue index b0215d87..874669c4 100644 --- a/src/views/emis/EmisBaseTools/TanexPrinterPanel.vue +++ b/src/views/emis/EmisBaseTools/TanexPrinterPanel.vue @@ -59,7 +59,7 @@
- +
@@ -120,6 +120,8 @@ showCounter:0, pdfList:[], + pdfBase64List:[], + isLoadComplete:false, tanexPrinter:null, printerDownUrl:null, @@ -271,21 +273,18 @@ that.pdfList=[]; that.showCounter=0; this.tanexPrinter.batchGetPDFAdv(printDataList,billCount,async function(code,msg,data){ - console.log(msg); - console.log(code); if(code == 500){ that.$modal.msgError("打印出错:"+msg); } else if(code == 200){ const pdfData=deepClone(data); loadingInstance.close(); - let pdfUtils=new PdfUtils({}); - - let blobUrl= await pdfUtils.getBlobUrl(pdfData.file); let pdfInfo={ "billCode":pdfData.ydSn, - "pdfUrl":blobUrl + "pdfUrl":null, + "pdfBase64":pdfData.file } + that.pdfList.push(pdfInfo); @@ -298,7 +297,8 @@ } else if(code == 800){ // 全部获取完成 - // console.log("===预览全部获取完成====>"); + console.log("===全部获取完成1====>"); + that.isLoadComplete=true; } }); @@ -351,17 +351,19 @@ that.$modal.msgError("打印出错:"+msg); } else if(code == 200){ - + console.log("===获取到数据====>"); const pdfData=deepClone(data); loadingInstance.close(); - let pdfUtils=new PdfUtils({}); - let blobUrl= await pdfUtils.getBlobUrl(pdfData.file); let pdfInfo={ "billCode":pdfData.ydSn, - "pdfUrl":blobUrl + "pdfUrl":null, + "pdfBase64":pdfData.file } + that.pdfList.push(pdfInfo); + console.log(that.pdfList); + if(!that.openPdfView && that.showCounter==0){ that.openPdfView = true; } @@ -370,7 +372,8 @@ } else if(code == 800){ // 全部获取完成 - // console.log("===全部获取完成====>"); + console.log("===全部获取完成2====>"); + that.isLoadComplete=true; } }); }, @@ -429,6 +432,7 @@ pdfUtils.getBlobUrl(pdfData.file, pdfData.ydSn+".pdf",true ) } else if(code == 800){ + // 全部获取完成 // console.log("===全部获取完成====>"); }