vue使用pdf.js预览pdf文件加水印，下载pdf文件
项目背景：vue-cli3脚手架pdf.js版本为官方最新稳定版2.8.335pdf.js下载地址：http://mozilla.github.io/pdf.js/getting_started/#download根据自身需求去选择对应版本开始使用一、项目中放置pdf.js的包在项目的public文件夹下，新建一个pdfjs文件夹，将下载下来的build和web文件夹丢进去，目录结构如下：vue-
·
项目背景：
vue-cli3脚手架
pdf.js版本为官方最新稳定版2.8.335
pdf.js下载地址：http://mozilla.github.io/pdf.js/getting_started/#download
根据自身需求去选择对应版本
开始使用
一、项目中放置pdf.js的包
在项目的public文件夹下，新建一个pdfjs文件夹，将下载下来的build和web文件夹丢进去，目录结构如下：
vue-cli3下public文件夹中的内容不参与打包，打包生成的index.html直接可以访问到，放在src文件夹下的js必须通过import或者require才能引入
如果放在src目录下，会报错：
Uncaught SyntaxError: Unexpected token '<'
二、项目中使用
pdf是放在一个dialog弹窗中的，点击按钮，显示弹窗，在弹窗中以iframe的形式嵌入pdfjs中的viewr.html
完整代码：
<template>
<div id="container">
<el-dialog
title="用户手册"
:visible.sync="dialogVisible"
:fullscreen="true"
:append-to-body="true"
:before-close="handleClose"
>
<iframe
style="width:100%;height:100%;"
:src="pdfSrc"
ref="pdfViewr"
allowfullscreen
webkitallowfullscreen
>
</iframe>
</el-dialog>
</div>
</template>
<script>
export default {
props:{
dialogVisible:{
type:Boolean,
default:false
}
},
created(){
},
data() {
return{
//webpack在查找文件时，对于找不到的文件，会去public文件夹中查找，
//前面如果不写成./ 打包后会报错
//这里后端返回的是浏览器直接可以访问的在线地址，不是文件流形式
pdfSrc:"./pdfjs/web/viewer.html?file=后端返给你的pdf地址",
}
},
methods:{
handleClose(){
this.$emit("closePdf")
}
}
}
</script>
<style lang="scss">
.is-fullscreen{
.el-dialog__body{
height:calc(100% - 53px);
}
}
</style>
注意：
此时已经完成一半了，打开弹窗viewr.js会抛出跨域错误，
"file origin does not match viewer's"
需要去下载下来的web文件夹下的viewer.js中修改一下源码：
我选择直接注释掉这个函数
在viewr.js中直接搜索 validateFileURL, 注释掉就好了。
此时，我们的pdf就可以正常出来了
像这样，可以进行下载 打印 等一系列操作
预览加水印
需求是，要用户名 + 打开的时间水印
注意：
下载下来的pdf文件是不带水印的，如果要下载带水印的pdf只能加个下载按钮，点击时让后端返回带水印的文件，前端执行下载操作
预览加水印同样是去修改viewer.js文件
添加的代码如下：
在viewer.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; //这个是根据需求加的用户名+时间，可以自己改
if(localStorage.name){
watermark_txt = localStorage.name + '-' + 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.js文件中找到这一行，把上面的代码都加进去水印就出来啦
textLayer = this.textLayerFactory.createTextLayerBuilder(textLayerDiv, this.id - 1, this.viewport, this.textLayerMode === _ui_utils.TextLayerMode.ENABLE_ENHANCE, this.eventBus);
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献6条内容
所有评论(0)