vue2.0使用vue-pdf(简单版本)

1.引入vue-pdf(vue-pdf版本:4.3.0,vue版本:2.6.14)

npm install --save vue-pdf

2.引入本地文件(放public文件夹下用于测试。后期用接口返回的地址)

111.pdf:自己随意生成的一个

3.页面按需引入

<script>
import Pdf from "vue-pdf"
export default {
  components: { Pdf }
}
</script>

4.完整代码

pdfShow.vue

<template>
  <div>
    <div class="tools">
      <el-button type="primary" @click.stop="prePage">上一页</el-button>
      <el-button type="primary" @click.stop="nextPage">下一页</el-button>
      <el-button type="primary">{{ currentPage }}/{{ pageCount }}</el-button>
      <el-button type="primary" @click.stop="scaleD">放大</el-button>
      <el-button type="primary" @click.stop="scaleX">缩小</el-button>
     
    </div>
    <div class="pdf">
       <!-- page当前显示的页数 progress当前页面加载进度,范围0-1,等于1时代表当前页完全加载完成,page-loaded页面加载成功的回调函数 num-pages总页数 -->
    <pdf 
           ref="pdf"
           :src="url"
           :page="currentPage"
           @num-pages="pageCount=$event"
           @page-loaded="currentPage = $event"
           @loaded="loadPdfHandler"
           @progress="loadedRatio = $event">
         </pdf>
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  name: 'HelloWorld',
  components:{
        pdf,
  },
  props: {
    msg: String
  },
  data(){
    return {
      // url:"http://221.2.195.94:8072/group1/M00/00/15/DAoMrmT3RvqAc0ifAKewIsM7DXk324.pdf",
      url:"111.pdf",
      currentPage:0,//pdf页码
      pageCount:0,//pdf文件总页数
      scale:100,//开始的时候默认和容器一样大,即宽高都是1000%
      navPage:1,//跳转的页数
    }
  },
  mounted(){
  },
  methods:{
    //上一页函数
    prePage(){
      if (this.currentPage > 1) {
        this.currentPage--;
      }else{
        this.$message.warning("已经是第一页")
      }
    },
    //下一页函数
    nextPage(){
      if (this.currentPage <this.pageCount) {
        this.currentPage++;
      }else{
        this.$message.warning("已经是最后一页")
      }
    },
    //pdf加载
    loadPdfHandler(){
      this.currentPage = 1; // 加载的时候先加载第一页
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
      this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";
    },
    //放大
    scaleD(){
      if(this.scale == 100){
        return this.$message.warning("已经是最大咯")
      }
      this.scale +=10;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
      this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";
    },
    //缩小
    scaleX(){
      if(this.scale == 40){
        return this.$message.warning("已经是最小咯")
      }
      this.scale +=-10;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
      this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";
    },

  }
}
</script>
<style scoped>
</style>

App.vue

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <pdfShow style="width: 400px;height: 500px;border: 1px solid #ccc;overflow-y: scroll;" />
  </div>
</template>

<script>
import pdfShow from './components/pdfShow.vue'

export default {
  name: 'App',
  components: {
    pdfShow
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

// 引入elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
  }).$mount('#app')
相关推荐
m0_748233642 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟11 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386312 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596012 分钟前
前端代理,解决跨域问题讲解
前端
quitv17 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238126 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星28 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-1 小时前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端
一只小姜丝3321 小时前
解决各大浏览器中http地址无权限调用麦克风摄像头问题
网络·vue.js·网络协议·http