<template>
<el-container>
<el-main id="myIframe">
<pdf :page="pageNum" :src="fileUrl" @progress="loadedRatio = $event" @num-pages="totalPages=$event"></pdf>
</el-main>
<el-footer style="text-align:center">
<el-button-group>
<el-button round type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
<el-button round type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
<div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ totalPages }}</div>
</el-footer>
</el-container>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: "SHOWRESULTS",
components: {
pdf
},
data() {
return {
pageNum: 1, //显示第一页
loadedRatio: 0, // 当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了
totalPages: 1, //pdf总页数
fileUrl: "",
};
},
computed:{
baseUrl() {
return this.$constants.baseUrl;
},
},
methods: {
//pdf地址urlId赋值
setValue(data) {
var sub = data.substring(6)
this.fileUrl = this.baseUrl + sub
},
// 上一页
prePage() {
let page = this.pageNum
page = page > 1 ? page - 1 : this.totalPages
this.pageNum = page
},
// 下一页
nextPage() {
let page = this.pageNum
page = page < this.totalPages ? page + 1 : 1
this.pageNum = page
},
//获取pdf总页数
getTotalPages() {
let loadingTask = pdf.createLoadingTask(this.fileUrl)
loadingTask.promise.then(pdf => {
this.totalPages = pdf.numPages
})
},
//获取水印
setWatermarkContent(content) {
let id = "1.23452384164.1223412415";
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id));
}
let ele = document.createElement("canvas");
ele.width = 250;
ele.height = 150;
let getCanvas = ele.getContext("2d");
getCanvas.rotate((-20 * Math.PI) / 180);
getCanvas.font = "20px Vedana";
getCanvas.fillStyle = "rgba(200, 200, 200, 0.35)";
getCanvas.textAlign = "center";
getCanvas.textBaseline = "Middle";
getCanvas.fillText(content, ele.width / 6, ele.height / 2);
// getCanvas.fillText(content2, ele.width / 6, (ele.height + 40) / 2)
let div = document.createElement("div");
div.id = id;
div.style.pointerEvents = "none";
div.style.top = "82px";
div.style.left = "0px";
div.style.position = "fixed";
div.style.zIndex = "100000";
div.style.width = document.documentElement.clientWidth + "px";
div.style.height = document.documentElement.clientHeight + "px";
div.style.background =
"url(" + ele.toDataURL("image/png") + ") left top repeat";
document.getElementById("myIframe").appendChild(div);
return id;
},
},
mounted() {
this.setWatermarkContent("123456789");
window.onresize = () => {
this.setWatermarkContent("123456789");
};
//赋值pdf地址
this.setValue(this.$route.query.url);
//获取pdf总页数
/* this.getTotalPages(); */
},
};
</script>
<style scoped>
.el-container {
height: 100%;
}
.el-main {
height: auto;
}
.tips-text {
color: rgba(0, 0, 0, 0.45);
font-size: 16px;
}
.tips-text i {
color: #15559a;
}
#myIframe {
height: 100%;
text-align: center;
}
</style>
更多推荐
使用vue-pdf 给pdf加水印
发布评论