效果图
1.pdf预览
原理:主要是利用pdfh5这个插件来完成的
使用方法:
1.页面需要有一个容器例子:
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样式: