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
