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 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
vue增删改查的简单操作
Jul 15 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
vue iview多张图片大图预览、缩放翻转
Jul 13 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
基于vue实现探探滑动组件功能
May 29 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的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
js中的闭包实例展示
2018/11/01 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
vue中实现回车键登录功能
2020/02/19 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
python strip()函数 介绍
2013/05/24 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
在python中用url_for构造URL的方法
2019/07/25 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
技术总监的工作职责
2013/11/13 职场文书
家长对小学生的评语
2014/01/28 职场文书
高三学习决心书
2014/03/11 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
药店促销活动策划方案
2014/08/24 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
员工手册董事长致辞
2015/07/29 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL