php+uniapp(微信小程序版)实现电子签名及合同生成
发布时间
阅读量：
阅读量
在线电子签名系统实现主要包括以下内容：第一部分为UniApp小程序端的实现，在线导入手写签名并进行调整；第二部分为 PHPWord 接口的开发与应用，在合同生成过程中通过替换变量完成模板配置并生成文档文件。具体步骤包括：通过canvas电子签名插件快速部署在线签名功能；利用PHPWord进行合同模板变量替换与文件生成；通过uni.uploadFile方法将处理后的签名图片上传至服务器并获取下载地址；完成对合同文件的保存与管理操作。
为了实现在线电子签名功能并生成电子签名至合同文件中。
第一部分：基于Uniapp小程序端
- 通过插件市场获取手写签名功能（canvas电子签名），通过遵循操作指南即可集成使用该功能。
- 在此基础上进行了样式优化，并重新设计了相关的组件架构（组件），以实际项目需求为导向进行界面设计优化。
我的UI效果图：
利用组件的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工具。
- 配置PHPWord PHPWord Composer链接
composer require phpoffice/phpword准备合同模板文件，请问如果是PHPWord的话？将文档中的需要替换的文字设置为变量形式，例如{user_name}之类。在替换时使用 templateProcessor->setValue(‘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就是文件路径，将路径保存
全部评论 (0)
还没有任何评论哟~