vue 纯前端预览pdf，纯前端实现pdf加水印下载文件也带水印，防止pdf下载

效果图

 

 

 

1.pdf预览

  原理：主要是利用pdfh5这个插件来完成的

  使用方法：

  1.页面需要有一个容器例子：<div id="demo"></div>

  2.下载pdfh5插件

npm install pdfh5

  (注意：webpack5之后不会下载polyfill 需要手动下载 所以引入pdfh5的时候会报错)

  解决方案：下载 node-polyfill-webpack-plugin

npm install node-polyfill-webpack-plugin

  之后再vue.config.js里面配置

  // 头部引入

  const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

  const { defineConfig } = require('@vue/cli-service')

  module.exports = defineConfig({

    //...

    configureWebpack: {

      plugins: [new NodePolyfillPlugin()],

    }

  })

  3.解决报错之后下面直接使用

  this.pdfh5 = new Pdfh5("#demo", {

    pdfurl: this.url,

  });

  -----另外 需要我们引入css样式 还需要我们自己写一点css样式来修改转成pdf后里面图片过大 再最下面        

 

 

  2.pdf加水印

 

  原理：利用的是将pdf文件转化成二进制文件 再用画图的方式往里面画文字

  主要利用插件：pdf-lib @pdf-lib/fontkit

npm install pdf-lib

npm install @pdf-lib/fontkit

  (注意：这里使用字体的时候需要引入两个字体包再同级目录下的font下的两个包)

  这里面的预览还是用到的pdfh5来预览的

  使用方法：直接调用addWarker(url,warkerName) 方法

  参数说明：url:需要添加水印的pdf文件地址  

           warkerName添加水印字

 

  注意：一半这种都不允许下载 禁止鼠标右击事件就是再我们的元素上加上@contextmenu.prevent事件

  并且加css样式&#x