pdf 在線預覽之 vue-pdf插件

vue-pdf  

支持到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>

效果以下 

 

若是有電子簽章 是顯示不出來的

須要改動源碼 註釋掉type判斷

 

 

效果以下  這樣章就出現了~~~