基于云阅读 二次封装
npm install dnn-vue-sign
// 示例代码
<template>
<Signature
:documentId="documentId"
userId="xxxx"
mode="all"
:enableDefaultPwd="true"
:isSignRange="false"
:isCustomSignDate="false"
@stampSuccess="stampSuccess"
/>
</template>
<script lang="ts" setup>
import Signature from "dnn-vue-sign";
const documentId =
"http://58.213.48.57:15100/jcpt/upload/20240307/ef033092f27f83e475cb350edb3a2350.pdf";
const stampSuccess = (signType: string, invalidReason: string) => {
console.log("signType.value, invalidReason.value--", signType, invalidReason);
// TODO: 调用接口
};
</script>| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
|---|---|---|---|---|
| documentId | pdf的url地址 | string | 是 | ’‘ |
| userId | 签章秘钥盘, 一般都是手机号 | string | 否 | ’‘ |
| mode | all : 签章+作废 sign: 可以签章、不能作废 void: 不能签章、 可以作废 view: 查看模式（仅查看pdf） |
string | 否 | all |
| isView | 查看模式: 效果同mode: view, 项目上使用isView，这里做个兼容 | boolean | 否 | false |
| isCustomSignDate | 是否自定义签章日期 | boolean | 否 | false |
| isSignRange | 是否启用连续多页签章 | boolean | 否 | false |
| enableDefaultPwd | 是否启用默认密码 | boolean | 否 | true |
| signApiUrl | 签章接口地址配置：默认值 /api/flow/jg/origin/jgServlet |
string | 否 | |
| stampSuccess | 签章成功返回事件：返回下面2个参数 signType：1: 签章 2：作废 invalidReason： 作废内容 |
// vueconfig.js
proxy: {
"/signature": {
target: "http://58.213.48.57:20105/",
pathRewrite: {
"^/signature": "/",
},
changeOrigin: true,
},
"/api": {
target: "http://58.213.48.57:15010/api/", // 测试环境
ws: true,
pathRewrite: {
"^/api": "",
},
},