当前位置：首页 > news >正文

在 Vue 3 集成 e签宝电子合同签署功能

news 来源：原创 2025/5/14 15:04:21

实现 Vue 3 + e签宝电子合同签署功能，需要使用 e签宝提供的实际 SDK 或 API。

e签宝通常提供针对不同平台（如 Web、Android、iOS）的 SDK，而 Web 端一般通过 WebView 或直接使用嵌入式 iframe 来加载合同签署页面。

下面举个 🌰 说明：

前提条件

1、获取 e签宝 API 接口：首先需要从 e签宝获取 API 密钥、签署链接、合同模板和签署所需的相关接口。

2、后端支持：e签宝的 API 需要通过后端服务器调用，因此需要后端来处理签署请求，生成签署链接，处理回调等操作。

步骤 1：后端生成签署链接

假设已经通过后端 API 调用 e签宝的接口，生成了一个合同签署的链接。给前端提供该链接，前端将使用这个链接加载合同签署页面。

以下是一个假设的后端接口：

- 生成签署链接的后端接口：/api/generate-signature-link

- 该接口会返回一个签署 URL，前端将通过该 URL 在 iframe 中加载签署页面。

接口返回结果示例：

{"status": "success","data": {"signUrl": "https://e-signature.example.com/contract-sign?contractId=12345&userId=67890"}
}

步骤 2：前端实现 Vue 3 项目

1、创建 Vue 3 项目：如果还没有创建项目，可以使用 Vite 创建一个新的 Vue 项目

npm create vite@latest my-e-sign-app --template vue
cd my-e-sign-app
npm install
npm install element-plus

2、创建 ESignature.vue 组件：这是展示合同签署页面的 Vue 组件。

<template><div class="e-signature"><h2>电子合同签署</h2><!-- 选择合同 --><el-select v-model="selectedDocument" placeholder="请选择合同" style="width: 200px;"><el-optionv-for="doc in documents":key="doc.id":label="doc.name":value="doc.url"/></el-select><!-- 显示合同内容 --><div v-if="selectedDocument" class="contract-container"><iframev-bind:src="selectedDocument"width="100%"height="600px"frameborder="0"></iframe></div><div class="sign-result"><el-button @click="handleSign" type="primary">开始签署</el-button><p v-if="signResult">签署结果: {{ signResult }}</p></div></div>
</template><script setup>
import { ref } from 'vue';const documents = ref([{ id: 1, name: '合同1', url: 'https://e-signature.example.com/contract-sign?contractId=12345&userId=67890' },{ id: 2, name: '合同2', url: 'https://e-signature.example.com/contract-sign?contractId=12346&userId=67891' },
]);// 当前选中的合同 URL
const selectedDocument = ref('');// 签署结果
const signResult = ref('');// 开始签署的处理函数
const handleSign = async () => {try {const response = await fetch('/api/generate-signature-link');const result = await response.json();if (result.status === 'success') {selectedDocument.value = result.data.signUrl;signResult.value = '合同加载中...';} else {signResult.value = '签署链接获取失败';}} catch (error) {signResult.value = '发生错误: ' + error.message;}
};
</script><style scoped>
.e-signature {margin: 20px;
}.contract-container {margin-top: 20px;border: 1px solid #ddd;padding: 10px;
}.sign-result {margin-top: 20px;
}
</style>

步骤 3：在 App.vue 中使用 ESignature.vue 组件

<template><div id="app"><ESignature /></div>
</template><script setup>
import ESignature from './components/ESignature.vue';
</script><style>
@import "~element-plus/packages/theme-chalk/src/base.scss";
</style>

步骤 4：后端实现生成签署链接

伪代码简单实现一下后端处理逻辑

// 假设已经有 e签宝的 API 密钥和其他必要信息
const E_SIGN_API_URL = 'https://api.esign.com/generate-signature-link';
const API_KEY = 'E_SIGN_API_KEY';// 生成签署链接
app.get('/api/generate-signature-link', async (req, res) => {try {const response = await fetch(E_SIGN_API_URL, {method: 'POST',headers: {'Content-Type': 'application/json','Authorization': `Bearer ${API_KEY}`,},body: JSON.stringify({contractId: '12345',  // 合同 IDuserId: '67890',      // 用户 ID}),});const result = await response.json();if (result.status === 'success') {res.json({status: 'success',data: { signUrl: result.data.signUrl },});} else {res.json({status: 'error',message: 'Failed to generate signature link',});}} catch (error) {res.status(500).json({ status: 'error', message: error.message });}
});app.listen(3000, () => {console.log('Server running on http://localhost:3000');
});

步骤 5：运行项目

启动前端服务：

npm run dev

结果展示：

总结

通过上述步骤，可以实现一个真实的电子合同签署流程：

1、前端通过调用后端接口获取真实的签署链接。

2、使用 iframe 将签署页面嵌入到 Vue 组件中。

3、用户可以通过点击按钮触发签署过程，后端会生成签署链接，前端加载合同签署页面。

在 Vue 3 集成 e签宝电子合同签署功能

实现 Vue 3 e签宝电子合同签署功能，需要使用 e签宝提供的实际 SDK 或 API。 e签宝通常提供针对不同平台（如 Web、Android、iOS）的 SDK，而 Web 端一般通过 WebView 或直接使用嵌入式 iframe 来加载合同签署页面。下面举个 &…...

编程日记 2025/5/14 15:04:21

基于华为ENSP的OSPF接口网络类型深入浅出（4）

本篇技术博文摘要 🌟 OSPF的接口在不同网络类型下的工作方式；不同网络类型下的报文通告方式深入浅出hub-spoke架构引言 📘 在这个快速发展的技术时代，与时俱进是每个IT人的必修课。我是肾透侧视攻城狮，一名什么都会一…...

编程日记 2025/5/14 8:45:32

西电-算法分析-研究生课程复习笔记

24年秋的应该是张老师最后一次用卷面考试，他说以后这节课的期末考试都是在OJ上刷题了张老师上课还挺有意思的，上完之后能学会独立地思考算法设计问题了。整节课都在强调规模压缩这个概念，考试也是考个人对这些的理解，还挺好玩的哈…...

编程日记 2025/5/13 17:26:23

音频数据增强：提升音频信号质量的多种技术

在音频处理和机器学习领域，音频数据增强是一种常用的技术，旨在通过对原始音频信号进行各种变换和处理，生成更多样化的训练数据。这不仅可以提高模型的鲁棒性，还能改善其在真实世界应用中的表现。本文将介绍几种常用的音频数据增强…...

编程日记 2025/5/11 23:54:05

如何在 Ubuntu 22.04 上安装 Caddy Web 服务器教程

简介 Caddy 是一个开源的 Web 服务器，它支持静态和现代 Web 应用程序，使用预定义的配置规则，并为所有链接的域名自动启用 HTTPS。Caddy 使用 GO 语言编写，提供了用户友好的配置指令，使你既可以将其用作 Web 服务器&am…...

编程日记 2025/5/14 14:55:40

python_excel列表单元格字符合并、填充、复制操作

读取指定sheet页，根据规则合并指定列，填充特定字符，删除多余的列，每行复制四次，最后写入新的文件中。 import pandas as pd""" 读取指定sheet页，根据规则合并指定列，填充特定字…...

编程日记 2025/5/14 14:48:30

基于GAN和RL的思想来训练对话生成

Paper https://arxiv.org/pdf/1701.06547.pdf 基于GAN和RL的思想来训练对话生成 Implementation https://github.com/jiweil/Neural-Dialogue-Generation/tree/master/Adversarial...

编程日记 2025/5/14 5:59:57

小米路由器IPv6 功能使用指南

本文不限于多层路由使用IPv6 的情况，提供解决IPv6 无法获取的更硬核的方法，需要有ssh 工具。（无安卓设备，测试环境win、mac、ios） 首先明确一点，就是如果想让你的设备得到GUA 地址，即访问 6.i…...

编程日记 2025/5/12 5:38:18

运放输入偏置电流详解

1 输入阻抗与输入偏置电路关系在选择运放和仪表运放时，经常听到这样的说法：“需要非常高的输入阻抗”，事实上真实如此吗？ 输入阻抗（更确切的说是输入电阻）很少会成为一个重要的问题（输入电容也…...

编程日记 2025/5/14 12:56:08

C++指针类型的基本理论和使用方式-学习记录

一、指针简概 （一）指针定义指针（pointer）是“指向（point to）”另外一种类型的复合类型。与引用类似，指针也实现了对其他对象的间接访问。然而指针与引用相比又有很多不同点。其一，…...

编程日记 2025/5/14 15:00:38

Elasticsearch：使用 Playground 与你的 PDF 聊天

LLMs作者：来自 Elastic Toms Mura 了解如何将 PDF 文件上传到 Kibana 并使用 Elastic Playground 与它们交互。本博客展示了在 Playground 中与 PDF 聊天的实用示例。 Elasticsearch 8.16 具有一项新功能，可让你将 PDF 文件直接上传到 Kibana 并使用 Pla…...

编程日记 2025/5/12 12:22:27

计算机网络之---物理层设备

什么是物理层设备物理层设备是指负责数据在物理媒介上传输的硬件设备，它们主要处理数据的转换、信号的传输与接收，而不涉及数据的内容或意义。常见的物理层设备包括网卡、集线器、光纤收发器、调制解调器等。物理层设备有哪些 1、网卡（N…...

编程日记 2025/5/11 21:19:11

【Duilib】 List控件支持多选和获取选择的多条数据

问题使用Duilib库写的一个UI页面用到了List控件，功能变动想支持选择多行数据。分析 1、List控件本身支持使用SetMultiSelect接口设置是否多选： void SetMultiSelect(bool bMultiSel);2、List控件本身支持使用GetNextSelItem接口获取选中的下一个索引…...

编程日记 2025/5/6 21:11:02

2025新春烟花代码（二）HTML5实现孔明灯和烟花效果

效果展示源代码 <!DOCTYPE html> <html lang"en"> <script>var _hmt _hmt || [];(function () {var hm document.createElement("script");hm.src "https://hm.baidu.com/hm.js?45f95f1bfde85c7777c3d1157e8c2d34";var …...

编程日记 2025/5/12 9:48:04

如何在 Ubuntu 22.04 上集成 Collabora Online 教程

简介在本教程中，我们将详细讲解如何在 Ubuntu 22.04 操作系统上安装 Collabora Online。 Collabora Online 是一个基于 LibreOffice 技术的开源办公套件。它提供了许多功能，其中最有用的一个功能是 Collabora 提供了 Word 文档、电子表格、演示文稿等…...

编程日记 2025/5/9 10:29:52

启动命令及参数 1. 启动命令模板 nohup java \ -Xms512m \ -Xmx1024m \ -Xmn256m \ -XX:MetaspaceSize128m \ -XX:MaxMetaspaceSize256m \ -XX:UseG1GC \ -XX:InitiatingHeapOccupancyPercent45 \ -XX:PrintGCDetails \ -XX:PrintGCDateStamps \ -XX:PrintGCApplicationStopp…...

编程日记 2025/5/12 13:23:29

linux-定制化rpm(rpmbuild)

一. 引文： 为实现我们的快速安装，特定服务需求的服务部署需求， 我们选择了通过source编译后定制成rpm，存放至自定义yum仓库，通过yum工具规范化管理及部署服务。目前比较常用的rpm打包方式分别为rpmbuild和fpm(在rpmbui…...

编程日记 2025/5/3 17:28:09

面向对象分析与设计Python版分析与设计概述

文章目录一、软件工程概述二、分析与设计概述一、软件工程概述高质量软件系统的基本要求架构性内聚可重用性可维护性可扩展性灵活性软件开发过程模型：是指根据软件开发项目从开始到结束的一系列步骤和方法，建模为不同的模型。常见的有&#xff1…...

编程日记 2025/5/7 21:40:35

npm发布流程说明

一、进入要发布的项目根目录，初始化为npm包 npm initname：最重要的字段之一，项目名称（少于214个字节）。没有name和version不能进行安装； version：最重要的字段之一，项目版本。没有n…...

编程日记 2025/5/13 12:13:36

Nginx反向代理请求头有下划线_导致丢失问题处理

后端发来消息说前端已经发了但是后端没收到请求。发现是下划线的都没收到，搜索之后发现nginx默认request的header中包含’_’时，会自动忽略掉。解决方法是：在nginx里的nginx.conf配置文件中的http部分中添加如下配置： unders…...

编程日记 2025/5/8 7:22:33

计网C1C2C3答案自用

Chapter 1 Computer Network and the Internet Review Questions Solution R1. What is the difference between a host and end system? List several different types of end system. Is a Web server an end system? There is no difference between a host and an end …...

编程日记 2025/5/13 12:30:56

为什么要分为大端和小端

1.大端序 0x12345678 地址： 0x00 0x01 0x02 0x03 数据： 0x12 0x34 0x56 0x78 高位字节存储在低地址，常用语网络协议，便于人阅读、书写类似。 2.小端序 0x12345678 地址： 0x00 0x01 0x02 0x03 …...

编程日记 2025/5/14 9:43:17

通过可穿戴外骨骼，以更灵活的方式操作你的机器人。

今天，我们将介绍一款专为控制 Mercury X1 和 Mercury B1 机械臂而设计的创新外骨骼。这种外骨骼以人类手臂的结构为蓝本，可实现直观和精确的控制。开发这种外骨骼的动机源于人们对深度学习和机器学习等领域日益增长的兴趣。这些技术使机器人能够自主学习…...

编程日记 2025/5/14 6:16:08

【大数据基础】大数据概述

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈大数据技术原理与应用 ⌋ ⌋ ⌋专栏系统介绍大数据的相关知识，分为大数据基础篇、大数据存储与管理篇、大数据处理与分析篇、大数据应用篇。内容包含大数据概述、大数据处理架构Hadoop、分布式文件系统HDFS、分布式数…...

编程日记 2025/5/10 0:17:04

使用双向链表优化数组操作的性能

🎬 江城开朗的豌豆：个人主页 🔥 个人专栏 :《 VUE 》《 javaScript 》 📝 个人网站 :《江城开朗的豌豆🫛 》 ⛺️ 生活的理想，就是为了理想的生活 ! 目录背景双向链表的优势实现方案性能优化 …...

编程日记 2025/5/12 23:55:38

Lua语言的语法

Lua语言的探索与应用引言 Lua是一种轻量级、高性能的脚本语言，广泛应用于游戏开发、嵌入式系统和很多应用程序中。它的灵活性和高效性使得Lua成为软件开发中不可或缺的一部分。本文将从Lua的历史、语法、特色、使用案例及其在实际开发中的应用进行深入探讨。 Lu…...

编程日记 2025/5/2 6:15:40

Linux随记（十四）

一、处理vsftpd漏洞【vsftpd安全漏洞(CVE-2021-30047)】 #操作系统1：bclinux euler 21.10#操作系统2：kylin v10二、处理ntp漏洞【NTPMode6检测漏洞【原理扫描】】 #操作系统1：bclinux euler 21.10 cp /etc/ntp.conf /etc/ntp.conf.bak202…...

编程日记 2025/5/12 12:51:43

【Linux网络编程】第二十二弹---深入理解 I/O 多路转接之 epoll：系统调用、工作原理、代码演示及应用场景

✨个人主页： 熬夜学编程的小林 💗系列专栏： 【C语言详解】【数据结构详解】【C详解】【Linux系统编程】【Linux网络编程】目录 1、I/O 多路转接之 epoll 1.1、epoll 初识 1.2、epoll 的相关系统调用 1.2.1、epoll_create 1.2.2、epol…...

编程日记 2025/5/13 4:09:36

AI赋能服装零售：商品计划智能化，化危机为转机

在服装零售这片竞争激烈的战场上，每一个细微的决策都可能成为品牌兴衰的关键。当市场波动、消费者口味变化、供应链挑战接踵而至时，许多品牌往往将危机归咎于外部环境。然而，真相往往更为深刻——“危机不是外部的，而是你的商品计…...

编程日记 2025/5/14 9:07:40

课程预告|卓翼飞思多旋翼无人机集群实验课程即将上线，互动赢好礼

《多旋翼无人飞行器控制系统开发》实验课程自推出以来，吸引了众多高校的关注。目前，该课程已在多所学校成功实施，并广受好评。点击链接查看飞控课程详情：课程上新| 卓翼飞思《多旋翼无人飞行器控制系统开发》实验课程正式发布 …...

编程日记 2025/5/5 7:22:24

AWS Glue从GCP的bigquery导入数据到AWS Redshift数据仓库

准备工作创建账号与服务账号：拥有Google Cloud账号，创建有BigQuery权限的服务账号；拥有AWS账号，创建有相关权限的IAM用户。创建资源：创建Amazon Redshift集群或Redshift Serverless工作区，创建用于存储数…...

编程日记 2025/5/4 17:34:34

zookeeper shell操作和zookeeper 典型应用（配置中心、集群选举服务、分布式锁）

文章目录引言I zookeeper客户端命令查看子节点 ls创建子节点 create获取节点信息 get更新节点数据 set删除节点 delete\ rmrII 监听机制node1：设置监听node3：修改监听节点node1:得到监听反馈III zookeeper 典型应用分布式锁集群选举服务数据发布/订阅（配置中心）引言 zk 的…...

编程日记 2025/5/13 9:30:53

如何解决HTML和CSS相关的问题，什么情况下会导致元素被遮挡？

在开发过程中，HTML 和 CSS 中的元素遮挡问题通常是由于布局、定位、层级等因素导致的。在使用 Vue.js 时，这些问题依然常见，尤其是涉及到动态渲染、条件渲染和组件嵌套的场景。以下是一些常见的导致元素被遮挡的原因，并通过 Vue.j…...

编程日记 2025/5/13 14:00:57

Java（3）封装、继承、多态

1.封装封装可以被认为是一个保护屏障，防止该类的代码和数据被外部类定义的代码随机访问。要访问该类的代码和数据，必须通过严格的接口控制。封装最主要的功能在于我们能修改自己的实现代码，而不用修改那些调用我们代码的程序片段。 pu…...

编程日记 2025/5/14 5:53:14

【深度学习】多目标融合算法（二）：底部共享多任务模型（Shared-Bottom Multi-task Model）

目录一、引言 1.1 往期回顾 1.2 本期概要二、Shared-Bottom Multi-task Model（SBMM） 2.1 技术原理 2.2 技术优缺点 2.3 业务代码实践三、总结一、引言在朴素的深度学习ctr预估模型中（如DNN），通常以一个行…...

编程日记 2025/5/10 5:43:45

后端:Spring(IOC、AOP)

文章目录 1. Spring2. IOC 控制反转2-1. 通过配置文件定义Bean2-1-1. 通过set方法来注入Bean2-1-2. 通过构造方法来注入Bean2-1-3. 自动装配2-1-4. 集合注入2-1-5. 数据源对象管理(第三方Bean)2-1-6. 在xml配置文件中加载properties文件的数据(context命名空间)2-1-7. 加载容器…...

编程日记 2025/5/10 6:57:34

基于SpringBoot的诊所管理系统

作者：计算机学姐开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等，“文末源码”。专栏推荐：前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码精品专栏：…...

编程日记 2025/5/13 11:06:59

基于GA遗传优化的最优阈值计算认知异构网络(CHN)能量检测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 2.算法运行软件版本 matlab2022a 3.部分核心程序 （完整版代码包含详细中文注释和操作步骤视频&#xff09…...

编程日记 2025/5/10 10:19:49

【技术分享】如何利用rdesktop实现Linux远程Windows桌面高效办公

文章目录前言1. Windows 开启远程桌面2. Linux安装rdesktop工具3. Win安装Cpolar工具4. 配置远程桌面地址5. 远程桌面连接测试6. 设置固定远程地址7. 固定地址连接测试前言随着技术的飞速发展，我们有了越来越多的方法来实现远程办公。今天我要给大家介绍一个特别…...

编程日记 2025/5/10 0:33:00

PDFelement 特别版

Wondershare PDFelement Pro 是一款非常强大的PDF编辑软件，它允许用户轻松地编辑、转换、创建和管理PDF文件。这个中文特别版的软件具有许多令人印象深刻的功能，PDFelement Pro 提供了丰富的编辑功能，可以帮助用户直接在PDF文件中添加、删除、…...

编程日记 2025/5/10 9:47:11

【江协STM32】10-2/3 MPU6050简介、软件I2C读写MPU6050

1. MPU6050简介 MPU6050是一个6轴姿态传感器，可以测量芯片自身X、Y、Z轴的加速度、角速度参数，通过数据融合，可进一步得到姿态角，常应用于平衡车、飞行器等需要检测自身姿态的场景3轴加速度计（Accelerometer&#xff…...

编程日记 2025/5/9 3:38:03

【首发 1day】WordPress Crypto 插件存在前台任意用户登录漏洞(CVE-2024-9989)

漏洞描述 WordPress 的 Crypto 插件在 2.15 及以下版本（包括 2.15）中容易受到身份验证绕过攻击。这是由于对 ‘crypto_connect_ajax_process’ 函数中 ‘crypto_connect_ajax_process：：log_in’ 函数的任意方法调用有限。这使得未经身份验证的攻击者可以以站点上的任何现有…...

编程日记 2025/5/4 9:28:38

c语言-----常识问题

1.VS的C4996错误由于微软在VS2013中不建议再使用C的传统库函数scanf,strcpy,sprintf等，所以直接使用这些库函数会提示C4996错误： VS建议采用带_s的函数，如scanf_s、strcpy_s，但这些并不是标准C函数。要想继续使用此函数&…...

编程日记 2025/5/14 2:40:43

MIUI显示/隐藏5G开关的方法，信号弱时开启手机Wifi通话方法

5G网速虽快，手机功耗也大。 1.取消MIUI强制的5G，手动设置4G的方法！ 【小米澎湃OS, Xiaomi HyperOS显示/隐藏5G开关的方法】 1.1.小米MIUI系统升级后，被强制连5G，手动设置开关被隐藏，如下图： 1…...

编程日记 2025/5/12 4:52:20

超简单，使用Kube-Vip实现K8s高可用VIP详细教程

具体步骤如下： 以下步骤在其中一个 master 上操作即可， 1、参数配置 export VIP192.168.0.110 export INTERFACEens33 export KVVERSIONv0.8.7VIP 是虚拟IP地址，和主机同一个网段，且未被占用。INTERFACE 是你当前主机的网络接口…...

编程日记 2025/4/28 4:00:51

中国数字化发展的问题与机会

橙蜂智能公司致力于提供先进的人工智能和物联网解决方案，帮助企业优化运营并实现技术潜能。公司主要服务包括AI数字人、AI翻译、埃域知识库、大模型服务等。其核心价值观为创新、客户至上、质量、合作和可持续发展。橙蜂智农的智慧农业产品涵盖了多方面的功能，如智能化推荐、…...

编程日记 2025/5/5 7:36:18

为什么ip属地一会河南一会江苏

在使用互联网的过程中，许多用户可能会遇到这样一个问题：自己的IP属地一会儿显示为河南，一会儿又变成了江苏。这种现象可能会让人感到困惑，甚至产生疑虑，担心自己的网络活动是否受到了某种影响。为了解答这一疑问&#…...

编程日记 2025/5/9 1:46:03

【机器学习】神经网络（BP算法）含具体计算过程

目录神经元的“激活函数” 多层前馈网络结构编辑 BP(BackPropagation:误差逆传播算法) BP算法推导手动计算BP神经网络的权值来实现学习前向传播(正向运算)的过程隐藏层输入： 隐藏层输出： 输出层输入： 输出层输出： …...

编程日记 2025/5/12 3:03:14

【HarmonyOS NEXT】鸿蒙应用点9图的处理（draw9patch）

【HarmonyOS NEXT】鸿蒙应用点9图的处理（draw9patch） 一、前言： 首先在鸿蒙中是不支持安卓 .9图的图片直接使用。只有类似拉伸的处理方案，鸿蒙提供的Image组件有与点九图相同功能的API设置。可以通过设置resizable属性来设置R…...

编程日记 2025/5/13 6:25:23

Swift语言的网络编程

Swift语言的网络编程探秘随着移动互联网的迅猛发展，网络编程已经成为开发者必备的核心技能之一。尤其在iOS开发领域，Swift语言作为Apple官方推荐的编程语言，以其简洁的语法和强大的功能受到了广泛的关注。本文将深入探讨Swift语言的网络编程…...

编程日记 2025/5/13 9:32:16