vue pdf生成和下载

引用js文件

import PDFJS from 'pdfjs-dist'

下面是自己写的例子：

<template>
  <div>

    <div class="s_pdf">
      <el-input
        class="s_input_name"
        placeholder="请输入姓名"
        v-model="name"
        size="small"
        clearable>
      </el-input>

      <el-input
        class="s_input_idCard"
        placeholder="请输入身份证号"
        v-model="idCard"
        size="small"
        clearable>
      </el-input>

      <el-button style="margin-left: 20px" type="primary" size="mini" icon="el-icon-document"
                 @click="showPdf">生成报告
      </el-button>

      <el-button style="margin-left: 5px" type="warning" size="mini" icon="el-icon-download" :disabled="isdisabled_dp"
                 @click="downloadPdf">导出报告
      </el-button>

      <span style="margin-left: 20px">
          <el-button type="text" :key="index.id" size="mini" @click="setInput(index)" v-for="(info,index) in nameList">{{info.name}}</el-button>
      </span>
      <el-button type="text" @click="clearRecord()" v-show="false">清除搜索记录</el-button>

    </div>

    <div id="pdfdiv" class="pdfdiv">
    </div>

  </div>
</template>

<script>
import PDFJS from 'pdfjs-dist'

export default {
  name: 'c-pdf',
  props: ['pdfurl'],
  data() {
    return {
      name: '',
      idCard: '',
      nameList: [],
      isdisabled_dp: true,
      pdfDoc: null,
      pageNum: 1,
      scale: 1.5,
      url: '',
      showUrl: ''
    }
  },
  created() {
    this.nameList = JSON.parse(window.localStorage.getItem('nameList'))
  },
  methods: {
    /**
     * 清除搜索记录方法
     */
    clearRecord() {
      window.localStorage.removeItem('nameList')
      this.nameList = this.nameList = JSON.parse(
        window.localStorage.getItem('nameList')
      )
    },

    /**
     * 存储搜索记录方法
     */
    setNameList() {
      let info = {
        name: this.name,
        idCard: this.idCard
      }

      if (this.nameList === null) {
        this.nameList = []
        this.nameList.push(info)
      } else {
        if (this.nameList.length > 2) {
          for (let i = 0; i < this.nameList.length; i++) {
            let nameOld = this.nameList[i].name
            let idCard = this.nameList[i].idCard

            if (nameOld !== info.name || idCard !== info.idCard) {
              this.nameList.shift()
              this.nameList.push(info)
            }

            break
          }
        } else {
          for (let i = 0; i < this.nameList.length; i++) {
            let nameOld = this.nameList[i].name
            let idCard = this.nameList[i].idCard
            if (nameOld !== info.name || idCard !== info.idCard) {
              this.nameList.push(info)
            }
            break
          }
        }
      }
      let nameListStr = JSON.stringify(this.nameList)
      window.localStorage.setItem('nameList', nameListStr)
      this.nameList = JSON.parse(window.localStorage.getItem('nameList'))
    },

    /**
     * 点击搜索记录填充输入框
     */
    setInput(index) {
      console.log(index)
      this.name = this.nameList[index].name
      this.idCard = this.nameList[index].idCard
    },

    renderPage(num) {
      let vm = this
      this.pdfDoc.getPage(num).then(function(page) {
        var pdfdiv = document.getElementById('pdfdiv')
        var viewport = page.getViewport(vm.scale)
        var canvas = document.createElement('canvas')
        var ctx = canvas.getContext('2d')

        canvas.height = viewport.height
        canvas.width = viewport.width

        pdfdiv.appendChild(canvas)

        var renderContext = {
          canvasContext: ctx,
          viewport: viewport
        }
        page.render(renderContext)
      })
    },

    /**
     * 查询生成报告
     */
    showPdf() {
      let vm = this
      this.$http
        .get(this.url, {
          params: {
            name: this.name,
            identityCard: this.idCard
          }
        })
        .then(response => {
          console.log(response)

          if (response.data.success === false) {
            this.$message({
              showClose: true,
              message: response.data.msg + '：' + response.data.data.respMsg,
              type: 'warning'
            })
          } else {
            PDFJS.getDocument(this.showUrl).then(function(pdfDoc_) {
              //初始化pdf
              vm.pdfDoc = pdfDoc_
              vm.page_count = vm.pdfDoc.numPages
              for (var i = 0; i < vm.page_count; i++) {
                vm.renderPage(i)
              }
            })
            this.isdisabled_dp = false
            this.setNameList()
            console.log(response)
          }
        })
        .catch(error => {
          console.log(error)
        })
    },

    /**
     * 下载报告
     */
    downloadPdf() {
      this.$http
        .get(this.showUrl, { responseType: 'blob' })
        .then(response => {
          console.log(response)
          const url = window.URL.createObjectURL(new Blob([response.data]))
          const link = document.createElement('a')
          // 返回的header Content-Disposition:attachment; filename=elmeast-report-2018-2.pdf
          let head = response.headers['content-disposition']
          let fname = this.name + '-' + this.idCard + '.pdf'
          link.href = url
          link.setAttribute('download', fname)
          document.body.appendChild(link)
          link.click()
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>


<style scoped>
.s_input_name {
  width: 250px;
}

.s_input_idCard {
  width: 250px;
  margin-left: 5px;
}

.s_pdf {
  /*border:red solid thin;*/
  /*top: 10px;*/
  /*left: 20px;*/
  margin-left: 20px;
  margin-top: 10px;
  margin-right: 20px;
  text-align: center;
  position: relative;
}

.pdfdiv {
  /*left: 20px;*/
  /*width: 100px;*/
  margin: 20px;
  /*border:black solid thin;*/
  text-align: center;
  position: relative;
  /*top: 30px;*/
}
</style>