vue——预览PDF

下载插件

npm install --save vue-pdf

创建组件

<template>
  <div class="ins-submit-docs-content ins-submit-docs-pdf">
    <div v-if="loading" style="position: absolute; top: 40%; width: 100%;text-align: center;">
      <el-loading type="spinner" color="#fc8955" />
    </div>
    <el-empty description="文档加载失败" v-if="loadingError" />
    <div v-show="numPages <= 50">
      <pdf ref="morePDF" :src="src" :page="i" v-for="i in numPages" :key="i"></pdf>
    </div>
    <div v-show="numPages > 50">
      <pdf ref="PDF" :src="src" :page="currentPage" @num-pages="numPages=$event" @loaded="loadPdfHandler"></pdf>
      <div class="ins-pdf-button-box">
        <span @click.stop="prePage">上一页</span>
        <span>{{currentPage}}/{{numPages}}</span>
        <span @click.stop="nextPage">下一页</span>
      </div>
    </div>
  </div>
</template>

<script>

import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js';


export default {
  name : 'ins-docs-pdf',
  props : {
    src : {
      type : String,    //默认值，选中值
      default : ''
    }
  },
  data(){
    return {
      loading : true,    //加载中
      loadingError : false,    //加载失败
      numPages : 0,        //分页
      currentPage : 1, //当前显示页数
    }
  },
  watch : {
    src : {
      deep : true,
      immediate: true,
      handler(val){
        if(val){
          this.getPDFnums(val)
        }
      }
    }
  },
  components: {
    pdf
  },
  methods:{
    //计算pdf页码总数
    getPDFnums(url) {
      this.loading = true
      //let loadURL = pdf.createLoadingTask(url)
      let loadURL = pdf.createLoadingTask({
        url: url,//你的pdf地址
        CMapReaderFactory
      })

      loadURL.promise.then(pdf => {
        this.numPages = pdf.numPages
        this.currentPage = 1
        this.$set(this, 'docsPDF.numPages', pdf.numPages)
        this.loading = false
      }).catch(err => {
        this.loading = false;
        this.loadingError = true;
      })
    },

    // 上一页
    prePage() {
      var page = this.currentPage
      page = page > 1 ? page - 1 : this.numPages
      this.currentPage = page
    },

    // 下一页
    nextPage() {
      var page = this.currentPage
      page = page < this.numPages ? page + 1 : 1
      this.currentPage = page
    },

    // 回调
    loadPdfHandler(e) {
      this.currentPage = e
    }
  }
}
</script>

<style scoped>

</style>

父类引用

<el-table-column label="总结报告" align="center" prop="disasterSummarize" min-width="150px" show-overflow-tooltip>
  <template slot-scope="scope">
    <el-link @click="previewFile('http://localhost:8080' + scope.row.disasterSummarize)">{{ scope.row.disasterSummarize }}</el-link>
  </template>
</el-table-column>

<el-dialog title="文件预览" :visible.sync="fileOpen" width="800px" append-to-body>
  <pdf :src="src" style="width:100%" ref="pdf"></pdf>
</el-dialog>
    
<script>
import pdf from '@/components/PDF/index'

export default {
  name: "Disaster",
  data() {
    return {
      pdfUrl: '',
      src: '',
      fileOpen:false,
      //......
    };
  },
  components: {
  //....
    pdf
  },
  methods: {
    previewFile (file) {
      this.src = file
      console.log(file);
      // // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
      // this.src = pdf.createLoadingTask(this.pdfUrl)
      this.fileOpen = true
    },
    //......
  }
};
</script>