vue移动端pdf在线预览，并实现手势缩放、移动_vue-pdf双指放大缩小

通常我们会遇到ios手机不能下载文件的问题，那是因为苹果手机的拦截机制，这时我们只能通过别的方法来解决问题，我这里的解决方法是直接实现在线预览

1. pdf预览跟图片预览不同，pdf可能会有多张，而图片只有一张，使用图片预览的组件肯定是行不通的
2. 这里我使用的是一个vue-pdf的插件，这是一个使用起来容易上手的插件。首先我们需要在vue项目中引入它：

npm install --save vue-pdf

然后在展示pdf的页面引用

import pdf from ‘vue-pdf’

html代码

<template>
	<div class="pdf">
	  <div class="pdf-tab">
	    <div
	      class="btn-def btn-pre"
	      @click.stop="prePage">上一页
	    </div>
	    <div
	      class="btn-def btn-next"
	      @click.stop="nextPage">下一页
	    </div>
	  </div>
	  <div>{{pageNum}}/{{pageTotalNum}}</div>
	  <div class="any-scroll-view">
	    <div ref="body" :style="bodyStyle">
	      <pdf
	        id="pdfPreview"
	        ref="pdf"
	        :src="pdfUrl"
	        :page="pageNum"
	        :rotate="pageRotate"
	        @password="password"
	        @progress="loadedRatio = $event"
	        @page-loaded="pageLoaded($event)"
	        @num-pages="pageTotalNum=$event"
	        @error="pdfError($event)"
	        @link-clicked="page = $event">
	      </pdf>
	    </div>
	  </div>
	</div>
</template>
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

js代码和style代码
alloyfinger.js、transform.js、to.js引入的这三个js里封装了手势缩放移动、旋转的方法，可以去GitHub将源码挡下来，将这三个js复制到自己的static文件下，然后引用即可。点此进入GitHub

<script>
  import pdf from 'vue-pdf'
  import AlloyFinger from "../../../static/js/alloyfinger.js";
  import transform from "../../../static/js/transform.js";
  import To from "../../../static/js/to.js";

  export default {
    name: 'mistakesVoucher',
     props: {
        // 减速度, 单位px/s²
        acceleration: {
            type: Number,
            default: 3600
        }
    },
    data() {
      return {
        id: '',
        pdfUrl:'',// pdf文件地址
        pageNum:1,
        pageTotalNum:1,
        pageRotate:0,
        // 加载进度
        loadedRatio:0,
        curPageNum:0,
        transitionDuration: 300,
        goPath: '',             //将要去的界面
      };
    },
    beforeRouteEnter (to, from, next) { //监听从哪个页面过来
       let path = from.fullPath;
       next(vm => vm.setPath(path));
    },
    created(){
      this.getParams()
    },
    computed: {
        bodyStyle() {
            return {
                transitionDuration: `${this.transitionDuration}ms`,
                transform: `translate(${this.scrollLeft}px, ${
                    this.scrollTop
                }px)`
            };
        }
    },
    mounted() {
      this.getData();
    },
    methods: {
      setPath(path) {
        this.goPath = path.split("/")[1];
      },
      //返回键
      back() {
        this.$router.push({
          name: this.goPath,
          params: {
            id: this.id
          }
        })
      },
      getParams() {
       // 取到路由带过来的参数
       let routerParams = this.$route.params.id
       // 将数据放在当前组件的数据内
       this.id = routerParams
       this.pdfUrl = pdf.createLoadingTask(this.$route.params.url)
      },
      getData() {
        let that = this;
        let element = document.getElementById("pdfPreview");
        Transform(element);
        var initScale = 1;
        this.af = new AlloyFinger(element, {
          rotate: function (evt) {  //实现旋转
            element.rotateZ += evt.angle;
          },
          multipointStart: function () {
              initScale = element.scaleX;
          },
          pinch: function (evt) {   //实现缩放
            element.scaleX = element.scaleY = initScale * evt.zoom;
          },
          pressMove: function (evt) {   //实现移动
            element.translateX += evt.deltaX;
            element.translateY += evt.deltaY;
            evt.preventDefault();
          },
        });
      },
      prePage(){
        var p = this.pageNum
        p = p>1?p-1:this.pageTotalNum
        this.pageNum = p
      },
      nextPage(){
        var p = this.pageNum
        p = p<this.pageTotalNum?p+1:1
        this.pageNum = p
      },
      password(updatePassword, reason) {
        updatePassword(prompt('password is "123456"'))
      },
      pageLoaded(e){
        this.curPageNum = e
      },
      pdfError(error){
        console.error(error)
      },
    },
    components:{
      pdf
    },
  };
</script>

<style>
#app {
    font-family: Avenir,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    min-height: 100vh;
}
.pdf-tab {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 .4rem;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.pdf-tab .btn-def {
    border-radius: .2rem;
    font-size: .98rem;
    height: 1.93333rem;
    width: 6.4rem;
    text-align: center;
    line-height: 1.93333rem;
    background: #409eff;
    color: #fff;
    margin-bottom: 1.26667rem;
}
.pdf-total {
    text-align: center;
    font-size: 1.45333rem;
}
.pdf-process, .pdf-total {
    text-align: center;
    font-size: 1.45333rem;
}
.pdf-num {
    margin-bottom: 1.2rem;
}
</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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

效果

gitee测试源码: https://gitee.com/fang_zheng_wei/mobile-preview

下一篇: vue移动端实现excel在线预览