vue预览pdf并添加水印

最新推荐文章于 2024-03-22 15:09:41 发布

NAVILLERA

最新推荐文章于 2024-03-22 15:09:41 发布

阅读量535

点赞数

文章标签： vue.js pdf javascript

本文链接：https://blog.youkuaiyun.com/weixin_43923202/article/details/129820692

版权

本文介绍如何使用Vue.js结合JavaScript库，实现在Web端预览PDF文件，并添加自定义水印的功能。通过加载PDF.js库进行PDF预览，利用canvas和绘图API添加透明文字水印，确保文件的安全性和原创性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <div  id="demo" style="width:100%;margin-top:31px"></div>

FilePDFViewFun() {
        let than = this;
        FilePDFView({ param: this.param }).then(res => {
          this.pdfh5 = new Pdfh5("#demo", {
            data: res.data,
            renderType: "canvas",
          });
          var arr = [];
          this.pdfh5.on("complete", function (status, msg, time) {
            console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
            if (status == 'success') {
              let div = document.getElementsByClassName("pageContainer")
              than.$nextTick(() => {
                for (let i = 0; i < div.length; i++) {
                  arr.push(div[i].getElementsByT