步骤

1. 安装依赖

npm install --save vue-pdf

2. 在需要的页面,和定义组件一样那种 引入、注册,使用插件

import pdf from 'vue-pdf'

components:{
      pdf
},

export default {
    data(){
      return {
            numPages:0,
            pdfSrc:"",

        }
    }
}

3.页面里使用

<pdf 
    v-for="(item,index) in numPages" 
    :key="item" 
    :src="pdfSrc" 
    :page="item" 
    ref="pdf">
</pdf>

4.触发获取PDF的方法

getPdf(item) {
        this.pdfSrc = ""
        let p = {}
        axios({
          url:'',
          method:"post",
          params:p,
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          responseType: 'blob',
        }).then(res=>{
          const blob = new Blob([res.data],{
            type:"application/pdf;charset=utf-8"
          })
          this.pdfSrc = window.URL.createObjectURL(blob)
          let loadignTask = pdf.createLoadingTask(this.pdfSrc)
          loadignTask.promise.then(pdf=>{
            this.numPages = pdf.numPages
          })
        }).catch(e => {
            this.$message({
              message:'查看预览失败',
              type:'error'
            })
        })
 },
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐