vue2.0全局组件之pdf详解
网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要为大家详细绍了vue2.0全局组件之pdf的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
目的:像elementUI那样注册全局组件 预览pdf文件
技术支持:使用火狐的pdf.js
准备:新建一个CPdf.vue文件,把火狐demo里面的build里面的pdf.js下载来,并且依赖了elementUI开发的其实就是用了<el-button>
编写:
template
<template> <div 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> / <span v-text="page_count"></span></span> <el-button @click="addscale" icon="plus"></el-button> <el-button @click="minus" icon="minus"></el-button> <el-button id="prev" @click="closepdf">关闭</el-button> </div> <canvas class="canvasstyle" id="the-canvas"></canvas> </div> </div> </template>
js
import PDFJS from '../../../static/pdf/pdf.js' import { mapActions, mapGetters } from 'vuex'; export default { name: 'c-pdf', props: ['pdfurl'], data() { return { pdfDoc: null, //pdfjs 生成的对象 pageNum: 1,// pageRendering: false, pageNumPending: null, scale: 1.2,//放大倍数 page_num: 0,//当前页数 page_count: 0,//总页数 maxscale: 2,//最大放大倍数 minscale: 0.8//最小放大倍数 } }, methods: { renderPage(num) { //渲染pdf let vm = this this.pageRendering = true; let 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() {//上一页 let vm = this if(vm.pageNum <= 1) { return; } vm.pageNum--; vm.queueRenderPage(vm.pageNum); }, next() {//下一页 let vm = this if(vm.pageNum >= vm.page_count) { return; } vm.pageNum++; vm.queueRenderPage(vm.pageNum); }, closepdf() {//关闭PDF this.$emit('closepdf') }, queueRenderPage(num) { if(this.pageRendering) { this.pageNumPending = num; } else { this.renderPage(num); } } }, puted: { ctx() { let id = document.getElementById('the-canvas') return id.getContext('2d'); } }, mounted() { let vm = this PDFJS.getDocument(vm.pdfurl).then(function(pdfDoc_) { //初始化pdf vm.pdfDoc = pdfDoc_; vm.page_count = vm.pdfDoc.numPages vm.renderPage(vm.pageNum); }); } }
style less
.cpdf { position: fixed; : 0; left: 0; background-color: rgba(0, 0, 0, .5); width: 100%; height: 100%; z-index: 99999; display: flex; justify-content: center; align-items: center; .center { text-align: center; height: 100%; overflow: auto; padding-: 20px; .contor { margin-bottom: 10px; } } }
注册到全局:在main.js 引入CPdf.vue
Vue.ponent(CPdf.name, CPdf)
使用:在想预览pdf文件的组件里面
<c-pdf @closepdf="closepdf" v-show="isshowpdf" :pdfurl="testpdfurl"></c-pdf>
data() { return { isshowpdf:false, testpdfurl:'//cdn.mozilla./pdfjs/tracemonkey.pdf' } }, methods: { closepdf(){ this.isshowpdf=false }, }
效果:
npm :有人关注 那么我就发到 npm 上。 地址
本文已被整理到了《》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:纯JS实现简单的日历
下一篇:JavaScript创建对象的七种方式(推荐)
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程