场景：前端下载 pdf 文件的时候，需要加上水印，再反给用户下载
用到的库：pdf-lib 和 @pdf-lib/fontkit

一、引入pdf-lib插件

使用 cdn 引入 pdf-lib 包

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.14.1/pdf-lib.min.js"></script>

使用 cdn 引入自定义字体工具，因pdf-lib添加水印时默认不支持中文，所以必须自定义一个字体来显示中文水印

<script src="https://unpkg.com/@pdf-lib/fontkit/dist/fontkit.umd.js"></script>

引入文件下载工具，pdf添加水印后直接使用该工具下载

<script src="https://unpkg.com/downloadjs@1.4.7"></script>

二、使用pdf-lib

index.js文件：

可直接粘贴下去测试，需要注意代码中的以下两个路径问题：

1. const url = './201805510.pdf'; 这个路径是你需要放在index.js同个项目中的pdf文件

2. const fonturl = './watermarkfont.ttf'; 这个路径是你需要放在index.js同个项目中的下载好的自定义字体文件路径

有vscode + live-server 条件的话，可通过以下方法运行这个pdf添加水印功能

创建一个project文件夹，将 index.js、pdf文件、自定义字体文件.ttf 放在该文件夹中，用vscode打开project文件夹，使用live-server运行该文件夹就能测试该pdf水印添加功能

<html><head><meta charset="utf-8" /><script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.14.1/pdf-lib.min.js"></script><script src="https://unpkg.com/@pdf-lib/fontkit/dist/fontkit.umd.js"></script><script src="https://unpkg.com/downloadjs@1.4.7"></script>
</head><style>body {width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;flex-direction: column;}p {font-family: helvetica;font-size: 24px;text-align: center;margin: 25px;}.small {font-family: helvetica;font-size: 18px;text-align: center;margin: 25px;}button {background-color: #008CBA;border: none;color: white;padding: 15px 32px;text-align: center;font-size: 16px;}
</style><body><p>点击这个按钮通过<code>pdf-lib</code>给原来的pdf文件添加水印</p><button onclick="modify()">Modify PDF</button><p class="small">(点击后自动下载修改完成后的pdf文件)</p>
</body><script>//1. 引入相关对象和方法const { degrees, PDFDocument, rgb, StandardFonts } = PDFLib     //引入PDFLib相关方法const fontkit = window.fontkit;         //引入自定义字体工具包// pdf浏览async function modify() {/*2. 获取pdf文件的arrarybuffer文件流可请求后台接口返回的base64文件流，然后转成arrayBuffer类型可访问前端项目中的本地文件不能直接访问服务器链接文件，会有跨域问题*/const url = './201805510.pdf';const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer())// 将arraybuffer数据转成pdf文档const pdfDoc = await PDFDocument.load(existingPdfBytes)//3. 自定义字体，如不需要使用自定义字体可以将这一段全部注释掉，也不用下载自定义字体文件和自定义字体工具fontkit//将自己下载好的.ttf文件放置项目中，然后访问文件路径const fonturl = './watermarkfont.ttf';const fontBytes = await fetch(fonturl).then((res) => res.arrayBuffer());// 自定义字体挂载、fontkit为自定义字体注册工具pdfDoc.registerFontkit(fontkit)const customFont = await pdfDoc.embedFont(fontBytes)// 内置字体（不支持中文）, 如果水印中不包含中文可直接用内置字体，本次这里没用到内置字体const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica)//4. 添加水印//为每页pdf添加文字水印const pages = pdfDoc.getPages()for (let i = 0; i < pages.length; i++) {const noPage = pages[i]const { width, height } = noPage.getSize()for (let i = 0; i < 10; i++) {for (let j = 0; j < 3; j++) {noPage.drawText('水印', {x: 230 * j,y: (height / 4) * i,size: 16,font: customFont,    //这里使用的是自定义字体//使用上面定义好的内置字体 font:helveticaFont color: rgb(0.46, 0.53, 0.6),rotate: degrees(45),opacity: 0.3,})}}}//5. 保存pdf文件的unit64Arrary文件流const pdfBytes = await pdfDoc.save();download(pdfBytes, 'test.pdf', "application/pdf");     //下载带水印的pdf//6. 新标签页预览、打印let blobData = new Blob([pdfBytes], { type: "application/pdf;Base64" });let a = document.createElement("a");a.target = "_blank";a.href = window.URL.createObjectURL(blobData);document.body.appendChild(a);a.click();document.body.removeChild(a);}</script></html>

pdf-lib给pdf添加水印并预览、下载、打印相关推荐

pdf.js —— 在线预览下载打印pdf文件插件，实现的两种方式
ViewerJS简介 ViewerJS的繁重工作是由这些令人敬畏的项目完成的: PDF.js(由Mozilla提供) WebODF(由KO GmbH提供) 运行ViewerJS就像创建链接一样简单.您 ...
pdf.js——在线预览下载打印pdf文件插件
html页面使用下载PDF.js, http://mozilla.github.io/pdf.js/getting_started/#download 将 pdfjs 文件夹放到项目static ...
纯前端下载pdf链接文件,而不是打开预览的解决方案
纯前端下载pdf链接文件,而不是打开预览的解决方案参考文章: (1)纯前端下载pdf链接文件,而不是打开预览的解决方案 (2)https://www.cnblogs.com/jackson-yqj/ ...
SpringBoot + FreeMarker + FlyingSaucer 实现PDF在线预览、打印、下载
关键技术点: 1. Freemarker模板引擎  模板语法 2. FlyingSaucer根据模板生成pdf  兼容中文(及中文换行问题)  兼容CSS(绝对.相对定位)  兼容图片  多 ...
用 Adobe 设置 PDF 文件在文件管理器右侧预览窗格预览
用 Adobe 设置 PDF 文件在文件管理器右侧预览窗格预览前提安装 Adobe Acrobat Pro DC (64-bit) 示例如下: (上图下面部分是CSDN自动添加的水印) 说明:其他 ...
java pdf文件下载_Java后台返回PDF文件预览下载
Java后台返回PDF文件预览下载开始的代码的系统代码为: ResponseEntity onePdf = s3Wrapper.download(contractEntity.getContract ...
【iframe结合pdf.js实现pdf的预览/下载及打印功能】
iframe结合pdf.js实现pdf的预览/下载及打印 1.[下载pdf.js](http://mozilla.github.io/pdf.js/getting_started/#download) ...
钉钉小程序上传预览下载word，pdf文档等一系列问题
钉钉小程序上传预览下载word,pdf文档等一系列问题小程序"用完即走"的理念使得有着很好的发展市场,不仅微信小程序,支付宝,钉钉小程序等都受用户的喜爱. 刚接触了一个企业内部应 ...
图片、pdf、wrod和excel 在线预览
自定义文件服务器图片.pdf.wrod和excel 在线预览场景介绍准备工作预览图片,pdf 预览word 预览excel 效果图场景介绍因公司项目中需要使用到文件交互,因此在网上找了一个 ...
html 打印预览兼容,vue下使用 pdf.js 预览和打印 PDF文档兼容React
我使用前端开发框架是vue,有一个打印PDF文档的需求. 这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机. 所以这个预览加打印文档的需求就交到了前端, 开始我有想过 ...

pdf-lib给pdf添加水印并预览、下载、打印

一、引入pdf-lib插件

二、使用pdf-lib

index.js文件：

可直接粘贴下去测试，需要注意代码中的以下两个路径问题：

pdf-lib给pdf添加水印并预览、下载、打印相关推荐

最新文章

热门文章

pdf-lib给pdf添加水印并预览、下载、打印

一、引入pdf-lib插件

二、 使用pdf-lib

index.js文件：

可直接粘贴下去测试，需要注意代码中的以下两个路径问题：

pdf-lib给pdf添加水印并预览、下载、打印相关推荐

最新文章

热门文章

二、使用pdf-lib