您的位置：首页 > Web前端 > Vue.js

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

2019-12-03 18:38 2496 查看

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

相关文章推荐

新的分享

章节导航