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

本文实例为大家分享了vueelement-ui读取pdf文件，供大家参考，具体内容如下添加依赖npminstallp

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。