本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-03(402)

2021-04(167)

2021-05(165)

2021-06(97)

2021-07(5)

VUE----移动端在线预览pdf 可上下滚动,大小缩放(pdfh5)

发布于2021-12-05 19:12     阅读(1036)     评论(0)     点赞(16)     收藏(4)


VUE----移动端在线预览pdf 可上下滚动,大小缩放(pdfh5)

在这里插入图片描述

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">&#xe759;</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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

16 0
收藏该文
已收藏

评论内容:(最多支持255个字符)