pdf 在线预览之 vue-pdf插件

Z时代
2024-01-10
分类：综合

vue

支持到ie11
npm安装:npm install --save vue-pdf

组件template:

<div class="show-pdf">
    <div>
      <pdf
        v-if="pdfSrc"
        :src="pdfSrc"
        :page="currentPage"
        @num-pages="pageCount=$event"
        @page-loaded="currentPage=$event"
        @loaded="loadPdfHandler"
      ></pdf>
    </div>
    <p class="arrow2" v-if="pdfSrc">
      <span @click="changePdfPage(0)" :class="{grey: currentPage==1}">上一页</span>
      {{currentPage}} / {{pageCount}}
      <span
        @click="changePdfPage(1)"
        :class="{grey: currentPage==pageCount}"
      >下一页</span>
    </p>
  </div>

<script>
import pdf from "vue-pdf";
export default {
  name: "Pdf",
  components: {
    pdf
  },
  props: ["dochref", "doctype"],
  watch: {
    dochref(val) {
      console.log("pdfSrc");
      console.log(val);
      this.pdfSrc = val;
    },
    pdfSrc(val) {},
    doctype(typeval) {
      this.typeValue = typeval;
    }
  },
  data() {
    return {
      typeValue: "",
      pdfSrc: "",
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      numPages: 1,
      activeIndex: 0
    };
  },
  methods: {
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1; // 加载的时候先加载第一页
    }
  },
  mounted: function() {
    this.pdfSrc = "";
    this.pdfSrc = this.dochref;
  }
};
</script>

自己的页面中引用

<template>
  <div class="hello">
     <showPdf
                      v-if="docInfo.type == 'pdf'"
                      :doctype="docInfo.type"
                      :dochref="docInfo.href"
                    ></showPdf>
  </div>
</template>
<script>
import showPdf from "./show-pdf-word/show-pdf";
export default {
  name: 'HelloWorld',
  components: {
    showPdf
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
       docInfo: {
        type: "pdf",
        href: "http://125.35.91.158:8099/group1/M00/02/AF/wKgAplxrloqAdR6NAAcOcVILFv0518.pdf"
      },
    }
  },
  mounted(){
  }
}
</script>