<template>
<div>
<div class="xlsx-content">
<div class="btnPdf">
<button @click="viewpdf">预览pdf</button>
<button @click="currenNum">查看当前页数</button>
<button @click="addWarker">pdf加水印</button>
<button @click="downPdf">下载pdf</button>
</div>
<div class="pdf" @>
<div ></div>
</div>
</div>
</div>
</template>
<script>
import Pdfh5 from "pdfh5";
import "pdfh5/css/";
import fontkit from "@pdf-lib/fontkit";
import {
degrees,
PDFDocument,
rgb
} from "pdf-lib";
export default {
components: {},
data() {
return {
url: "自己输入pdf地址",
pdfh5: null,
};
},
methods: {
// 预览pdf
viewpdf() {
( =
"自己输入pdf地址"),
(this.pdfh5 = new Pdfh5("#demo", {
pdfurl: ,
}));
this.("render", function (status, msg, time) {
(5);
});
},
// 获取当前进度
currenNum() {
(this.pdfh5, this.); //这里获取的就是进度
},
// 添加水印
addWarker(url, warkerName) {
url = '自己输入pdf地址'
warkerName = '水印文字'
let that = this;
changeBlob().then((res) => {
().then((rel) => {
// 获取arrauBuffer文件
viewmodifyPdf(rel);
});
});
//地址转文件
function changeBlob() {
return new Promise((resolve) => {
const xhr = new XMLHttpRequest();
("GET", url, true);
= "blob";
= () => {
if ( === 200) {
resolve();
}
};
();
});
}
// 预览水印文件
async function viewmodifyPdf(file) {
// 将arrayBuff文件加载pdf文件
const pdfDoc = await (file);
// 引入自定义字体
let url = require("./font/Alibaba_PuHuiTi_2.0_55_Regular_85_Bold.ttf");
const fontBytes = await fetch(url).then((res) => ());
// 自定义字体挂载
(fontkit);
const customFont = await (fontBytes);
// 获取文档所有页
const pages = ();
// 文字渲染配置
for (let i = 0; i < ; i++) {
const noPage = pages[i];
const {
width,
height
} = ();
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 3; j++) {
(warkerName, {
x: 230 * j,
y: (height / 4) * i,
size: 16,
font: customFont, //这里使用的是自定义字体
color: rgb(0.46, 0.53, 0.6),
rotate: degrees(-45),
opacity: 0.3,
});
}
}
}
// 获取水印文件
const pdfBytes = await ();
let blobData = new Blob([pdfBytes], {
type: "application/pdf;Base64"
});
= (blobData) + "#toolbar=0";
that.pdfh5 = new Pdfh5("#demo", {
pdfurl: ,
});
}
},
downPdf() {
this.("test");
},
},
};
</script>
<style lang="scss" scoped>
.pdf {
width: 400px;
height: 500px;
}
// 因为是禁止下载 所以页面也不允许右击保存
img {
pointer-events: none;
}
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style><style>
/* 解决pdfh5内部图片太大的问题 */
.pdfjs .pdfViewer {
position: relative;
top: 0;
left: 0;
width: 100% !important;
padding: 10px 8px;
}
.pdfjs .pdfViewer .pageContainer {
width: 100% !important;
margin: 0px auto 8px auto;
position: relative;
overflow: visible;
-webkit-box-shadow: darkgrey 0px 1px 3px 0px;
-moz-box-shadow: darkgrey 0px 1px 3px 0px;
box-shadow: darkgrey 0px 1px 3px 0px;
background-color: white;
box-sizing: border-box;
}
.pdfjs .pdfViewer .pageContainer img {
width: 100% !important;
height: 100% !important;
position: relative;
z-index: 100;
pointer-events: none;
/* user-select:none; */
}
</style>