vue实现pdf在线查看功能 vue-pdf

最新推荐文章于 2024-08-12 10:03:07 发布

张同学爱前端

最新推荐文章于 2024-08-12 10:03:07 发布

阅读量3.2k

点赞数 1

分类专栏： vue-pdf 文章标签： vue.js

本文链接：https://blog.csdn.net/zy_cc/article/details/107688952

版权

vue-pdf 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先用npm安装依赖

　npm install --save vue-pdf

在所需要的的页面中引入

// 在线预览pdf文件
import pdf from 'vue-pdf'

<pdf ref="pdf" :src="pdfUrl" v-for="i in numPages" :key="i" :page='i'>
  </pdf>

data () {
    return {
      numPages: null: '',
      pdfUrl: ``
    }
  },

components: {
  pdf
}

    Taskbook (row) {
      this.$http.get(`url`).then(({
      	data: res
      }) => {
      	if (res.code !== 0) {
      		return this.$message.error(res.msg)
        }
        console.log('查看任务书-->', res)
        if (res.data.length === 0) {
          this.$message({
            message: '未找到PDF文件',
            type: 'warning'
          })
        } else {
        let missionBook = JSON.parse(res.data[0].missionBook)
        this.pdfUrl = `${window.SITE_CONFIG['apiURL']}/attach/download/${missionBook[0].id}?token=${sessionStorage.getItem('token')}`
        this.pdfName = missionBook[0].name
        this.getNumPages()
        }
      }).catch(() => {})
    }
    // 解决pdf只显示第一页的问题
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.pdfUrl)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
      }).catch(err => {
        console.error('pdf 加载失败-->', err)
      })
    }