最近有需求需要做一個(gè)小工具：生成pdf水印的網(wǎng)頁(yè)工具毒费。一開(kāi)始是想前端傳遞文件宗雇、水印文案給后端，然后由服務(wù)器生成，然后返回前端制作好的帶水印的pdf鏈接提供下載侧甫。然后就按照這個(gè)方案開(kāi)始了行動(dòng)凶伙，后端同事一頓噼里啪啦的操作最后使用python的reportlab完成了本次需求的重中之重的工作拾因。未聯(lián)調(diào)接口之前捏萍，程序工作的挺好的。
原本以為這樣就結(jié)束了本次需求纵苛，誰(shuí)知聯(lián)調(diào)之后問(wèn)題來(lái)了剿涮，發(fā)現(xiàn)需上傳的文件可能幾十上百兆，需生成pdf的水印文案也可能多達(dá)十?dāng)?shù)個(gè)攻人，生成時(shí)間就成了一個(gè)大問(wèn)題取试。據(jù)測(cè)試單個(gè)10+M的pdf文件加完一個(gè)水印就需要30s左右，大大的降低了工具效率怀吻。然后提出方案在服務(wù)器保留該次任務(wù)瞬浓，等用戶下次再打開(kāi)該頁(yè)面再來(lái)下載之前處理好的文件，但是這樣也有效率問(wèn)題蓬坡，而且前后端需要兩次交互才能把文件下載下來(lái)猿棉，效率不高磅叛。本著效率至上的原則，pass掉了后端生成的方案萨赁。
于是便想著看是否能在前端就把pdf給處理完成弊琴，不與后端交互，效率肯定能大大的提升起來(lái)杖爽，在github搜索pdf敲董，篩選js庫(kù)，可以看到很多優(yōu)秀的庫(kù)慰安，如：pdf.js(30.9k)/jsPDF(19.2k)/pdfmake(8.3k)/pdfkit(6.2k)/pdf-lib(1.1k)腋寨。仿佛看到了巨大的希望，從星星最高的開(kāi)始查閱化焕，哪個(gè)庫(kù)能夠符合我的需求萄窜。
pdf.js (官方api文檔還未完善，只有一個(gè)api.js的文檔撒桨，但閱讀起來(lái)有點(diǎn)費(fèi)勁) 確實(shí)是非常優(yōu)秀的pdf閱讀庫(kù)查刻，提供了非常多的功能，但大多數(shù)都是查看類(lèi)的元莫，沒(méi)有能夠操作的方法赖阻，但是其提供了一個(gè)在canvas中顯示的方法(默默記下了這個(gè)方法)
jsPDF/pdfmake/pdfkit都是用來(lái)生成pdf的庫(kù)，但是閱讀文檔后沒(méi)有發(fā)現(xiàn)能夠在源文檔上直接操作的方法踱蠢。值得注意的是他們提供了可以從canvas中生成pdf的方法。
思考：把pdf每一頁(yè)都畫(huà)在canvas上棋电，然后通過(guò)canvas的api在pdf上層畫(huà)一層水印茎截，最后再把canvas轉(zhuǎn)成pdf下載下來(lái)不就可以了么,思路有了就開(kāi)始實(shí)現(xiàn)吧
瞎B操作：
/**html代碼省略**/
$('#upload-input').change(async function () {
var files = $(this)[0].files;
if (files.length) {
$('#file-name').html(files[0].name);
showPdf(await files[0].arrayBuffer(),files[0].name)
}
})
function showPdf(file,filename) {
var size = 80;
var text = '我是';
pdfjsLib.workerSrc = '<?php echo CDN; ?>js/pdfjs/pdf.worker.js';
pdfjsLib.getDocument(file).promise.then(function (pdf) {
var pageNum = 1;
var time = 0;
var timer = setInterval(() => time += 10, 10)
var new_pdf;
setCanvas()
function setCanvas() {
pdf.getPage(pageNum).then(function (page) {
var scale = 1.5;
var viewport = page.getViewport({scale: scale,});
var {offsetX, offsetY, width, height} = viewport;
var orientation = width <= height ? 'p' : 'l'
var canvas = document.getElementById('the-canvas');
var wm_canvas = document.getElementById('watermarking-canvas');
var context = canvas.getContext('2d');
var wm_context = wm_canvas.getContext('2d');
wm_context.height = canvas.height = height;
wm_context.width = canvas.width = width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
if (pageNum == 1) {
new_pdf = new jsPDF({
orientation,
unit: 'px',
format: [width/scale, height/scale],
})
}
// console.log(pdf,page,viewport)
page.render(renderContext).promise.then(function () {
context.fillStyle = 'rgba(0,0,0,0.1)';
context.font = `300 ${size}px "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif`;
var textW = context.measureText(text).width
for (let i = 0; i < width + size; i += textW) {
for (let j = size; j < height + size; j += size) {
context.fillText(text, i, j);
}
}
// var pageData = canvas.toDataURL('image/jpeg', 1.0);
}).finally(function () {
pageNum++
new_pdf.addImage(canvas, 'JPEG', offsetX, offsetY, new_pdf.internal.pageSize.getWidth(), new_pdf.internal.pageSize.getHeight());
if (pageNum <= pdf.numPages) {
new_pdf.addPage([width/scale, height/scale])
setCanvas()
} else {
clearInterval(timer)
console.log(time)
new_pdf.save('水印' + filename)
}
})
})
}
});
}
最后，運(yùn)行一下程序赶盔，真的生成了
可是問(wèn)題又來(lái)了企锌！
- 生成出來(lái)的pdf變成了圖片，里面的文字不能被選中
- 生成的pdf會(huì)模糊于未，先放大再縮小之后質(zhì)量上去了撕攒，但是文件大小也上去了，源文件2.1M但是現(xiàn)在生成之后是180M,這不能忍昂嫫帧抖坪！
方案再次被pass！
最后抱著試一試的態(tài)度試了一下pdf-lib這個(gè)庫(kù)(星星也是少的可憐)闷叉，但是它很強(qiáng)大擦俐，支持直接修改pdf源文檔，同時(shí)也提供了畫(huà)水印文字的方法握侧，感覺(jué)非常符合我目前的需求呀蚯瞧！然后是一頓閱讀+操作嘿期，最后按照官方給的一個(gè)demo試試
import { degrees, PDFDocument, rgb, StandardFonts } from 'pdf-lib';
async function modifyPdf() {
const url = 'https://pdf-lib.js.org/assets/with_update_sections.pdf'
const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer())
const pdfDoc = await PDFDocument.load(existingPdfBytes)
const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica)
const pages = pdfDoc.getPages()
const firstPage = pages[0]
const { width, height } = firstPage.getSize()
firstPage.drawText('This text was added with JavaScript!', {
x: 5,
y: height / 2 + 300,
size: 50,
font: helveticaFont,
color: rgb(0.95, 0.1, 0.1),
rotate: degrees(-45),
})
const pdfBytes = await pdfDoc.save()
}
很好，非常好埋合，勝利就在前方了备徐！
但是，這時(shí)候又出問(wèn)題了甚颂，畫(huà)上去的水印文字不支持設(shè)置透明度坦喘。查閱github的issue之后發(fā)現(xiàn)作者說(shuō)，透明度是個(gè)很好的功能呀西设，可惜我不支持瓣铣，你們誰(shuí)想出來(lái)了給我發(fā)個(gè)pr。贷揽。棠笑。（吐血...）
還好天無(wú)絕人之路，這時(shí)看到一位老哥在另一個(gè)issue中回了一句禽绪，pdf-lib它還支持合并pdf蓖救，你可以搞個(gè)水印層的pdf和源pdf進(jìn)行合并從而曲線救國(guó)，來(lái)達(dá)到實(shí)現(xiàn)pdf加水印的效果印屁。略一思量循捺，該方案可行，開(kāi)干吧雄人。
誰(shuí)知又遇到了問(wèn)題从橘，其他庫(kù)高了一圈也都不能生成帶透明度的pdf文件，這可咋整啊~（哪位大佬如果知道础钠，歡迎指導(dǎo)）
最后恰力，看來(lái)還得借助后端老哥的力量了。前端把文案信息傳遞給后端旗吁，后端生成pdf水印層踩萎，然后返回文件鏈接，前端拿到連接后請(qǐng)求下來(lái)很钓，前端負(fù)責(zé)把源文件與水印層pdf文件進(jìn)行合并香府，由于讀取的只有一個(gè)單頁(yè)的水印pdf速度還是很快的，源文件在本地讀取就行了码倦，效率也不算太差企孩。經(jīng)測(cè)試給一個(gè)80M的pdf添加5個(gè)水印，耗時(shí)10S左右吧叹洲。
最最后柠硕，還有一個(gè)問(wèn)題，就是服務(wù)器上產(chǎn)生的水印pdf垃圾文件怎么辦？當(dāng)然是刪除嘍蝗柔，不然留著過(guò)年拔趴！用了promise.all來(lái)監(jiān)聽(tīng)是否全部轉(zhuǎn)換完成癣丧，完成后發(fā)送一個(gè)請(qǐng)求給后端槽畔，刪除掉之前生產(chǎn)的文件。
let file, water_name_keys,base_url="你的api地址";
//監(jiān)聽(tīng)上傳按鈕
$('#upload-input').change(function () {
const files = $(this)[0].files;
if (files.length) {
$('#file-name').html(files[0].name);
file = files[0];
}
})
//提交水印文案胁编，獲取打好水印的pdf
$('#submit').click(function () {
const water_name = $('[name=users]').val();
if(!file){
new_alert('請(qǐng)先上傳文件', 1500);
return
}else if(!water_name){
new_alert('請(qǐng)先填寫(xiě)水印文案', 1500);
return
}
let time = 0;
let timer = setInterval(()=>{time+=100},100);
const msg_id = new_alert('生成中...', 999999);
$.ajax({
url:base_url+'/tool/ExecFileWaterMark',
data: {water_name},
method: 'get',
dataType: 'jsonp',
success(res) {
if (res.resultCode == 0) {
let modifyPdfList = []
water_name_keys = Object.keys(res.result.data);
Object.values(res.result.data).map((wm_url, index) => {
modifyPdfList.push(modifyPdf(wm_url, file, index));
})
Promise.all(modifyPdfList).then(() => {
//統(tǒng)計(jì)時(shí)間
clearInterval(timer);
console.log(time);
new_alert.close(msg_id);
new_alert('生成成功', 1500);
deleteWmFile();
}).catch(() => {
new_alert('生成失敗', 1500);
clearInterval(timer);
})
} else {
new_alert.close(msg_id);
new_alert('生成失敗', 1500);
}
},
error() {
new_alert.close(msg_id);
}
})
})
//合并pdf
function modifyPdf(url, file, index) {
return new Promise(async (resolve, reject) => {
try {
const {PDFDocument} = PDFLib;
//獲取源pdf文件文檔
const existingPdfBytes = await file.arrayBuffer();
const pdfDoc = await PDFDocument.load(existingPdfBytes);
//獲取水印文件文檔
const wmPdf = await fetch(url).then(res => res.arrayBuffer());
//把水印pdf頁(yè)面嵌入文檔中
const [wmPreamble] = await pdfDoc.embedPdf(wmPdf, [0]);
//獲取源文件總頁(yè)數(shù)
const pages = pdfDoc.getPages();
//循環(huán)源pdf頁(yè)面添加水印
for (let i = 0; i < pages.length; i++) {
const page = pages[i];
const {width, height} = page.getSize();
//把水印頁(yè)面畫(huà)到源pdf頁(yè)面上
page.drawPage(wmPreamble, {width, height, x: 0, y: 0});
}
//保存pdf頁(yè)面厢钧，返回二進(jìn)制unit8Array二進(jìn)制數(shù)組
const pdfBytes = await pdfDoc.save();
//二進(jìn)制數(shù)組轉(zhuǎn)為blob數(shù)據(jù)
const blob = new Blob([pdfBytes], {type: 'application/pdf'});
//下載
const a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = water_name_keys[index] + '-' + file.name; // 這里填保存成的文件名
a.click();
URL.revokeObjectURL(a.href);
a.remove();
resolve();
} catch (e) {
reject()
}
})
}
// 刪除服務(wù)器上的水印文件
function deleteWmFile() {
const water_name = water_name_keys.join(',')
$.ajax({
url: base_url+'/tool/DeleteFileWaterMark',
data: {water_name},
method: 'get',
dataType: 'jsonp'
})
}
完結(jié)撒花！ｆ页取早直！
