php+uniapp(微信小程序版)实现电子签名及合同生成

想实现在线电子签名，及生成签名到合同文件
第一部分：uniapp小程序端
1.从插件市场导入手写签名canvas电子签名，按照操作步骤即可使用。我这里是调整了样式，修改了组件，根据自己实际UI调整

我的UI效果图：

2.通过组件的submit方法可以得到签名后的图片临时文件，将图片上传到后台得到服务器图片地址，保存下来

sumbit(res){console.log('sumbit',res)var _this = this;try {// this.resultUrl = res.tempFilePath//将签名上传后台uni.uploadFile({url: web.webUrl+'/api/common/upload', //仅为示例，非真实的接口地址filePath: res.tempFilePath,name: 'file',formData: {// 'user': 'test'},success: (uploadFileRes) => {console.log(uploadFileRes.data);// 判断是否json字符串，将其转为json格式let data = _this.$u.test.jsonString(uploadFileRes.data) ? JSON.parse(uploadFileRes.data) : uploadFileRes.data;console.log(data);_this.resultUrl = data.data.url;console.log(_this.resultUrl);_this.confirm()// _this.resultUrl = res.tempFilePath;}})} catch (e) {// error}
},

第二部分：php接口部分
图片上传接口就不写了，直接写合同生成，使用的是PHPWord

1.composer安装PHPWord PHPWord composer链接

composer require phpoffice/phpword

2.准备合同模板文件，既然是PHPWord，那肯定是word文档，将文档里面的需要替换的文字设置为变量，变量的格式例如：${user_name}，那么模板变量替换的时候使用 $templateProcessor->setValue(‘user_name’, ‘张三’); 图片也是一样的操作，在文件里面设置好模板变量，然后替换

PHPWord文档中有给出使用方法

3.生成合同文件

//生成合同文件，参数是签名图片的路径
public static function generate_contract($sign_img_url)
{//获取后台配置的模板文件$contract = explode(',',getConfigvalue('register_file'));$contract_list = array();$file_path = ROOT_PATH.'public/contract/';if(!is_dir($file_path)){mkdir($file_path,0777,true);}foreach ($contract as $key=>$value) {//读取模板文件$templateProcessor = new TemplateProcessor(ROOT_PATH.'public'.$value);//模板变量替换$templateProcessor->setValue('user_name', '张三'); //模板变量值替换$templateProcessor->setValue('user_mobile', '13112345678'); //变量值替换$templateProcessor->setImageValue('sign_image', ['path' => ROOT_PATH.'public'.$sign_img_url, 'width' => 40, 'height' => 40, 'ratio' => true]); //写入图片//输出文件$out_docx_name = $file_path.time().$key.'.docx';$templateProcessor->saveAs($out_docx_name);$contract_list[] = $out_docx_name;}return $contract_list;
}

4.得到文件，out_docx_name就是文件路径，将路径保存

php+uniapp(微信小程序版)实现电子签名及合同生成相关推荐

宝藏级UI组件库：FirstUI，微信小程序版+uniapp版双版至V1.5.0，完美支持vue3
First UI(https://www.firstui.cn/)是一套超高性能.超高颜值的移动端UI综合解决方案,包含业内顶尖的组件库.强大的功能库.丰富精美的模板库,提供uni-app(完美支持n ...
uni-app 微信小程序用高德sdk获取地理位置，以及天气信息
uni-app 微信小程序采用高德sdk获取地理位置和天气信息主要有以下几个步骤: 1. 注册高德开发者,并获取应用key 概述-微信小程序插件 | 高德地图API 在这个网页最下面,按步骤来就可以了 ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
用mpvue实现的微信小程序版cnode社区
五一放假,没出去玩,想熟悉下vue的开发流程,又想体验下mpvue,于是写了个练手项目.一个用mpvue实现的cnode微信小程序版. 代码在仓库.欢迎各位star.fork.issue.pr.目前已 ...
uni-app微信小程序登录授权
uni-app微信小程序登录授权首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件,把获取授权接 ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(一）---基础页面框架搭建
写在前面话: 随着互联网的快速发展,微信小程序应用的快速便捷,不用下载安装等的优势越来越明显,于是,我就开始着手于小程序开发的学习,虽然微信提供了开发工具,但它只能生成小程序 ,不能生成APP,那么有 ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
uni-app 微信小程序实现全屏悬浮按钮可拖动，自动吸附边缘
原文链接:uni-app 微信小程序实现全屏客服按钮可拖动,自动吸边-小月博客效果图如下: html : <movable-area class="movableArea" ...
uni-app 微信小程序分享按钮
uni-app 微信小程序分享按钮官方文档说明在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写相关 appkey,微信 appkey 在需要分享的页面填写: ...

php+uniapp(微信小程序版)实现电子签名及合同生成

php+uniapp(微信小程序版)实现电子签名及合同生成相关推荐

最新文章

热门文章