微信小程序预览PDF、H5预览PDF、网页预览PDF，并添加专属文字水印

下载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