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

下载PDF.js

引入预览PDF 文件

html 复制代码

// 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 添加水印的功能

js 复制代码

(() => {
    // 添加水印
    window.AddWatermark = (ctx, that) => {
        // 水印数据 start
        const 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.scale
        ctx.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

html 复制代码

<!-- 注意引入路径是否正确 -->
<script src="../js/AddWatermark.js" type="module"></script>

更改/pdfjs-dist/web/viewer.mjs文件

注释掉校验

js 复制代码

// validateFileURL(file);

搜索"await this.#renderDrawLayer(); "关键字

js 复制代码

// 添加水印
AddWatermark(ctx, this)

使用的PDF.js版本

4.5.136