vue安装vue-pdf(预览pdf)_怎么安装vue-pdf

# npm

npm install --save vue-pdf
1

# 页面引用

// pdf预览
import pdf from "vue-pdf";
1
2

# 页面使用

<template>
  <div class="main">
    <div>
      <button type="button" @click="changePdfPage(0)">上一页</button>
      <button type="button" @click="changePdfPage(1)">下一页</button>
    </div>
    <p>{{ currentPage }} / {{ pageCount }}</p>
    <div>
      <button type="button" @click="scaleD()">放大</button>
      <button type="button" @click="scaleX()">缩小</button>
    </div>
    <div>
      <button type="button" @click="clock()">顺时针</button>
      <button type="button" @click="counterClock()">逆时针</button>
    </div>
    <pdf
      ref="pdf"
      :src="src"
      :page="currentPage"
      :rotate="pageRotate"
      @num-pages="pageCount = $event"
      @page-loaded="currentPage = $event"
      @loaded="loadPdfHandler"
    ></pdf>
  </div>
</template>

<script>
// pdf预览
import pdf from "vue-pdf";
export default {
  name: "home",
  components: {
    pdf
  },
  data() {
    return {
      src:
        "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      scale: 100,
      pageRotate: 0
    };
  },
  methods: {
    // pdf加载时
    loadPdfHandler(e) {
      e;
      this.currentPage = 1; // 加载的时候先加载第一页
    },
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    //放大
    scaleD() {
      this.scale += 5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
    //缩小
    scaleX() {
      if (this.scale === 100) {
        return;
      }
      this.scale += -5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
    // 顺时针
    clock() {
      this.pageRotate += 90;
    },
    // 逆时针
    counterClock() {
      this.pageRotate -= 90;
    }
  }
};
</script>

<style scoped>
.main {
  width: 500px;
  margin: 0 auto;
  border: 2px solid #409eff;
  padding: 10px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

默认显示第一页

更多请看文档：https://www.npmjs.com/package/vue-pdf