下载PDF.js
点击PDF.js下载地址
引入预览PDF 文件
// const url = new URL("./1.pdf", import.meta.url).href // 在本地项目获取pdf
// const url = "https://xxxx/05d833041f.pdf" // 在线上链接获取pdf
const url = query.get('url') // 在地址栏获取pdf
const query = new URLSearchParams(window.location.search.split('?')[1])
const watermarkText = query.get('text') || 'xxx' // 添加水印
const baseUrl = import.meta.env.BASE_URL; // 如果有更改基本路径则添加<!-- 注意引入路径是否正确 -->
<iframe :src="`${baseUrl}/pdfjs-dist/web/viewer.html?file=${url}&watermarkText=${watermarkText}`" width="100%" height="100%" frameborder="0"></iframe>
AddWatermark.js 添加水印的功能
(() => {// 添加水印window.AddWatermark = (ctx, that) => {// 水印数据 startconst watermarkPoint = [[45, 35], [310, 35], [45, 165], [310, 165],] // 水印坐标const query = new URLSearchParams(window.location.search.split('?')[1])let watermarkText = query.get('watermarkText')// 水印数据 end// 添加水印const scale = that.scalectx.font = `${16 / scale}px Microsoft Yahei`;// ctx.fillStyle = 'rgba(255, 0, 0, 1)'ctx.fillStyle = 'rgba(0, 0, 0, .1)'ctx.textAlign = 'center'ctx.textBaseline = 'middle'watermarkPoint.forEach(point => {ctx.translate( point[0] / scale, point[1] / scale )ctx.rotate(-30 * Math.PI / 180)ctx.fillText(watermarkText, 0, 0)ctx.resetTransform()})}
})()
viewer.html引入添加水印的js
/pdfjs-dist/web/viewer.html
<!-- 注意引入路径是否正确 -->
<script src="../js/AddWatermark.js" type="module"></script>
更改/pdfjs-dist/web/viewer.mjs文件
- 注释掉校验
// validateFileURL(file);
- 搜索“await this.#renderDrawLayer();”关键字
// 添加水印
AddWatermark(ctx, this)
使用的PDF.js版本
4.5.136