vue集成pdf.js访问阿里云链接实现在线预览pdf 同时禁止打印下载

weixin_45751725

已于 2024-01-25 10:26:23 修改

阅读量2.4k

点赞数 1

文章标签： javascript vue.js 前端

于 2022-09-17 16:33:16 首次发布

本文链接：https://blog.csdn.net/weixin_45751725/article/details/126906126

版权

1.下载PDF.js

官网地址: http://mozilla.github.io/pdf.js/
解压后放入vue项目，我是放在pubilc文件夹中

在这里插入图片描述

我是放在pubilc文件夹中

2.使用

//看效果直接在页面中调用即可
window.open("/pdfjs-3.0.279-legacy-dist/web/viewer.html")

在这里插入图片描述

我的需求是只能预览，所以用了下面的写法来隐藏阿里云链接，在viewer.js里注释掉这不然会报错

在这里插入图片描述

 open(){
        var newWin = window.open('','newwindow','toolbar =no, menubar=no, scrollbars=no, resizeable=no, location=no, status=no');
        newWin.document.write('<body scroll="no" style="margin: 0px;padding: 0px;border:0px;overflow:hidden;"><iframe style="margin: 0px;padding: 0px;border: 0px;width:100%;height:100%" src="/pdfjs/web/viewer.html?file=https://online.oss-cn-shenzhen.aliyuncs.com/*****.pdf"></iframe></body>');
      },

如果直接访问阿里云链接有跨域问题，我的解决方法是在阿里云跨域规则配置中开启GET请求即可

需要禁止打印和下载的在viewer.html和viewer.js文件中加入以下操作
style=“visibility: hidden”
eventBus._on(“print”, webViewerPrint)
在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/7985d621fde94c47993260ffab4e2768.png

在PDF中添加水印

在这个地方注释后添加以下代码，找不到可以搜索这几句
	textLayerDiv.className = "textLayer";
    textLayerDiv.style.width = canvasWrapper.style.width;
    textLayerDiv.style.height = canvasWrapper.style.height;

在这里插入图片描述

  var cover = document.createElement('div');
      cover.className = "cover";
      for (var y = 0; y < 5; y++) {
        for (var x = 0; x < 4; x++) {
          let c = document.createElement('div')
          c.className = "cover"
          c.style.position = 'absolute';
          c.style.left = (10+x/4*100)+'%';
          c.style.top = (10+y/5*100)+'%';
          c.style.transform = "rotate(315deg)";
          c.style.color = "rgba(0, 191, 255, 0.2)";
          c.innerText = text;//text为水印内容，可以在viewer.html中传入，也可以直接替换成固定的字符串如：c.innerText = "这是一个水印";
          cover.appendChild(c);
        }
      }
      if (this.annotationLayer?.div) {
        div.insertBefore(textLayerDiv, this.annotationLayer.div);
        div.appendChild(cover);
      } else {
        div.appendChild(textLayerDiv);
        div.appendChild(cover);
      }