下载pdf.js
下载pdf.js有两种方式，直接下载压缩包或者npm安装，此处只说明压缩包的使用方法。
下载地址：mozilla.github.io/pdf.js/gett…
添加水印
- 解压下载好的文件，把文件放在public目录下，public目录下的文件不参与打包
使用pdfjs->web目录下的viewer.html进行预览：
-
vue页面中使用（后端返回文件流）
（1） waterPDF.vue
<template>
<div style="width: 100%; height: 100%">
<!-- pdfjs中viewer.html嵌入iframe中 -->
<iframe
style="width: 100%; height: 100%"
ref="pdfWater"
:src="pdfSrc">
</iframe>
</div>
</template>
<script>
import { preview } from '@/utils/download'
export default {
data() {
return {
pdfSrc: './pdfjs/web/viewer.html',
};
},
created() {
this.fileId = this.$route.query.fileId
preview(this.fileId).then(res => {
// 拼接文件地址
this.pdfSrc = `./pdfjs/web/viewer.html?file=${res}`
}).catch((err) => {
})
},
}
</script>
（2） download.js中实现preview方法
export function preview(fileId, filename, responseType) {
return new Promise((resolve, reject) => {
request({
method: 'get',
params: {
fileId,
},
url: '/file/download',
responseType: 'blob',
timeout: 0
}).then(res => {
let url = getUrl(res, filename) || ''
resolve(url)
}).catch((error) => {
reject(error)
});
})
}
function getUrl(res, fileName) {
let blob = new Blob([res.data], {type: 'application/pdf;charset-UTF-8'})
let url = URL.createObjectURL(blob)
return url
}
- 添加水印 添加水印需要在pdf.js中的web->viewer.js中添加代码，在js中找到textLayer = this.textLayerFactory.createTextLayerBuilder(textLayerDiv, this.id - 1, this.viewport, this.textLayerMode === _ui_utils.TextLayerMode.ENABLE_ENHANCE, this.eventBus);这行代码，在这行代码前面添加以下代码
//给文件添加水印
var cover = document.createElement('div');
cover.className = "cover"
function formateTime(){
const time = new Date();
const year = time.getFullYear();
const month = time.getMonth() + 1;
const day = time.getDate();
const hour = time.getHours();
const minute = time.getMinutes();
return year+"/"+month+"/"+day+" "+hour+":"+minute
}
let watermark_txt; //这个是根据需求加的用户名+时间，可以自己改
let username = localStorage.getItem('username')
if(username){
watermark_txt = username + '-' + formateTime();
}else{
watermark_txt = `${formateTime()}`
}
var defaultSettings = {
//watermark_txt: window.parent.waterMark,
// watermark_img: "",
watermark_txt,
watermark_x: 0,//水印起始位置x轴坐标
watermark_y: 0,//水印起始位置Y轴坐标
watermark_rows: 16,//水印行数
watermark_cols: 16,//水印列数
watermark_x_space: 100,//水印x轴间隔
watermark_y_space: 100,//水印y轴间隔
watermark_color: 'red',//水印字体颜色
watermark_alpha: .3,//水印透明度
watermark_fontsize: 12,//水印字体大小
watermark_font: '微软雅黑',//水印字体
watermark_width: 140,//水印宽度
watermark_height: 60,//水印长度
watermark_angle: 30,//水印倾斜度数
};
var oTemp = document.createDocumentFragment();
//获取页面最大宽度
var page_width = parseInt(canvasWrapper.style.width);
//获取页面最大长度
var page_height = parseInt(canvasWrapper.style.height);
//如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
}
//如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {
defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
}
var x;
var y;
for (var i = 0; i < defaultSettings.watermark_rows; i++) {
y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
for (var j = 0; j < defaultSettings.watermark_cols; j++) {
x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
var mask_div = document.createElement('div');
var mask_img = document.createElement('img');
mask_div.id = 'mask_div' + i + j;
mask_div.className = 'mask_div';
mask_img.className = 'mask_img';
mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
mask_img.src = defaultSettings.watermark_img;
//设置水印div倾斜显示
//注意看这里加了图片水印
if(defaultSettings.watermark_img == "" || !defaultSettings.watermark_img){
mask_div.remove(mask_img);
}else{
mask_div.append(mask_img);
}
mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.visibility = "";
mask_div.style.position = "absolute";
//奇偶行错开，这样水印就不对齐，显的不呆板
if (i % 2 != 0) {
mask_div.style.left = x + 100 + 'px';
} else {
mask_div.style.left = x + 'px';
}
mask_div.style.top = y + 'px';
mask_div.style.overflow = "hidden";
mask_div.style.opacity = defaultSettings.watermark_alpha;
mask_div.style.fontSize = defaultSettings.watermark_fontsize;
mask_div.style.fontFamily = defaultSettings.watermark_font;
mask_div.style.color = defaultSettings.watermark_color;
mask_div.style.textAlign = "center";
mask_div.style.width = defaultSettings.watermark_width + 'px';
mask_div.style.height = defaultSettings.watermark_width + 'px';
mask_img.style.width = defaultSettings.watermark_width + 'px';
mask_img.style.height = defaultSettings.watermark_height + 'px'; //这里可以控制水印大小
// mask_div.style.zIndex = '-99';
mask_div.style.display = "block";
oTemp.appendChild(mask_div);
}
}
cover.appendChild(oTemp);
//这里结束
if (this.annotationLayer && this.annotationLayer.div) {
div.insertBefore(textLayerDiv, this.annotationLayer.div);
//水印
div.appendChild(cover);
} else {
div.appendChild(textLayerDiv);
//水印
div.appendChild(cover);
}
if (this.annotationLayer?.div) {
div.insertBefore(textLayerDiv, this.annotationLayer.div);
} else {
div.appendChild(textLayerDiv);
}
//水印
var cover = document.getElementsByClassName('cover');
for (var i = 0, len = cover.length; i < len; i++) {
cover[i].style.width = canvasWrapper.style.width;
cover[i].style.height = canvasWrapper.style.height;
}
//加水印结束
禁用打印、下载、保存、复制粘贴等功能
- 隐藏工具栏上的打印和下载按钮(viewer.html)
（1）修改viewer.html文件，添加style样式，搜索id = "toolbarViewerRight" 标签，设置打印和下载按钮隐藏
（2）viewer.js文件，注释以下注释的内容
（3）viewer.html增加样式
<style type="text/css" media="print">
* { display: none; }
</style>
（4）注释以上内容后只是样式上看不到了，但是用户还可以通过鼠标右键选择打印、保存等功能。需要另外处理。
a. 在viewer.html中增加js禁用鼠标右键弹出功能菜单、禁止复制粘贴等功能。在body内容最后加入
<script>
// 直接禁用右键
document.oncontextmenu = function(ev){
return false;//阻止默认事件
}
// 禁止复制粘贴
document.oncopy = function(ev){
return false;//阻止默认事件
}
document.oncut = function(ev){
return false;//阻止默认事件
}
</script>
