移動端pdf預覽---vue-pdf

<template>
  <div class="mainBody">
    <!-- <div v-if="isLoading" class="loading">loading</div> -->
    <div v-if="isLoading" class="mask">
      <loading size="24px" vertical>加載中...</loading>
    </div>
    <div class="main-content">
      <div class="downLoad" @click="downLoad">點我下載</div>
      <pdf
        v-for="i in numPages"
        :key="i"
        :src="src" // promise對象
        :page="i"
        class="pdfItem"
        @page-loaded="pageLoaded"
      />
    </div>
  </div>
</template>

　　

　　

<script>
import pdf from 'vue-pdf/src/vuePdfNoSssNoWorker'
import { mapActions } from 'vuex'
import { Loading } from 'vant'
export default {
  name: 'PdfPreview',
  components: { pdf, Loading },
  data() {
    return {
      src: null,                 // promise對象
      srcUrl: '',                // 原始pdf的路徑
      numPages: undefined,       // pdf的總頁數
      isLoading: true            // 是否加載中
    } 
  },
  created() {
    // 獲取pdf的路徑 將pdf的路徑賦值給src
    this.srcUrl = decodeURIComponent(this.$route.params.pdfUrl)
  },
  activated() {
    this.setTitle()
  },
  mounted() {
    // this.src = pdf.createLoadingTask('http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf')
    this.src = pdf.createLoadingTask(this.srcUrl) // src是一個promise對象
    this.src.then(pdf => {
      this.numPages = pdf.numPages
    })
  },
  methods: {
    ...mapActions(['setHeader']),
    setTitle() { // 設置標題
      this.setHeader({
        title: 'pdf預覽',
        leftOpt: {
          preventBack: true
        },
        leftClick: () => {
          this.backHome()
        }
      })
    },
    backHome() {
      this.$router.go(-1)
    },
    downLoad() {
      window.open(this.srcUrl) // 點擊下載的時候，瀏覽器打開pdf
    },
   // 核心代碼 等pdf頁數加載完成的時候，隱藏加載框
    pageLoaded(num) {
      if (num === this.numPages) {
        this.isLoading = false
      }
    }
  }
}
</script>


<style lang="scss" scoped>
.mainBody {
  min-height: 100vh;
  background: #eeeeee;
  position: relative;
}
.pdfItem {
  background: #ffffff;
  // margin: .15rem;
}
// 加載框
.mask {
 width: 100vw;
 height: 100%;
 position: relative;
  .van-loading {
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
  }
}
.main-content {
  margin: 0 .2rem .2rem .2rem;
  /deep/ span {
    margin-bottom: .2rem;
  }
  .downLoad {
    padding-right: 0.4em;
    font-size: .3rem;
    font-weight: bold;
    line-height: 0.4rem;
    text-align: right;
  }
}

</style>

　　

 

　

 

　　

　　

 

 

PDF   [ˌpiː diː ˈef]   詳細 X

基本翻譯

n. 可移植文檔格式（Portable Document Format）

abbr. 概率密度函數（Probability Density Function）

網絡釋義

PDF: 可移植文檔格式

pdf zilla: 限時免費中

PDF Converter: PDF轉換器