vue 预览、下载pdf

1.下载pdf文件

因为pdf文件是传到oss上的，地址是下载地址，所可以使用a标签下载，但不能使用iframe等方法预览

<el-button class="download" v-if="list&&list.length>0" @click="downloadFile(fileList)" type="text">下载</el-button>

downloadFile(fileList){
   window.location.href = fileList[0].url
   this.$message.success('下载成功！');
},

2.使用vue-pdf预览pdf文件

1.安装vue-pdf

npm install --save vue-pdf

2.使用

<template>
  <div class="pdf">
    <pdf 
      ref="pdf"
      :src="pdfUrl"
      :page="pageNum"
      :rotate="pageRotate"
      @password="password"
      @progress="loadedRatio = $event"
      @page-loaded="pageLoaded($event)"
      @num-pages="pageTotalNum=$event" 
      @error="pdfError($event)"
      @link-clicked="page = $event">
    </pdf>
    <div class="pdf-tab">
      <el-button type="text" class="btn-def btn-pre" @click.stop="firstPage" :disabled="pageNum===1">首页</el-button>
      <el-button type="text" class="btn-def btn-pre" @click.stop="prePage" :disabled="pageNum===1">上一页</el-button>
      <el-button type="text" class="btn-def btn-next" @click.stop="nextPage" :disabled="pageNum===pageTotalNum">下一页</el-button>
      <el-button type="text" class="btn-def btn-pre" @click.stop="lastPage" :disabled="pageNum===pageTotalNum">尾页</el-button>
      <el-button type="text" class="btn-def" @click.stop="clock">顺时针</el-button>
      <el-button type="text" class="btn-def" @click.stop="counterClock">逆时针</el-button>
      <el-button type="text" class="btn-def" @click.stop="pdfPrintAll">全部打印</el-button>
      <el-button type="text" class="btn-def" @click.stop="pdfPrint">部分打印</el-button>
    </div>
    <div class="pdf-page">{{pageNum}}/{{pageTotalNum}}</div>
    <!-- <div>进度：{{loadedRatio}}</div>
    <div>页面加载成功: {{curPageNum}}</div> -->
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  name: 'Pdf',
  components:{
      pdf
  },
  props: {
    pdfUrl: {
      type: String
    }
  },
  data(){
      return {
      pageNum:1,
      pageTotalNum:1,
      pageRotate:0,
      // 加载进度
      loadedRatio:0,
      curPageNum:0,
      }
  },
  mounted: function() {
  },
  methods: {
    firstPage() {
      this.pageNum = 1
    },
    prePage(){
      var p = this.pageNum
      p = p>1?p-1:this.pageTotalNum
      this.pageNum = p
    },
    nextPage(){
      var p = this.pageNum
      p = p<this.pageTotalNum?p+1:1
      this.pageNum = p
    },
    lastPage() {
      this.pageNum = this.pageTotalNum
    },
    clock(){
      this.pageRotate += 90 
    },
    counterClock(){
      this.pageRotate -= 90 
    },
    password(updatePassword, reason) {
      updatePassword(prompt('password is "123456"'))
    },
    pageLoaded(e){
      this.curPageNum = e
    },
    pdfError(error){
      console.error(error)
    },
    pdfPrintAll(){
      this.$refs.pdf.print()
    },
    pdfPrint(){
      this.$refs.pdf.print(100,[1,2])
    },
  }
}
</script>

<style lang="scss" scoped>
  .pdf-tab {
    display: flex;
  }
  .pdf-page {
    text-align: right;
  }
</style>