PC端 JSAPI
## 一.快速接入
### 1.引入JS
```html
<script type="text/javascript" src="http://ip:port/sdko/ws.loader.js"></script>
```
### 2.定义视图节点
文件签字视图会在已定义的div节点内渲染。请指定有效的height、width风格样式，请保证id的唯一性。
```javascript
<div id="ctx" style="height: 100%; width: 100%;"></div>
```
### 3.引入移动端API，并实例化渲染
``` javascript
WSLoader.loadPC(() => { // 引入移动端AP
var ctx = new WSContext('#ctx', { // 实例化
token: 'xxx', // token
fileIds: 'xxx1,xxx2', // 文件 id 字符串，多文件使用逗号分隔
userId: 'xxx',
userName: 'xxx',
baseURL: 'http://ip:port/sdko' // SDK接口请求地址
})
})
```
***请勿将`ctx`对象放到 `vue` 的 `data` 、 `react` 的 `state` 中***
### 4.查看JSAPI版本号
```javascript
const version = WSContext.version
```
## 二.基础配置
- **`token: string`**：授权口令
- **`fileIds: string`**：文件签字ID信息，多个文件用`,`分隔
- **`userId: string`**：用户ID
- `userName: string`：用户名称
- `baseURL: string`：好签SDKO后台接口请求地址
```javascript
const ctx = new WSContext('#ctx', {
token: 'xxx',
fileIds: 'xxx1,xxx2',
userId: 'wellsign',
userName: '好签',
baseURL: 'http://test.wellsign.cn:28080/sdko'
})
```
## 三.功能
### 1.签名模板
#### 配置项
- `isSignboardAutoAdd: boolean`：签名模板新增的签名是否自动插入到文件中，默认`true`
- `isWithTimestamp: boolean`：插入签名模板的时候是否自动插入时间戳，默认`false`
- `signtmplWidth: number`：插入签名模板时的初始最值，即宽高的最大值，默认`100`
- `>= 1`时，宽度单位为`px`,例：`100`时，显示宽度为`100px`
- `< 1`时，宽度单位为**页宽**的比例，例：`0.3`时，宽度为页宽的`30%`
- `timestampWidth: number`：插入的时间戳的文本宽度，默认`100`
- `>= 1`时，宽度单位为`px`,例：`100`时，显示宽度为`100px`
- `< 1`时，宽度单位为**页宽**的比例，例：`0.3`时，宽度为页宽的`30%`
- `timestampDistance: number`：插入的时间戳和签名的距离，默认`10`
- `>= 1`时，距离单位为`px`,例：`15`时，显示距离为`15px`。
- `< 1`时，距离单位为**页宽**的比例，例：`0.1`时，距离为页宽的`10%`。
- `timestampPosition: string`：时间戳相对签名的位置，默认`bottom`正下方
- `topLeft、top、topRight`：上左、上、上右
- `rightTop、right、rightBottom`：右上、右、右下
- `bottomLeft、bottom、bottomRight`：下左、下、下右
- `leftTop、left、leftBottom`：左上、左、左下
- 
- `timestampFormat: Function`：定义签名的时间戳格式
- `isGroupSelect: boolean`：签名模板和时间戳是否绑定选中，默认`false`
- `isGroupSelectSingle: boolean`：签名模板和时间戳绑定选中后，是否支持选中单个，默认`true`
```javascript
new WSContext('#ctx', {
isSignboardAutoAdd: true,
isWithTimestamp: false,
signtmplWidth: 100,
timestampWidth: 100,
timestampDistance: 10,
timestampPosition: 'bottom',
timestampFormat: () => {
return ['2022年10月01日', '2022-02-02']
},
isGroupSelect: false,
isGroupSelectSingle: true
})
```
#### addSigntmpl
描述：点击插入签名模板
参数：`tmplId: string`签名模板id。
```javascript
ctx.addSigntmpl('xxx')
```
### 2.签字板
#### showSignboard
描述：显示签字板，以插入签名，此签名不会保存为签名模板
参数：
- `pageIdx: number`：页码，从0开始计数。
- `rx:number`：签名X轴坐标/页宽，0-1。
- `ry:number`：签名Y轴坐标/页高，0-1。
- `rw:number`：签名宽度/页宽，0-1。
- `ry:number`：签名高度/页高，0-1。
```
// 不传参数时会把笔迹插入到签字界面中央。
ctx.showSignboard()
// 传参数时会插入到指定页，指定位置。
ctx.showSignboard(1, 0.1, 0.1, 0.3, 0.2)
```
#### closeSignboard
描述：关闭签字板
```javascript
ctx.closeSignboard()
```
#### 签字板显示隐藏回调
- `onSignboardShow: Function`：签字板显示回调
- `onSignboardHide: Function`：签字板隐藏回调
```javasctipt
new WSContext('#ctx', {
onSignboardShow: () => {
// ...to do
},
onSignboardHide: () => {
// ...to do
}
})
```
#### 签字板笔迹参数设置
- `setSize(size: number)`：设置签字板笔迹尺寸，`size: number`笔迹的粗细，范围`1-9`
- `setColor(color: string)`：设置签字板笔迹颜色，`color: string`笔迹的颜色
- `clear()`：清除签字板的笔迹
- `setEraser(value: boolean)`：设置签字板是否进入擦除状态
- `true`：进入擦除状态
- `false`：进入书写状态
- `ok()`：确认插入签字板上的笔迹
- `close()`：关闭签字板
- 手笔分离状态、打开关闭，同 `isSeparate`、`setIsSeparate`
```javascript
ctx.signboard.setSize(5)
ctx.signboard.setColor('#00a0ff')
ctx.signboard.clear()
ctx.signboard.setEraser(true)
ctx.signboard.ok()
ctx.signboard.close()
```
### 3.文本
#### insertIText
描述：插入文本到文件
```javascript
ctx.insertIText()
```
#### closeInsertIText
描述：关闭插入文本模态窗口
```javascript
ctx.closeInsertIText()
```
#### onITextEdit
类型： `Function`
描述：通过`onITextEdit`自定义文本输入框
```javasctipt
new WSContext('#ctx', {
onITextEdit: (text, color, fontId, textAlign) => new Promise((resolve) => {
const newText = prompt('请输入文本', text)
if (newText !== null) {
resolve({
text: newText ,
color: '#00a0ff',
fontId: 2,
textAlign: 'left'
})
}
}),
})
```
#### addIText
描述：自定义插入文本。如果自定义文本输入框，可以配合`onITextEdit`回调方法使用。
参数：
- `text: string`文本字符串
- `color: string`文本颜色
- `fontId: number`字体ID，1宋体、2仿宋、3楷体、4黑体。
- `fontSize: number`文本大小，插入文件后展示的文本大小，建议20。
- `pageIdx?: number`插入页的页码。从`0`计数
- `x?: number`插入中心点坐标和页宽的比。`0-1`。
- `y?: number`插入中心点坐标和页宽的比。`0-1`。
- `textAlign?: 'left' | 'center' | 'right'`文本对齐方式。默认`left`居左
(**pageIdx、x、y改为非必传 参数，没有传值时，会将文本插入到签字界面中央**)
```
// 插入文本 hellow world!,颜色 #00aff，宋体，显示大小20px
ctx.addIText('hello world!', '#00a0ff', 1, 20)
// 插入文本 hellow world!，颜色 #00a0ff，宋体，居中，显示大小20px，第1页，页面中央。
ctx.addIText('hello world!', '#00a0ff', 1, 20, 0, 0.5, 0.5, 'center')
// 插入文本 hellow world!，颜色 #00a0ff，宋体，居中，显示大小20px，签字界面中央。
ctx.addIText('hello world!', '#00a0ff', 1, 20, undefined, undefined, undefined, 'center')
```
### 4.图片
#### insertImage
描述：插入图片到文件
```javascript
ctx.insertImage()
```
### 5.圈批
#### 配置项
- `isSeparate: boolean`：是否启动手笔分离，默认`false`
- `useStrokeMouseIcon: boolean`：是否替换 鼠标图标，默认`true`。
- `isCustomStroke: boolean`：是否自定义圈批工具栏，值为`true`时将不显示好签默认的圈批工具栏。默认`false`
```javasctipt
new WSContext('#ctx', {
isSeparate: false，
isCustomStroke：false
})
```
#### 回调方法
- `onEnterStroke: Function`：当签字界面进入圈批状态
- `onQuitStroke: Function`：当签字界面退出圈批状态
- `onStrokeStart: Function`：圈批状态下，当用户开始书写
```javasctipt
new WSContext('#ctx', {
onEnterStroke: () => {
// 进入圈批状态
},
onQuitStroke: () => {
// 进入圈批状态
},
onStrokeStart: () => {
// 用户开始书写
}
})
```
#### enterStroke
描述：进入圈批
```javascript
await ctx.enterStroke()
```
#### quitStroke
描述：退出圈批
```javascript
await ctx.quitStroke()
```
#### toggleStroke
描述：进入/退出圈批模式。如果签字界面开启了圈批，则会退出圈批。如果签字界面未开启圈批，则会打开圈批。
```
ctx.toggleStroke()
```
#### clearStroke
描述：清除当前页上的圈批笔迹
```javascript
await ctx.clearStroke()
```
#### switchStrokeState
描述：切换圈批状态。如果签字界面不在圈批模式，会主动进入圈批模式。
参数：
- `shapeR` 矩形
- `shapeC` 圆形
- `shapeL` 直线
- `shapeA` 箭头
- `stroke` 笔迹书写
- `eraser` 橡皮擦
```javascript
await ctx.switchStrokeState('stroke')
```
#### isInStroke
描述：界面中的文件是否在圈批状态。
```javascript
const isInStroke:boolean = ctx.isInStroke
```
#### setIsSeparate
描述：设置手笔分离状态
```javascript
await ctx.setIsSeparate(false) // false 关闭手笔分离，true 开启手笔分离
```
#### setStrokeSize
描述：设置圈批笔迹的粗细
参数：`size: number`笔迹的粗细，范围`1-8`
```javascript
await ctx.setStrokeSize(4)
```
#### setStrokeColor
描述：设置圈批笔迹的颜色
参数：`color: string`笔迹的颜色
```javascript
await ctx.setStrokeColor('#00a0ff')
```
#### strokePrev
描述：圈批笔迹回退
```javascript
await ctx.strokePrev()
```
#### strokeNext
描述：圈批笔迹前进
```javascript
await ctx.strokeNext()
```
#### isStrokePrev
描述：是否圈批笔迹可以回退
```javascript
const isStrokePrev: boolean = ctx.isStrokePrev
```
#### isStrokeNext
描述：是否圈批笔迹可以回退
```javascript
const isStrokeNext: boolean = ctx.isStrokeNext
```
### 6.验签
#### 配置项
- `verifyMod: 'readonly' | 'readwrite' | 'readwrite-myself'`：验签模式。默认'readwrite-myself'
- `readonly` 验签只读模式，只能查看验签信息
- `readwrite` 验签读写模式，可以查看、删除所有验签信息
- `readwrite-myself`验签签字人读写模式，可以查看所有验签、删除自己的验签信息
- `commitSelectEvent: ('delete')[]`：设置已经提交的笔迹交互事件，默认`[]`无交互
- `delete`可点击选中，显示删除按钮。（是否显示删除同时受验签模式影响）
```javascript
new WSContext({
verifyMod: 'readwrite-myself',
commitSelectEvent: ['delete'] // 已提交的笔迹可选中，显示删除按钮
})
```
#### getVerifyArr
描述：获取验签数据
```
interface IVerify{
date: string, // 保存时间
id: string, // 唯一标识
isFromFile: boolean, // 是否是已固化笔迹。true:已固化，不支持删除、false：未固化，可删除
p: string, // 数据位置信息 x,y,width,height
page: number, // 页码，从0开始计数
ps: string, // 所在页的尺寸 width,height
sD: string, // 签署人描述
sI: string, // 签署人唯一标识
sN: string, // 签署人姓名
type: number // 验签数据类型。0：签名、1：图片、2：文本、3：批注
}
const verifyArr: IVerify[] = ctx.getVerifyArr()
```
#### selectVerify
描述：选中验签数据
```
const verifyArr = ctx.getVerifyArr()
ctx.selectVerify(verifyArr[0]) // 选中第一个验签
```
#### deselectVerify
描述：取消选中验签数据
```
ctx.deselectVerify()
```
#### deleteVerify
描述：删除验签数据
```
const verifyArr = ctx.getVerifyArr()
ctx.deleteVerify(verifyArr[0]) // 删除第一个验签
```
### 7.缩略图
#### getThumb
描述：获取文件缩略图
参数：
- `startIdx`：起始页序号（从0计数，包括此页）
- `endIdx`：结束页序号（从0计数，不包括此页）
```javascript
const arr: string[] = await ctx.getThumb(0, 10) // 获取从0 - 9 页的缩略图
```
#### getPageTotal
描述：获取文件总页数
```javascript
const pageTotal: number = ctx.getPageTotal()
```
### 8.保存
#### haveUnsaveData
描述：当前文件是否有未保存的数据
```javascript
const isHave: boolean = ctx.haveUnsaveData()
```
#### haveUnsaveDataAll
描述：多文件渲染时,检查所有文件是否有未保存的数据
```javascript
const isHaveArr: boolean[] = ctx.haveUnsaveDataAll()
```
#### save
描述：保存当前文件的数据
```javascript
const result = await ctx.save()
// result: { success: boolean, msg: string, data: { sequenceId: string, buildNo: number } }
```
#### saveAll
描述：多文件渲染时，保存所有文件的笔迹数据
```javascript
const resultArr = await ctx.saveAll()
// result: { success: boolean, msg: string, data: { sequenceId: string, buildNo: number } }[]
```
#### isExportRecord
类型：`boolean`
描述：是否在保存的返回当次保存的笔迹信息。默认`false`。
```
const result = await ctx.save()
const signRecords: ISignRecord[] = result.data.signRecords
interface ISignRecord {
type: 'signname' | 'image' | 'itext' | 'line' | 'circ' | 'rect' | 'stroke', // 笔迹类型 签名、图片、文本、直线、椭圆、矩形、圈批
x: number, // 笔迹X坐标 和页宽百分比
y: number, // 笔迹Y坐标 和页高百分比
w: number, // 笔迹宽度 和页宽百分比
h: number, // 笔迹高度 和页高百分比
rotate: number, // 笔迹旋转角度
base64: string, // 笔迹图片 base64 字符串
page: number // 页码，从0计数
}
```
### 9.印章
#### insertSeal
描述：插入印章到页面中
参数：`option: { surname: string, personalName: string, sealColor: string, alpha?: number, dateTime: string }`
- `surname: string` 印章 姓
- `personalName: string`印章 名称
- `sealColor: string`印章 颜色
- `alpha?: number`印章透明度，0-1
- `dateTime?: string`印章日期
- `defaultSize?: number`插入到签字界面后印章显示大小，单位`px`，默认`150`
```
ctx.insertSeal({
surname: '郝',
personalName: '签',
sealColor: '#dd444c',
alpha: 0.8,
dateTime: '2022-08-08'
})
ctx.insertSeal({
surname: '郝',
personalName: '签',
sealColor: '#dd444c',
alpha: 0.8,
dateTime: '2022-08-08',
defaultSize: 50
})
```
### 10.水印
#### 配置项
- `useWaterMark: boolean`：是否显示水印，默认`false`
- `waterMarkText: string`：水印文本内容，默认`签字用好签`
- `waterMarkColor: string`：水印文字颜色，默认`rgba(220, 220, 220, 0.3)`
```javascript
new WSContext('#ctx', {
useWaterMark: true,
waterMarkText: '签字用好签',
waterMarkColor: 'rgba(0, 0, 0, 0.2)'
})
```
### 11.下载&打印
#### fileDownload
描述：文件下载。如果当前界面有未保存的笔迹，会先执行保存再进行下载。
```
await ctx.fileDownload()
```
#### filePrint
描述：文件打印。如果当前界面有未保存的笔迹，会先执行保存再进行打印。
```
await ctx.filePrint()
```
#### pagePrintConfig
描述：配置打印文件的页码。默认第一页。
```javascript
// 打印第一页，页码下标从0计数
new WSContext('#ctx', {
pagePrintConfig: (pageTotal: number) => { // pageTotal 文件总页数
return [0]
}
})
// 打印所有页
new WSContext('#ctx', {
pagePrintConfig: (pageTotal: number) => {
return [] // 返回值为 空数组 时，将打印所有页
}
})
// 打印第一页、最后一页
new WSContext('#ctx', {
pagePrintConfig: (pageTotal: number) => { // pageTotal 文件总页数
return [0, pageTotal - 1]
}
})
```
### 12.其他功能
#### 配置项
- `isReadSigData: boolean`：是否读取/显示文件自带的验签信息。默认`false`
- `renderViews: ('topbar'|'signtemp'|'stamp'|'verify'|'thumb'|'toolbar')[]`：渲染的功能模块，默认`['topbar', 'signtemp', 'signtxt', 'verify', 'thumb']`
- `topbar`顶部工具栏
- `signtemp`左部签名模板
- `signtxt`左侧文本模板
- `verify`右部验签
- `thumb`右部缩略图
- `toolbar`上部工具栏
#### 回调方法
- `onRenderEnd: Function`：渲染结束回调方法
- `onSave: Function`：保存结束回调
- `onPsdModalCancel: Function`：当用户数据文件密码点击取消的回调
- `onScrollEnd: Fucntion`：当签字界面滚动结束
- `onAddSigntmplClick: Function`：通过`addSigntmpl`方法添加签名时，用户点击插入签名时的回调
- `onDeleteVerify： Function`：当用户删除已保存笔迹时回调
```javascript
const ctx = new WSContext('#ctx' {
onRenderEnd: (result) => {
// result = { success: boolean, msg?: string, data?: { fileId: string, pageTotal: number } }
},
onSave: (result) => {
// result = { success: boolean, msg: string, data?: { fileId: string } }
}
onPsdModalCancel: () => {},
onScrollEnd: (pageNum: number) => {
// 当前界面页码
},
onAddSigntmplClick: () => {},
onDeleteVerify: (verifyArr: IVerify[]) => {
// verifyArr 被删除的笔迹验签信息数组
}
})
```
#### scrollToPage
参数：`pageNumber: number`页码，从0计数
描述：滚动到指定页
```javascript
ctx.scrollToPage(10)
```
#### corePageIdx
描述：签字界面当前显示页
```javascript
const pageIdx = ctx.corePageIdx
```
#### zoomTo
参数：`zoom: number`缩放比例，`0.5->10`
描述：缩放文件
```javascript
ctx.zoomTo(2)
```
#### zoomFitWidth
描述：签字界面缩放到“适合页宽的”比例
```javascript
ctx.zoomFitWidth()
```
#### zoom
描述：获取签字界面缩放比例
```javascript
const zoom = ctx.zoom
```
#### pushBlank
描述：新增空白页
```javascript
ctx.pushBlank()
```
#### rotatePage
描述：顺时针旋转页
参数：旋转页的页码，从0计数。
```javascript
await ctx.rotatePage(0)
```
#### switchFile
参数： `fileId: string` fileIds中文件的fileId
描述：多文件渲染时，切换文件。
```javascript
ctx.switchFile('xxx')
```
#### toggleSignTools
描述：左侧签名功能区域显示隐藏
```javascript
ctx.toggleSignTools
```
#### isSignToolsShow
描述：左侧签名功能区域是否显示。（这是一个属性）
```javascript
const isShow = ctx.isSignToolsShow
```
#### toggleNoteTools
描述：右侧签名功能区域显示隐藏
```javascript
ctx.toggleNoteTools（）
```
#### isNoteToolsShow
描述：右侧缩略图验签功能区域是否显示。（这是一个属性）
```javascript
const isShow = ctx.isNoteToolsShow
```
#### destroy
```javascript
ctx.destroy()
ctx = undefined
```