276 lines
9.4 KiB
JavaScript
276 lines
9.4 KiB
JavaScript
|
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))
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加 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)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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)
|
|||
|
|
}
|
|||
|
|
}
|