diff --git a/package.json b/package.json index 3f8a085..ff26026 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "dependencies": { "@handsontable/vue": "^11.1.0", "@lapo/asn1js": "^1.2.1", + "@pdf-lib/fontkit": "^1.1.1", "axios": "^0.25.0", "chokidar": "^3.5.3", "core-js": "^3.6.5", diff --git a/src/vendors/pdf/PdfView.vue b/src/vendors/pdf/PdfView.vue index 89a1399..9bda832 100644 --- a/src/vendors/pdf/PdfView.vue +++ b/src/vendors/pdf/PdfView.vue @@ -29,6 +29,8 @@ import 'pdfdist-mergeofd/web/pdf_viewer.css'; PDFJS.GlobalWorkerOptions.workerSrc = require("pdfdist-mergeofd/build/pdf.worker.entry.js"); import { saveByteArray } from '@/utils/index' +import fontkit from '@pdf-lib/fontkit' + export default { name: "PdfView", props: { @@ -87,8 +89,13 @@ export default { async loadFile() { //初始化pdf console.log("初始化pdf"); + const fontUrl = require('./font/SourceHanSansCN-Regular.ttf') + // const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica) + const fontBytes = await fetch(fontUrl).then((res) => res.arrayBuffer()); const pdfDoc = await PDFDocument.load(this.data) - const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica) + pdfDoc.registerFontkit(fontkit); // 自定义字体挂载、fontkit为自定义字体注册工具 + const customFont = await pdfDoc.embedFont(fontBytes); + const pages = pdfDoc.getPages() // let canvas = document.createElement('canvas') @@ -98,7 +105,7 @@ export default { // 水印 const drawTextParams = { lineHeight: 50, - font: helveticaFont, + font: customFont, size: 16, color: rgb(0.08, 0.08, 0.2), rotate: degrees(15), @@ -114,11 +121,11 @@ export default { let lineNum = 0 for (let iy = 50; iy <= height; iy += 200) { // 水印纵向间隔 lineNum++ - // currentPage.drawText(`xuhuajiao`+ this.formateTime(), { - // x: lineNum & 1 ? ix : ix + 60, - // y: iy, - // ...drawTextParams - // }) + currentPage.drawText('徐华姣'+ this.formateTime(), { + x: lineNum & 1 ? ix : ix + 60, + y: iy, + ...drawTextParams + }) } } } @@ -129,54 +136,54 @@ export default { console.log('pdf_pages',this.pdf_pages) this.$nextTick(() => this.renderPagePdf()); - let dom = document.getElementsByClassName('page') - let canvas = document.createElement('canvas') - let cxt = canvas.getContext('2d') - let divImg = document.createElement('div') + // let dom = document.getElementsByClassName('page') + // let canvas = document.createElement('canvas') + // let cxt = canvas.getContext('2d') + // let divImg = document.createElement('div') - let imgScale = 0.3 - //创建新的图片对象 - let img = new Image(); - //指定图片的URL - img.src = this.logo; - //浏览器加载图片完毕后再绘制图片 - img.onload = function() { - //cxt.drawImage(img,0,0); - cxt.rotate(-20 * Math.PI / 180) - let whScale = img.width / img.height - cxt.clearRect(0, 0, canvas.width, canvas.height); - cxt.drawImage(img, //规定要使用的图像、画布或视频。 - 0, 0, //开始剪切的 x 坐标位置。 - img.width, img.height, //被剪切图像的高度。 - 0, 50,//在画布上放置图像的 x 、y坐标位置。 - img.width * imgScale, img.height * imgScale //要使用的图像的宽度、高度 - ) - divImg.style.opacity = 0.3 - divImg.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat' - drawImage2(divImg,dom) - } + // let imgScale = 0.3 + // //创建新的图片对象 + // let img = new Image(); + // //指定图片的URL + // img.src = this.logo; + // //浏览器加载图片完毕后再绘制图片 + // img.onload = function() { + // //cxt.drawImage(img,0,0); + // cxt.rotate(-20 * Math.PI / 180) + // let whScale = img.width / img.height + // cxt.clearRect(0, 0, canvas.width, canvas.height); + // cxt.drawImage(img, //规定要使用的图像、画布或视频。 + // 0, 0, //开始剪切的 x 坐标位置。 + // img.width, img.height, //被剪切图像的高度。 + // 0, 50,//在画布上放置图像的 x 、y坐标位置。 + // img.width * imgScale, img.height * imgScale //要使用的图像的宽度、高度 + // ) + // divImg.style.opacity = 0.3 + // divImg.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat' + // drawImage2(divImg,dom) + // } - function drawImage2 (div,dom) { - div.style.pointerEvents = 'none' - div.className = 'weterbox' - div.style.top = 0 - div.style.left = 0 - div.style.position = 'absolute' - div.style.zIndex = '100000' - div.style.width = '100%' - div.style.height = '100%' - // console.log(dom) - if( dom.length > 0){ - for(let i = 0; i< dom.length;i++){ - let child = dom[i].getElementsByClassName('weterbox') - if(child.length > 0){ - dom[i].removeChild(child[0]) - } - dom[i].appendChild(div.cloneNode(true)) - // console.log(i,dom[i]) - } - } - } + // function drawImage2 (div,dom) { + // div.style.pointerEvents = 'none' + // div.className = 'weterbox' + // div.style.top = 0 + // div.style.left = 0 + // div.style.position = 'absolute' + // div.style.zIndex = '100000' + // div.style.width = '100%' + // div.style.height = '100%' + // // console.log(dom) + // if( dom.length > 0){ + // for(let i = 0; i< dom.length;i++){ + // let child = dom[i].getElementsByClassName('weterbox') + // if(child.length > 0){ + // dom[i].removeChild(child[0]) + // } + // dom[i].appendChild(div.cloneNode(true)) + // // console.log(i,dom[i]) + // } + // } + // } }, diff --git a/src/vendors/pdf/font/SourceHanSansCN-Regular.ttf b/src/vendors/pdf/font/SourceHanSansCN-Regular.ttf new file mode 100644 index 0000000..53b6691 Binary files /dev/null and b/src/vendors/pdf/font/SourceHanSansCN-Regular.ttf differ