You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.8 KiB
64 lines
1.8 KiB
5 months ago
|
<template>
|
||
|
|
<div class="header_body">
|
||
|
|
<header-nav
|
||
|
|
:slefBack="true"
|
||
|
|
@goBack="goBack"
|
||
|
|
>
|
||
|
|
</header-nav>
|
||
|
|
</div>
|
||
|
|
<div class="m-pdf">
|
||
|
|
<div id="pdf-content" style="width: 98%"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script >
|
||
|
|
import Pdfh5 from "pdfh5";
|
||
|
|
import "pdfh5/css/pdfh5.css";
|
||
|
|
export default {
|
||
|
|
name: "Pdfh5",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
pdfh5: null,
|
||
|
|
// 可引入网络文件或者本地文件
|
||
|
|
pdfUrl: "http://192.168.110.36:85/profile/upload/2024/03/29/40eb1a97ca27c3369370e90632d92db0.pdf", // 如果引入本地pdf文件，需要将pdf放在public文件夹下，引用时使用绝对路径（/：表示public文件夹）
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
console.log("pdf地址",this.$route.query.url)
|
||
|
|
this.pdfUrl = this.$route.query.url;
|
||
|
|
this.initPdf();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initPdf() {
|
||
|
|
// pdfh5实例化时传两个参数：selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件
|
||
|
|
// pdfh5 = new Pdfh5(selector, options) goto初始到第几页，logo设置每一页pdf上的水印
|
||
|
|
this.pdfh5 = new Pdfh5("#pdf-content", {
|
||
|
|
pdfurl: this.pdfUrl,
|
||
|
|
goto: 1
|
||
|
|
// 设置每一页pdf上的水印
|
||
|
|
|
||
|
|
});
|
||
|
|
this.pdfh5.scrollEnable(true); // 允许pdf滚动
|
||
|
|
// 监听pdf准备开始渲染，此时可以拿到pdf总页数
|
||
|
|
this.pdfh5.on("ready", function () {
|
||
|
|
console.log("总页数:" + this.totalNum);
|
||
|
|
});
|
||
|
|
// 监听pdf加载完成事件，加载失败、渲染成功都会触发
|
||
|
|
this.pdfh5.on("complete", (status, msg, time) => {
|
||
|
|
console.log("状态:" + status + "，信息:" + msg + "，耗时:" + time + "毫秒");
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 返回
|
||
|
|
goBack(){
|
||
|
|
this.$router.go(-1)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.m-pdf{
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
|