我要评论安装依赖
npm install --save pdf-lib
代码中导入及使用
import { pdfdocument, standardfonts, rgb } from 'pdf-lib'
// 拼接已上传的封面pdf 和 pdfmake制作的pdf
const mergedpdf = await pdfdocument.create()
// 封面测试.pdf文件在public文件夹下，也可以使用url
const bytes1 = await this.readfileasync('封面测试.pdf')
const pdf1 = await pdfdocument.load(bytes1)
// add a font to the doc
const helveticafont = await pdf1.embedfont(standardfonts.helvetica)
const pdfdocgenerator = await pdfmake.createpdf(docdefinition)
// 获取pdfmake制作的pdf的arraybuffer
await pdfdocgenerator.getbuffer(async buffer => {
const pdf2 = await pdfdocument.load(buffer)
const copiedpagesa = await mergedpdf.copypages(pdf1, pdf1.getpageindices())
copiedpagesa.foreach((page) => {
// 封面添加名称信息
page.drawtext('cover name: 111', {
x: page.getwidth() / 2 - (helveticafont.widthoftextatsize('cover name: 111', 32) / 2),// 使文字居中
y: 580,
size: 32,
font: helveticafont,
color: rgb(0, 0.53, 0.71)
})
mergedpdf.addpage(page)
})
const copiedpagesb = await mergedpdf.copypages(pdf2, pdf2.getpageindices())
copiedpagesb.foreach((page) => mergedpdf.addpage(page))
const mergedpdffile = await mergedpdf.save()
// 下载到本地
const url = window.url.createobjecturl(new blob([mergedpdffile.buffer]))
const link = document.createelement('a')
link.href = url
link.setattribute('download', 'test.pdf')
document.body.appendchild(link)
link.click()
})
// 获取文件arraybuffer
readfileasync(file_url) {
return new promise((resolve, reject) => {
const xhr = new xmlhttprequest()
xhr.open('get', file_url, true)
xhr.responsetype = 'blob'
xhr.onload = function() {
if (this.status === 200) {
const reader = new filereader()
reader.onload = () => {
resolve(reader.result)
}
reader.onerror = reject
reader.readasarraybuffer(this.response)
}
}
xhr.send()
})
},
每一页加水印
修改上面的代码
// const mergedpdffile = await mergedpdf.save()
// 加水印、下载
this.addcanvaswatermark(mergedpdf, '水印water', filename)
// 下载到本地
// const url = window.url.createobjecturl(new blob([mergedpdffile.buffer]))
// const link = document.createelement('a')
// link.href = url
// link.setattribute('download', filename + '.pdf')
// document.body.appendchild(link)
// link.click()
// 添加 水印
async addcanvaswatermark(pdfdoc, text, filename) {
// 加载自定义字体，这里用的是pdfmake中自定义的字体
const fonturl = require('pdfmake/examples/fonts/fzytk.ttf')
const fontbytes = await fetch(fonturl).then((res) => res.arraybuffer())
// 自定义字体挂载
pdfdoc.registerfontkit(fontkit)
const customfont = await pdfdoc.embedfont(fontbytes)
// 为每页pdf添加文字水印
const pages = pdfdoc.getpages()
// 文字渲染配置
const drawtextparams = {
lineheight: 50,
font: customfont, // 这里使用的是自定义字体
size: 12,
color: rgb(0.46, 0.53, 0.6), // rgb(0.08, 0.08, 0.2),
rotate: degrees(15),
opacity: 0.2
}
for (let i = 0; i < pages.length; i++) {
const page = pages[i]
// 获取当前页宽高
const { width, height } = page.getsize()
// 要渲染的文字内容
// const text = 'water 121314'
for (let ix = 1; ix < width; ix += 230) { // 水印横向间隔
let linenum = 0
for (let iy = 50; iy <= height; iy += 110) { // 水印纵向间隔
linenum++
page.drawtext(text, {
x: linenum & 1 ? ix : ix + 70,
y: iy,
...drawtextparams
})
}
}
}
// 序列化为字节，并下载到本地
const pdfbytes = await pdfdoc.save()
this.download(pdfbytes, filename)
},
// 下载到本地
download(mergedpdffile, filename) {
const url = window.url.createobjecturl(new blob([mergedpdffile.buffer]))
const link = document.createelement('a')
link.href = url
link.setattribute('download', filename + '.pdf')
document.body.appendchild(link)
link.click()
}
到此这篇关于使用pdf-lib.js实现拼接两个pdf文件并添加水印的文章就介绍到这了,更多相关pdf-lib拼接文件并添加水印内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论