通常我們會遇到ios手機(jī)不能下載文件的問題，那是因為蘋果手機(jī)的攔截機(jī)制，這時我們只能通過別的方法來解決問題，我這里的解決方法是直接實現(xiàn)在線預(yù)覽

pdf預(yù)覽跟圖片預(yù)覽不同，pdf可能會有多張，而圖片只有一張，使用圖片預(yù)覽的組件肯定是行不通的

這里我使用的是一個vue-pdf的插件，這是一個使用起來容易上手的插件。首先我們需要在vue項目中引入它：

npm install --save vue-pdf

然后在展示pdf的頁面引用

import pdf from ‘vue-pdf’

html代碼

<template><div class="pdf"><div class="pdf-tab"><divclass="btn-def btn-pre"@click.stop="prePage">上一頁</div><divclass="btn-def btn-next"@click.stop="nextPage">下一頁</div></div><div>{{pageNum}}/{{pageTotalNum}}</div><div class="any-scroll-view"><div ref="body" :style="bodyStyle"><pdfid="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>

js代碼和style代碼
alloyfinger.js、transform.js、to.js引入的這三個js里封裝了手勢縮放移動、旋轉(zhuǎn)的方法，可以去GitHub將源碼擋下來，將這三個js復(fù)制到自己的static文件下，然后引用即可。點此進(jìn)入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/s2acceleration: {type: Number,default: 3600}},data() {return {id: '',pdfUrl:'',// pdf文件地址pageNum:1,pageTotalNum:1,pageRotate:0,// 加載進(jìn)度loadedRatio:0,curPageNum:0,transitionDuration: 300,goPath: '', //將要去的界面};},beforeRouteEnter (to, from, next) { //監(jiān)聽從哪個頁面過來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() {// 取到路由帶過來的參數(shù)let routerParams = this.$route.params.id// 將數(shù)據(jù)放在當(dāng)前組件的數(shù)據(jù)內(nèi)this.id = routerParamsthis.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) { //實現(xiàn)旋轉(zhuǎn)element.rotateZ += evt.angle;},multipointStart: function () {initScale = element.scaleX;},pinch: function (evt) { //實現(xiàn)縮放element.scaleX = element.scaleY = initScale * evt.zoom;},pressMove: function (evt) { //實現(xiàn)移動element.translateX += evt.deltaX;element.translateY += evt.deltaY;evt.preventDefault();},});},prePage(){var p = this.pageNump = p>1?p-1:this.pageTotalNumthis.pageNum = p},nextPage(){var p = this.pageNump = p<this.pageTotalNum?p+1:1this.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>

效果

gitee測試源碼: https://gitee.com/fang_zheng_wei/mobile-preview

下一篇: vue移動端實現(xiàn)excel在線預(yù)覽

總結(jié)

以上是生活随笔為你收集整理的vue移动端pdf在线预览，并实现手势缩放、移动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。