import { degrees, PDFDocument, rgb, StandardFonts } from 'pdf-lib'; import axios from "axios"; import Buffer from 'vue-buffer' /** * 浏览器打开新页签预览pdf * blob(必选): pdf文件信息(Blob对象)【Blob】 * docTitle(可选): 浏览器打开新页签的title 【String】 * isAddWatermark(可选,默认为false): 是否需要添加水印 【Boolean】 * watermark(必选):水印信息 【Object: { type: string, text: string, image:{ bytes: ArrayBuffer, imageType: string } }】 * watermark.type(可选):类型 可选值:text、image、canvas * watermark.text(watermark.type为image时不填,否则必填):水印文本。注意:如果watermark.type值为text,text取值仅支持拉丁字母中的218个字符。详见:https://www.npmjs.com/package/pdf-lib * watermark.image(watermark.type为image时必填,否则不填):水印图片 * watermark.image.bytes:图片ArrayBuffer * watermark.image.imageType:图片类型。可选值:png、jpg * Edit By WFT */ export default class PdfUtils { constructor() { // { blob, docTitle, isAddWatermark = false, watermark: { type = 'text', text = 'WFT', image } } const _self = this // if(!blob) { // return console.error('[PDF Blob Is a required parameter]') // } // if(!isAddWatermark) { // 不添加水印 // _self.preView(blob, docTitle) // } else { // let bytes,imageType // if(type == 'image') { // if(!image) { // return console.error('["image" Is a required parameter]') // } // bytes = image.bytes // imageType = image.imageType // } // const map = { // 'text': _self.addTextWatermark.bind(_self), // 'image': _self.addImageWatermark.bind(_self), // 'canvas': _self.addCanvasWatermark.bind(_self) // } // blob.arrayBuffer().then(async buffer => { // const existingPdfBytes = buffer // const pdfDoc = await PDFDocument.load(existingPdfBytes) // let params // if(type == 'text') params = { pdfDoc, text, docTitle } // if(type == 'image') params = { pdfDoc, bytes, imageType, docTitle } // if(type == 'canvas') params = { pdfDoc, text, docTitle } // map[type](params) // }).catch(e => console.error('[Preview Pdf Error]:', e)) // } } /** * 通过模版生成A4纸面单 * @param {*} templatePath * @param {*} outputPath * @param {*} data */ // const { PDFDocument, StandardFonts } = require('pdf-lib'); // const fs = require('fs'); // const fontkit = require('@pdf-lib/fontkit') // let pdfDoc // let font // 使用示例 // const templatePath = 'template.pdf'; // const outputPath = 'output.pdf'; // const data = { // 'key': 'value支持中文参数', // }; // fillPdfForm(templatePath, outputPath, data) // .then(() => { // console.log('PDF生成成功'); // }) // .catch((error) => { // console.log('PDF生成失败:', error); // }); async fillPdfForm(templatePath, outputPath, data) { const templateBytes = await fs.promises.readFile(templatePath); const fontBytes = await fs.promises.readFile('xxx.ttf'); pdfDoc = await PDFDocument.load(templateBytes); pdfDoc.registerFontkit(fontkit); font = await pdfDoc.embedFont(fontBytes); const form = pdfDoc.getForm(); for (const fieldKey in data) { const field = form.getTextField(fieldKey); if (field) { field.setText(data[fieldKey]); field.updateAppearances(font) } } const modifiedPdfBytes = await pdfDoc.save(); await fs.promises.writeFile(outputPath, modifiedPdfBytes); } // 添加 Text 水印 async addTextWatermark({ pdfDoc, text, docTitle }) { // console.log(StandardFonts, 'StandardFonts-->>') // 字体 const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica) const pages = pdfDoc.getPages() for(let i = 0; i < pages.length; i++) { let page = pages[i] let { width, height } = page.getSize() for(let i = 0; i < 6; i++) { for(let j = 0; j < 6; j++) { page.drawText(text, { x: j * 100, y: height / 5 + i * 100, size: 30, font: helveticaFont, color: rgb(0.95, 0.1, 0.1), opacity: 0.2, rotate: degrees(-35), }) } } } // 序列化为字节 const pdfBytes = await pdfDoc.save() this.preView(pdfBytes, docTitle) } // 添加 image 水印 async addImageWatermark({ pdfDoc, bytes, imageType, docTitle }) { // 嵌入JPG图像字节和PNG图像字节 let image const maps = { 'jpg': pdfDoc.embedJpg.bind(pdfDoc), 'png': pdfDoc.embedPng.bind(pdfDoc) } image = await maps[imageType](bytes) // 将JPG图像的宽度/高度缩小到原始大小的50% const dims = image.scale(0.5) const pages = pdfDoc.getPages() for(let i = 0; i < pages.length; i++) { let page = pages[i] let { width, height } = page.getSize() for(let i = 0; i < 6; i++) { for(let j = 0; j < 6; j++) { page.drawImage(image, { x: width / 5 - dims.width / 2 + j * 100, y: height / 5 - dims.height / 2 + i * 100, width: dims.width, height: dims.height, rotate: degrees(-35) }) } } } // 序列化为字节 const pdfBytes = await pdfDoc.save() this.preView(pdfBytes, docTitle) } // 合并文件 async mergePdf2(urlList, fileName,isNeedDown=false) { let startTime = +new Date() // console.log(startTime) // eslint-disable-next-line let promises = []; urlList.map((url) => { // eslint-disable-next-line no-async-promise-executor let tmp = new Promise(async (resolve) => { const response = await axios({ method: "get", url, responseType: "arraybuffer", }); resolve(Buffer.from(response.data)); }); promises.push(tmp); }); const pdfBuffers = await Promise.all(promises); const newPdf = await PDFDocument.create(); for (let buffer of pdfBuffers) { const pdfDocument = await PDFDocument.load(buffer); const contentPages = await newPdf.copyPages( pdfDocument, pdfDocument.getPageIndices() ); for (let page of contentPages) { newPdf.addPage(page); } } const uint8Array = await newPdf.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.appendChild(link) link.click() document.body.removeChild(link) }else{ const mergedPdfBlob = new Blob([mergeBuffer], { type: "application/pdf", }); return URL.createObjectURL(mergedPdfBlob);; } // console.log(+new Date() - startTime) } getBlobUrl(base64Str, fileName,isNeedDown=false) { let blob = this.base64ToBlobNoHeader(base64Str); // new Blob([base64Str],{type: 'application/pdf'}); let pdfurl = window.URL.createObjectURL(blob); if(isNeedDown){ const link = document.createElement("a"); link.href = pdfurl; link.setAttribute("download", fileName); if (typeof link.download === 'undefined') { link.setAttribute('target', '_blank') } document.body.appendChild(link) link.click() document.body.removeChild(link) }else{ return pdfurl; } } base64ToBlobNoHeader(code) { //Base64一行不能超过76字符,超过则添加回车换行符。因此需要把base64字段中的换行符,回车符给去掉,有时候因为存在需要把加号空格之类的换回来,取决于base64存取时的规则。 code = code.replace(/[\n\r]/g, ''); var raw = window.atob(code); let rawLength = raw.length; //转换成pdf.js能直接解析的Uint8Array类型 let uInt8Array = new Uint8Array(rawLength); for (let i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], {type: 'application/pdf'});//转成pdf类型 } async mergePdf3(pdfFileList, fileName,isNeedDown=false) { let pdfBuffers = []; pdfFileList.map((item) => { let dateArray=this.base64ToBuffer(item); pdfBuffers.push(Buffer.from(dateArray)); }); const newPdf = await PDFDocument.create(); for (let buffer of pdfBuffers) { const pdfDocument = await PDFDocument.load(buffer); const contentPages = await newPdf.copyPages( pdfDocument, pdfDocument.getPageIndices() ); for (let page of contentPages) { newPdf.addPage(page); } } const uint8Array = await newPdf.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}`; let url = URL.createObjectURL(this.base64ToBlob(pdfBase64)); 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) } fileTobase64(file) { let reader = new FileReader(); reader.readAsDataURL(file) } base64ToFile(base64Data, filename) { // 64转file if (typeof base64Data != 'string') { // this.$toast("urlData不是字符串") return; } var arr = base64Data.split(',') var type = arr[0].match(/:(.*?);/)[1] var fileExt = type.split('/')[1] var bstr = atob(arr[1]) var n = bstr.length var u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename +'.' + fileExt, { type: type }); } base64ToBlob(base64Data) { let arr = base64Data.split(','), fileType = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), l = bstr.length, u8Arr = new Uint8Array(l); while (l--) { u8Arr[l] = bstr.charCodeAt(l); } return new Blob([u8Arr], { type: fileType }); } base64ToBuffer(base64Str){ const padding = '='.repeat((4 - base64Str.length % 4) % 4); const base64 = (base64Str + padding).replace(/\-/g, '+').replace(/_/g, '/'); const rawData = window.atob(base64); const outputArray = new Uint8Array(rawData.length); for (let i = 0; i < rawData.length; ++i) { outputArray[i] = rawData.charCodeAt(i); } return outputArray; } // base64ToArrayBuffer(base64Str) { // let arr = base64Data.split(','), // fileType = arr[0].match(/:(.*?);/)[1], // bstr = atob(result), // l = bstr.length, // u8Arr = new Uint8Array(l); // while (l--) { // u8Arr[l] = bstr.charCodeAt(l); // } // let blob = new Blob([u8Arr], { // type: fileType // }); // let reader = new FileReader(); // reader.onload = function(result) { // console.log(result); // } // reader.readAsArrayBuffer(blob); // } base64File(base64Str,fileName){ var fileExt=".pdf"; var bstr = atob(base64Str) var n = bstr.length var u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], fileName +'.' + fileExt, { type: type }); } getObjectURL(file) { let url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } return url; } // 添加 canvas 水印 addCanvasWatermark({ pdfDoc, text, docTitle }) { // 旋转角度大小 const rotateAngle = Math.PI / 6; // labels是要显示的水印文字,垂直排列 let labels = new Array(); labels.push(text); const pages = pdfDoc.getPages() const size = pages[0].getSize() let pageWidth = size.width let pageHeight = size.height let canvas = document.createElement('canvas'); let canvasWidth = canvas.width = pageWidth; let canvasHeight = canvas.height = pageHeight; const context = canvas.getContext('2d'); context.font = "15px Arial"; // 先平移到画布中心 context.translate(pageWidth / 2, pageHeight / 2 - 250); // 在绕画布逆方向旋转30度 context.rotate(-rotateAngle); // 在还原画布的坐标中心 context.translate(-pageWidth / 2, -pageHeight / 2); // 获取文本的最大长度 let textWidth = Math.max(...labels.map(item => context.measureText(item).width)); let lineHeight = 15, fontHeight = 12, positionY, i i = 0, positionY = 0 while (positionY <= pageHeight) { positionY = positionY + lineHeight * 5 i++ } canvasWidth += Math.sin(rotateAngle) * (positionY + i * fontHeight) // 给canvas加上画布向左偏移的最大距离 canvasHeight = 2 * canvasHeight for (positionY = 0, i = 0; positionY <= canvasHeight; positionY = positionY + lineHeight * 5) { // 进行画布偏移是为了让画布旋转之后水印能够左对齐; context.translate(-(Math.sin(rotateAngle) * (positionY + i * fontHeight)), 0); for (let positionX = 0; positionX < canvasWidth; positionX += 2 * textWidth) { let spacing = 0; labels.forEach(item => { context.fillText(item, positionX, positionY + spacing); context.fillStyle = 'rgba(187, 187, 187, .8)'; // 字体颜色 spacing = spacing + lineHeight; }) } context.translate(Math.sin(rotateAngle) * (positionY + i * fontHeight), 0); context.restore(); i++ } // 图片的base64编码路径 let dataUrl = canvas.toDataURL('image/png'); // 使用Xhr请求获取图片Blob let xhr = new XMLHttpRequest(); xhr.open("get", dataUrl, true); xhr.responseType = "blob"; xhr.onload = res => { const imgBlob = res.target.response // 获取Blob图片Buffer imgBlob.arrayBuffer().then(async buffer => { const pngImage = await pdfDoc.embedPng(buffer) for(let i = 0; i < pages.length; i++) { pages[i].drawImage(pngImage) } // 序列化为字节 const pdfBytes = await pdfDoc.save() this.preView(pdfBytes, docTitle) }) } xhr.send(); } // 预览 preView(stream, docTitle) { const URL = window.URL || window.webkitURL; const href = URL.createObjectURL(new Blob([stream], { type: 'application/pdf;charset=utf-8' })) const wo = window.open(href) // 设置新打开的页签 document title let timer = setInterval(() => { if(wo.closed) { clearInterval(timer) } else { wo.document.title = docTitle } }, 500) } }