移动端预览pdf（使用的是vue-pdf--并且带上下页）

移动端预览pdf(两种方法vue-pdf和pdfh5)

• 先说一下vue-pdf方法
  1.先安装一下 npm install -S vue-pdf
  
  2.然后在项目中建一个pdfLook.vue里边引入vue-pdf和对应的js文件（我是在网上找的别人写好的。直接复制的）
  
  **我这里有prop接收参数是因为我做的是在线预览好几种格式的。通过传过来url地址进行预览的
  pdfLook.vue整体代码如下（我是搬的别人的自己在上边改了一下prop接收参数）：

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


<script>
import pdf from 'vue-pdf'
import AlloyFinger from "@/utils/alloyfinger.js";
// import Transform from "@/utils/transform.js";
// import To from "../../../static/js/to.js";
export default {
  name: "pdfPreview",
  props:{
   urlNew: {
    type: String,
    default: ''
   }
  },
  components:{
    pdf
  },
  data() {
    return {
      acceleration: 3600,         // 减速度, 单位px/s²
      id: '',
      pdfUrl:'./static/file/testPdf.pdf',                  // pdf文件地址
      pageNum:1,
      pageTotalNum:1,
      pageRotate:0,
      loadedRatio:0,               // 加载进度
      curPageNum:0,
      transitionDuration: 300,
      af: null
    };
  },
  created(){
    //目前是本地url，真实情况向会请求后台获取到文件流，转为url传到此页面
    // this.getParams()
  },
  computed: {
    bodyStyle() {
      return {
        transitionDuration: `${this.transitionDuration}ms`,
        transform: `translate(${this.scrollLeft}px, ${
          this.scrollTop
        }px)`
      };
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getParams() {
      // 取到路由带过来的参数
      let routerParams = this.$route.params.id
      console.log(routerParams)
      // 将数据放在当前组件的数据内
      this.id = routerParams
      this.pdfUrl = pdf.createLoadingTask(this.$route.params.url)
    },
    getData() {
      // let that = this;
      let element = document.getElementById("pdfPreview");
      // Transform(element);
      let 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(){
      let p = this.pageNum
      p = p>1?p-1:this.pageTotalNum
      this.pageNum = p
    },
    nextPage(){
      let p = this.pageNum
      p = p<this.pageTotalNum?p+1:1
      this.pageNum = p
    },
    password(updatePassword, reason) {
      console.log(reason)
      updatePassword(prompt('password is "123456"'))
    },
    pageLoaded(e){
      console.log(e)
      this.curPageNum = e
    },
    pdfError(error){
      console.error(error)
    },
  },
}
script>

<style scoped >
#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: .3733333rem;
  height: .8rem;
  width:2.1333333rem;
  text-align: center;
  line-height:.8rem;
  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>

最终预览效果：

- 在说一下第二种方法pdfH5

1. 先安装 npm install pdfh5

2. 再使用 也是先写一个预览pdf的页面

<template>
	<div class="pdfBox">
		<div id="previewPdf">div>
	div>
template>
<script>
import pdfh5 from 'pdfh5';
import 'pdfh5/css/pdfh5.css'
export default {
	data() {
		return {
			pdfh5: null,
		}
	},
	methods: {
		openPdf(url) {     //url：PDF文件地址
		console.log("url---",url)
			this.pdfh5 = new pdfh5('#previewPdf', {
				pdfurl: url
			});
			this.pdfh5.on('success', () => {
				console.log('pdf渲染成功');
			});
		}
	}
}
script>
<style lang="less" scoped>
.pdfBox {
	position: relative;
	top: 0;
	left: 0;
	height: 100vh;
	background: #000;
	overflow: hidden;
	z-index: 99;
	#previewPdf {
		height: 100vh;
	}
}
style>

 3.然后再页面中引入

4.再页面中使用组件

5.最终预览效果
看主页视频有录最终效果