vue h5项目预览pdf文件+电子签名

vue h5项目预览pdf文件+电子签名

1、vue安装pdfh5

npm install pdfh5

2、示例代码
pdf文件预览页面

<template>
    <div class="pdf-container>
        <div id="pdfView"></div>
        <div v-if="SignPanelShow=='0'" class="pdfbtn" @click="openSignPanel">签名</div>
        <!-- 手签版弹出层-->
        <van-popup class="popup" v-model="signPopup" position="bottom" :style="{ height: '50%' }" closeable>
            <div class="popup-title">请手签您的姓名全称</div>
            <div class="popup-content">
            <canvas isee_sign ref="signCanvas"></canvas>
            </div>
            <div class="popup-panel">
            <van-cell>
                <van-button type="default" style="width: 49%;" @click="clear">清除</van-button>
                <van-button type="info" style="width: 49%;" @click="saveImageInfo">确认</van-button>
            </van-cell>
            </div>
        </van-popup>
        
    </div>
  </template>

js部分

 <script>
    import Pdfh5 from "pdfh5";
    import { initCanvas, clearArea } from '../assets/js/canvas.js';
    export default {
      name: 'App',
      data() {
        return {
            pdfh5: null,
            SignPanelShow:'', // 签字状态
            signPopup: false,
            /** 手签版校验 */
            drawed: false,
            uuid: '',
        };
      },
      components: {
          pdf,
      },
      mounted() {
        let o = this.getParam();
        this.uuid = o.uuid;
        // 获取pdf文件
        this.querypdf()
        // 获取签字状态
        this.getsignpanetype()
      },
      methods:{
      	// 获取地址栏参数
        getParam() {
          var urlStr = location.href;
          if (typeof urlStr == "undefined") {
            var url = decodeURI(location.search); //获取url中"?"符后的字符串
          } else {
            var url = "?" + urlStr.split("?")[1];
          }
          var theRequest = new Object();
          if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            var strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
              theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
            }
          }
          return theRequest;
        },
          querypdf(){
              this.$axios({
                  url:"api/propertyServer/view/"+ this.uuid,
                  method:"get",//get请求方式
                  params:'', //传给后台的参数
                  responseType: 'blob'
              }).then(res=>{
                  console.log('pdf',res)
                  if(res.status ==200){
                    this.pdfh5 = new Pdfh5("#pdfView", {
                        pdfurl: window.URL.createObjectURL(new Blob([res.data])),
                        zoomEnable:false, // 是否允许pdf手势缩放
                    });
                  }
              }).catch(error=>{});
  
          },
          getsignpanetype(){
            this.$axios({
                url:'api/propertyServer/Status/' + this.uuid,
                method:"get",//get请求方式
            }).then(res=>{
                if(res.status ==200){
                    this.SignPanelShow = res.data
                }
                console.log('签字状态',res,res.data)
            }).catch(error=>{});
          },
          // 打开签字板
          openSignPanel: function () {
            this.signPopup = true
            this.$nextTick(() => { initCanvas(this) })
          },
          // 清空签字
          clear: function () {
            clearArea(this)
            this.drawed = false
          },
          // 签字确认
          saveImageInfo(){
            if (!this.drawed) {
              this.$toast.fail('请签字')
              return
            }
                  this.$toast.loading({duration: 0, forbidClick: true, message: '正在加载', overlay: true})
                  this.signPopup = false
                  this.$axios({
                        url:"api/propertyServer/sign/"+ this.uuid,
                        method:"post",
                        data:{
                          image:this.canvas.toDataURL()
                        },
                  }).then(res=>{
                        if(res.status ==200){
                          // 更新签字状态
                          this.getsignpanetype()
                          this.$toast.clear()
                        }
                  }).catch(error=>{});
          }       
      }
    }
  </script>

css部分

<style >
	@import "pdfh5/css/pdfh5.css";
	*{
	padding: 0;
	margin: 0;
	}
	html,body,#app {
	width: 100%;
	height: 100%;
	padding-bottom: 7px;
	box-sizing: border-box;
	}
</style>
  <style scoped>
      .pdf-container{
          width: 100%;
          height: 100vh;
      }
      /* 签字按钮 */
	.pdfbtn{
		width: 100%;
		height: 45px;
		position: fixed;
		left: 0;
		bottom: 0;
		font-size: 18px;
		color: #fff;
		background-color: rgb(69, 135, 246);
		text-align: center;
		line-height: 45px;
	}
    /* 客户签字版 弹出层 */
	.popup {
	  display: flex;
	  flex-direction: column;
	  overflow-y: auto;
	}
    .popup-title {
	    font-size: 20px;
	    font-weight: 600;
	    text-align: center;
	    margin-top: 20px;
	  }
      .popup-content {
	    overflow-y: hidden;
	    height: 70%;
	  }
  </style>

签字板canvas.js

/** 初始化canvas画布 */
export const initCanvas = that => {
  /** canvas初始化 */
  let canvas = that.$refs.signCanvas
  that.canvas = canvas
  that.ctx = canvas.getContext('2d')
  let winW = window.innerWidth
  let winH = window.innerHeight / 3
  canvas.width = winW
  canvas.height = winH
  /** 按下屏幕事件 */
  that.canvas.addEventListener(
    'touchstart',
    (event) => {
      if (event.targetTouches.length === 1) {
        const offset = (window.innerHeight / 2) // 起始偏移量由canvas画布在屏幕中的位置决定 这里是50%
        event.preventDefault() // 阻止浏览器默认事件，重要
        var touch = event.targetTouches[0]
        that.touchPressed = true
        draw(touch.pageX - that.canvas.offsetLeft, touch.pageY - that.canvas.offsetTop - offset, false, that)
      }
    }, false)
  /** 拖动屏幕事件 */
  that.canvas.addEventListener(
    'touchmove',
    (event) => {
      if (event.targetTouches.length === 1) {
        const offset = (window.innerHeight / 2) // 起始偏移量由canvas画布在屏幕中的位置决定 这里是50%
        event.preventDefault() // 阻止浏览器默认事件，重要
        var touch = event.targetTouches[0]
        if (that.touchPressed) {
          draw(touch.pageX - that.canvas.offsetLeft, touch.pageY - that.canvas.offsetTop - offset, true, that)
        }
      }
    }, false)
  /** 结束拖动屏幕事件 */
  that.canvas.addEventListener(
    'touchend',
    (event) => {
      if (event.targetTouches.length === 1) {
        event.preventDefault() // 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
        that.touchPressed = false
      }
      that.drawed = true
    }, false)
}

/** 根据坐标与偏移量绘制图案 */
function draw (x, y, isDown, that) {
  let ctx = that.ctx
  if (isDown) {
    ctx.beginPath()
    ctx.strokeStyle = that.strokeStyle
    ctx.lineWidth = that.lineWidth
    ctx.lineJoin = 'round'
    ctx.moveTo(that.lastX, that.lastY)
    ctx.lineTo(x, y)
    ctx.closePath()
    ctx.stroke()
  }
  that.lastX = x
  that.lastY = y
}

/** 清空画板 */
export const clearArea = that => {
  that.ctx.setTransform(1, 0, 0, 1, 0, 0)
  that.ctx.clearRect(0, 0, that.ctx.canvas.width, that.ctx.canvas.height)
}

参考文章链接 https://pdfh5.gjtool.cn/#/pages/index/detail?id=646781ec0c801ca87845c820