发布于2021-12-05 19:12 阅读(1840) 评论(0) 点赞(16) 收藏(4)
1.安装需要的工具包
npm i --save pdfh5
2.写入组件
<template>
<div :class="$style.pdf" v-show="visible">
<div @click="visible = false" :class="$style.iconContain">
<span :class="$style.iconClose" class="xiaoicon"></span>
</div>
<div id="preViewPdf"></div>
</div>
</template>
<script>
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
export default {
name: "pdfH5",
data() {
return {
visible: false,
pdfh5: null,
};
},
methods: {
openPdf(url) {
this.visible = true;
//实例化
this.pdfh5 = new Pdfh5("#preViewPdf", {
pdfurl: url,
});
},
},
};
</script>
<style scoped module>
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.pdf {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000;
overflow: hidden;
z-index: 200;
}
.iconContain {
position: fixed;
top: 0.426667rem;
right: 0.426667rem;
width: 0.64rem;
height: 0.64rem;
line-height: 0.64rem;
text-align: center;
background: rgba(0, 0, 0, 0.4);
z-index: 200;
border-radius: 50%;
}
.iconClose {
display: block;
color: #fff;
}
</style>
3.pdf展示页面添加组件
<template>
<PreviewpdfH5 ref="PreviewpdfH5"></PreviewpdfH5>
</template>
<script>
import PreviewpdfH5 from "../components/Pdf.vue";
export default {
name: "Reportdet",
components: { PreviewpdfH5 },
data() {
return {
pdfSrc: "", // pdf文件地址this.$route.query.url
id: "", //报告id
};
},
mounted() {
this.pdfSrc = this.$route.params.url || ""; //获取pdf路径
this.id = this.$route.params.id || "";
this.$refs.PreviewpdfH5.openPdf(this.pdfSrc);
this.changeType(this.id);
},
methods: {
// 判断报告是否已读
changeType(id) {
this.$axios
.get(this.$myStore.urlLink + "changeType", {
params: {
id: id,
},
})
.then((res) => {});
},
},
};
</script>
<style scoped>
</style>
参考链接:https://blog.csdn.net/baidu_39067385/article/details/117876306
原文链接:https://blog.csdn.net/heavenz19/article/details/121695072
作者:前端霸主
链接:http://www.qianduanheidong.com/blog/article/248451/6e08d427a8f735dd4f70/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!