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


Posted in Javascript onNovember 26, 2019

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
Vue中v-for的数据分组实例
Mar 07 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 #Javascript
jQuery实现轮播图效果
Nov 26 #jQuery
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 #Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 #Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 #Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 #Javascript
vue中keep-alive,include的缓存问题
Nov 26 #Javascript
You might like
PHP中路径问题的解决方案
2006/10/09 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
JavaScript Split()方法
2015/12/18 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
python3.7 的新特性详解
2019/07/25 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
介绍一下#error预处理
2015/09/25 面试题
某公司C#程序员面试题笔试题
2014/05/26 面试题
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers