emis-frontend/src/utils/pdfUtils.js

424 lines
13 KiB
JavaScript
Raw Normal View History

2024-05-19 16:31:57 +00:00
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)
}
2024-05-31 10:12:59 +00:00
2024-05-31 11:59:20 +00:00
getBlobUrl(base64Str) {
let blob = new Blob([base64Str],{type: 'application/pdf'});
let pdfurl = window.URL.createObjectURL(blob);
return pdfurl;
2024-05-31 10:12:59 +00:00
}
2024-05-31 11:59:20 +00:00
2024-05-24 01:48:56 +00:00
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",
});
2024-05-31 10:12:59 +00:00
return URL.createObjectURL(mergedPdfBlob);
2024-05-24 01:48:56 +00:00
}
}
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
});
}
2024-05-19 16:31:57 +00:00
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)
}
}