移动端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转换器