vue element-ui读取pdf文件的方法

本文实例为大家分享了vue element-ui 读取pdf文件，供大家参考，具体内容如下

添加依赖

npm install pdfjs-dist --save

pdf.vue

<template>
 <div class="app-container">
  <el-dialog
   v-loading="loading"
   :visible.sync="dialogSeeVisible"
   :title="dialogTitle"
   :close-on-click-modal="closeModel"
   modal
   width="80%"
   @close="closeDialog"
   @open="onOpen"
  >
   <el-card class="cpdf">
    <div class="center">
     <div class="contor">
      <el-button @click="prev">上一页</el-button>
      <el-button @click="next">下一页</el-button>
      <span>Page: <span v-text="page_num"/> / <span v-text="page_count"/></span>
      <el-button icon="el-icon-plus" @click="addscale"/>
      <el-button icon="el-icon-minus" @click="minus"/>
      <el-button id="prev" @click="closeDialog">关闭</el-button>
     </div>
     <canvas id="the-canvas" class="canvasstyle"/>
    </div>
   </el-card>
  </el-dialog>
 </div>
</template>
<script>

import PDFJS from 'pdfjs-dist'
PDFJS.GlobalWorkerOptions.workerSrc = './../../../node_modules/pdfjs-dist/build/pdf.worker.js'
import request from '@/utils/request'
import { Message } from 'element-ui'

export default {
 name: 'pdf',
 props: {
  dialogSeeVisible: {
   type: Boolean,
   default: false
  },
  seeFileId: {
   type: Number,
   default: null
  }
 },
 data() {
  return {
   closeModel: false,
   clearable: false,
   urlPrefix: process.env.BASE_API,
   dialogTitle: '浏览技术文档',
   pdfurl: '',
   loading: false,
   pdfDoc: null, // pdfjs 生成的对象
   pageNum: 1, //
   pageRendering: false,
   pageNumPending: null,
   scale: 1.2, // 放大倍数
   page_num: 0, // 当前页数
   page_count: 0, // 总页数
   maxscale: 2, // 最大放大倍数
   minscale: 0.8// 最小放大倍数
  }
 },
 computed: {
  ctx() {
   const id = document.getElementById('the-canvas')
   return id.getContext('2d')
  }
 },
 created() {
  this.onOpen()
 },
 methods: {
  closeDialog(freshList) {
   const _this = this
   _this.pdfurl = ''
   _this.pdfDoc = null
   _this.pageNum = 1
   _this.pageRendering = false
   _this.pageNumPending = null
   _this.scale = 1.2
   _this.page_num = 0
   _this.page_count = 0
   // PDFJS.getDocument(_this.pdfurl).then(function(pdfDoc_) {
   //  _this.pdfDoc = pdfDoc_
   //  _this.page_count = _this.pdfDoc.numPages
   //  _this.renderPage(_this.pageNum)
   // })
   this.$emit('refreshValue', freshList)
  },
  onOpen() {
   const _this = this
   _this.loading = true
   request({ url: '/document/info/preview/' + _this.seeFileId, method: 'get' }).then(
    function(value) {
     if (value.code === 200) {
      _this.pdfurl = _this.urlPrefix + '/' + value.data.fileVirtualPath
      _this.loading = false
      // 初始化pdf
      PDFJS.getDocument(_this.pdfurl).then(function(pdfDoc_) {
       _this.pdfDoc = pdfDoc_
       _this.page_count = _this.pdfDoc.numPages
       _this.renderPage(_this.pageNum)
      })
     } else {
      Message.error(value.message)
      _this.loading = false
      _this.closeDialog()
     }
    }
   )
  },
  renderPage(num) { // 渲染pdf
   const vm = this
   this.pageRendering = true
   const canvas = document.getElementById('the-canvas')
   // Using promise to fetch the page
   this.pdfDoc.getPage(num).then(function(page) {
    var viewport = page.getViewport(vm.scale)
    // alert(vm.canvas.height)
    canvas.height = viewport.height
    canvas.width = viewport.width
    // Render PDF page into canvas context
    var renderContext = {
     canvasContext: vm.ctx,
     viewport: viewport
    }
    var renderTask = page.render(renderContext)
    // Wait for rendering to finish
    renderTask.promise.then(function() {
     vm.pageRendering = false
     if (vm.pageNumPending !== null) {
     // New page rendering is pending
      vm.renderPage(vm.pageNumPending)
      vm.pageNumPending = null
     }
    })
   })
   vm.page_num = vm.pageNum
  },
  addscale() { // 放大
   if (this.scale >= this.maxscale) {
    return
   }
   this.scale += 0.1
   this.queueRenderPage(this.pageNum)
  },
  minus() { // 缩小
   if (this.scale <= this.minscale) {
    return
   }
   this.scale -= 0.1
   this.queueRenderPage(this.pageNum)
  },
  prev() { // 上一页
   const vm = this
   if (vm.pageNum <= 1) {
    return
   }
   vm.pageNum--
   vm.queueRenderPage(vm.pageNum)
  },
  next() { // 下一页
   const vm = this
   if (vm.pageNum >= vm.page_count) {
    return
   }
   vm.pageNum++
   vm.queueRenderPage(vm.pageNum)
  },
  queueRenderPage(num) {
   if (this.pageRendering) {
    this.pageNumPending = num
   } else {
    this.renderPage(num)
   }
  }
 }
}
</script>
<style scoped="" type="text/css">
.cpdf {
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .5);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center {
  text-align: center;
  height: 100%;
  overflow: auto;
  padding-top: 20px;
}
.contor {
  margin-bottom: 10px;
}
.button-group {
 float: right;
 margin-top: 10px;
 margin-bottom: 10px;
}
</style>

到此这篇关于vue element-ui读取pdf文件的方法就介绍到这了。最大的风水是人心，人心好，风水自然好，人心坏，好风水也变坏。更多相关vue element-ui读取pdf文件的方法内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！