vue2.0全局组件之pdf详解_vue2vue-pdf资源-CSDN文库

59 浏览量 2021-01-21 12:45:31 上传评论收藏 129KB PDF 举报

资源推荐

资源详情

资源评论

vue2.0全局组件之全局组件之pdf详解详解

目的：像elementUI那样注册全局组件预览pdf文件

技术支持：使用火狐的pdf.js http://mozilla.github.io/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

};

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38612304

粉丝: 4
资源: 924

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip