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

本文主要是介绍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 = truethis.$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 = falsethis.$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.signCanvasthat.canvas = canvasthat.ctx = canvas.getContext('2d')let winW = window.innerWidthlet winH = window.innerHeight / 3canvas.width = winWcanvas.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 = truedraw(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.ctxif (isDown) {ctx.beginPath()ctx.strokeStyle = that.strokeStylectx.lineWidth = that.lineWidthctx.lineJoin = 'round'ctx.moveTo(that.lastX, that.lastY)ctx.lineTo(x, y)ctx.closePath()ctx.stroke()}that.lastX = xthat.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)
}