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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
JavaScript实现表单验证功能
Dec 09 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
php.ini 中文版
2006/10/28 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
php class类的用法详细总结
2013/10/17 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
Python和php通信乱码问题解决方法
2014/04/15 Python
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
python的json包位置及用法总结
2020/06/21 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
科室工作的个人自我评价
2013/10/30 职场文书
大学团支书的自我评价分享
2013/12/14 职场文书
应届毕业生自我鉴定范文
2013/12/27 职场文书
党员干部承诺书范文
2014/03/25 职场文书
团队精神口号
2014/06/06 职场文书
统计专业自荐书
2014/07/06 职场文书
我的中国梦主题班会
2015/08/14 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
人力资源部工作计划
2019/05/14 职场文书
浅谈Python协程asyncio
2021/06/20 Python
一文搞懂Python Sklearn库使用
2021/08/23 Python
Ruby处理CSV数据方法详解
2022/04/18 Ruby
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python