@kne/react-pdf-sign 1.1.0 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +66 -40
  2. package/dist/index.css +5 -0
  3. package/dist/index.css.map +1 -1
  4. package/dist/index.js +3470 -169
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.modern.js +3469 -169
  7. package/dist/index.modern.js.map +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -133,7 +133,9 @@ const { Flex, Button, Switch, App } = antd;
133
133
  const BaseExample = () => {
134
134
  const [pdfFile, setPdfFile] = useState(null);
135
135
  const [isEdit, setIsEdit] = useState(true);
136
+ const [isFat, setIsFat] = useState(false);
136
137
  const ref = useRef(null);
138
+ const [signatureList, setSignatureList] = useState([]);
137
139
  const signatureModal = useSignature();
138
140
  const { message } = App.useApp();
139
141
  return (
@@ -149,44 +151,65 @@ const BaseExample = () => {
149
151
  }}
150
152
  />
151
153
  </Button>
152
- {pdfFile && (
153
- <Flex gap={8}>
154
- <div>编辑模式:</div>
155
- <Switch value={isEdit} onChange={setIsEdit} />
156
- </Flex>
157
- )}
158
- {pdfFile && isEdit && (
159
- <Button
160
- onClick={() => {
161
- ref.current.addSignLocation();
162
- }}>
163
- 添加签名位置
164
- </Button>
165
- )}
166
- {pdfFile && !isEdit && (
167
- <Button
168
- onClick={async () => {
169
- try {
170
- const blob = await ref.current.sign();
171
- const link = document.createElement('a');
172
- const url = URL.createObjectURL(blob);
173
- link.href = url;
174
- link.download = 'signed-document.pdf';
175
- link.click();
176
- URL.revokeObjectURL(url);
177
- } catch (e) {
178
- message.error(e.message);
179
- }
180
- }}>
181
- 生成签名PDF
182
- </Button>
183
- )}
154
+ </Flex>
155
+ <Flex gap={8} align="center" justify="space-between">
156
+ <Flex gap={8} align="center">
157
+ {pdfFile && (
158
+ <Flex gap={8}>
159
+ <div>编辑模式:</div>
160
+ <Switch value={isEdit} onChange={setIsEdit} />
161
+ </Flex>
162
+ )}
163
+ {pdfFile && !isEdit && (
164
+ <Flex gap={8}>
165
+ <div>页面是否平铺:</div>
166
+ <Switch value={isFat} onChange={setIsFat} />
167
+ </Flex>
168
+ )}
169
+ {pdfFile && isEdit && (
170
+ <Button
171
+ onClick={() => {
172
+ ref.current.addSignLocation();
173
+ }}>
174
+ 添加签名位置
175
+ </Button>
176
+ )}
177
+ </Flex>
178
+ <Flex gap={8} align="center">
179
+ {pdfFile && !isEdit && (
180
+ <Flex>
181
+ <div>已签名/签名区:</div>
182
+ <div>
183
+ {signatureList.filter(item => item.signature).length}/{signatureList.length}
184
+ </div>
185
+ </Flex>
186
+ )}
187
+ {pdfFile && !isEdit && (
188
+ <Button
189
+ onClick={async () => {
190
+ try {
191
+ const blob = await ref.current.sign();
192
+ const link = document.createElement('a');
193
+ const url = URL.createObjectURL(blob);
194
+ link.href = url;
195
+ link.download = 'signed-document.pdf';
196
+ link.click();
197
+ URL.revokeObjectURL(url);
198
+ } catch (e) {
199
+ message.error(e.message);
200
+ }
201
+ }}>
202
+ 生成签名PDF
203
+ </Button>
204
+ )}
205
+ </Flex>
184
206
  </Flex>
185
207
  {pdfFile ? (
186
208
  <PDFSignMulti
187
209
  url={pdfFile}
188
210
  ref={ref}
189
211
  isEdit={isEdit}
212
+ isFlat={!isEdit && isFat}
190
213
  onSign={({ size, callback }) => {
191
214
  signatureModal({
192
215
  mask: (
@@ -201,6 +224,7 @@ const BaseExample = () => {
201
224
  }
202
225
  });
203
226
  }}
227
+ onChange={setSignatureList}
204
228
  />
205
229
  ) : null}
206
230
  </Flex>
@@ -534,6 +558,7 @@ render(<BaseExample />);
534
558
  | filename | string | 'signed-document.pdf' | 生成签名PDF的文件名 |
535
559
  | defaultSignatureList | array | - | 默认签名位置列表 |
536
560
  | isEdit | boolean | - | 是否处于编辑模式 |
561
+ | isFlat | boolean | - | 是否平铺显示所有页面 |
537
562
  | onSign | function | - | 点击签名区域时的回调函数 |
538
563
  | onChange | function | - | 签名位置列表变化回调函数 |
539
564
 
@@ -551,14 +576,15 @@ render(<BaseExample />);
551
576
 
552
577
  PDF 文档查看器组件，提供 PDF 页面浏览功能。
553
578
 
554
- | 属性 | 类型 | 默认值 | 说明 |
555
- |-------------|--------|------|-------------------|
556
- | url | string | - | PDF 文件的 URL 地址 |
557
- | className | string | - | 自定义 CSS 类名 |
558
- | defaultPage | number | 1 | 默认显示的页码 |
559
- | maxWidth | number | 1200 | 最大显示宽度 |
560
- | pdfjsUrl | string | - | 自定义 pdf.js CDN 地址 |
561
- | apis | object | - | API 配置对象 |
579
+ | 属性 | 类型 | 默认值 | 说明 |
580
+ |-------------|---------|------|-------------------|
581
+ | url | string | - | PDF 文件的 URL 地址 |
582
+ | className | string | - | 自定义 CSS 类名 |
583
+ | defaultPage | number | 1 | 默认显示的页码 |
584
+ | maxWidth | number | 1200 | 最大显示宽度 |
585
+ | pdfjsUrl | string | - | 自定义 pdf.js CDN 地址 |
586
+ | apis | object | - | API 配置对象 |
587
+ | isFlat | boolean | - | 是否平铺显示所有页面 |
562
588
 
563
589
  #### children 渲染属性
564
590
 
package/dist/index.css CHANGED
@@ -9,6 +9,11 @@
9
9
  margin: 0 auto;
10
10
  }
11
11
 
12
+ ._RgZXN {
13
+ width: 100%;
14
+ position: relative;
15
+ }
16
+
12
17
  ._PAju1 {
13
18
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
14
19
  }
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,cAAc;EACd,kBAAkB;EAClB,iBAAiB;EACjB,WAAW;AACb;AACA;;EAEE,cAAc;AAChB;;AAEA;EACE,wEAAwE;AAC1E;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,WAAW;AACb;;AAEA;;EAEE,kBAAkB;EAClB,eAAe;EACf,qBAAqB;EACrB,WAAW;EACX,YAAY;EACZ,eAAe;EACf,YAAY;AACd;;AAEA;EACE,kBAAkB;EAClB,YAAY;EACZ,SAAS;EACT,2BAA2B;EAC3B,cAAc;EACd,0CAA0C;EAC1C,yCAAyC;EACzC,kBAAkB;AACpB;;AAEA;EACE,QAAQ;AACV;;AAEA;EACE,yBAAyB;EACzB,kBAAkB;EAClB,kBAAkB;AACpB;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA;EACE,gBAAgB;EAChB,WAAW;AACb;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,oBAAoB;AACtB","file":"index.css","sourcesContent":[".pdf-view-container {\n margin: 0 auto;\n position: relative;\n max-width: 1200px;\n width: 100%;\n}\n.pdf-view-container :global(.react-pdf__Page__canvas),\n.pdf-view-container :global(.textLayer) {\n margin: 0 auto;\n}\n\n.pdf-view {\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n}\n\n.pdf-view-children {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 10;\n}\n\n.pdf-view-page-control-left,\n.pdf-view-page-control-right {\n position: absolute;\n font-size: 30px;\n top: calc(50% - 19px);\n z-index: 10;\n padding: 8px;\n cursor: pointer;\n opacity: 0.3;\n}\n\n.pdf-view-page-control-current {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n color: #666666;\n background-color: rgba(255, 255, 255, 0.5);\n text-shadow: 0 0 8px white, 0 0 8px white;\n border-radius: 4px;\n}\n\n.pdf-view-page-control-right {\n right: 0;\n}\n\n.signature-container {\n border: 1px solid #cccccc;\n border-radius: 4px;\n position: relative;\n}\n\n.signature-canvas {\n width: 100%;\n height: 100%;\n}\n\n.signature-modal :global .ant-modal-confirm-paragraph {\n max-width: unset;\n width: 100%;\n}\n\n.signature-mask {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}"]}
1
+ {"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,cAAc;EACd,kBAAkB;EAClB,iBAAiB;EACjB,WAAW;AACb;AACA;;EAEE,cAAc;AAChB;;AAEA;EACE,WAAW;EACX,kBAAkB;AACpB;;AAEA;EACE,wEAAwE;AAC1E;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,WAAW;AACb;;AAEA;;EAEE,kBAAkB;EAClB,eAAe;EACf,qBAAqB;EACrB,WAAW;EACX,YAAY;EACZ,eAAe;EACf,YAAY;AACd;;AAEA;EACE,kBAAkB;EAClB,YAAY;EACZ,SAAS;EACT,2BAA2B;EAC3B,cAAc;EACd,0CAA0C;EAC1C,yCAAyC;EACzC,kBAAkB;AACpB;;AAEA;EACE,QAAQ;AACV;;AAEA;EACE,yBAAyB;EACzB,kBAAkB;EAClB,kBAAkB;AACpB;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA;EACE,gBAAgB;EAChB,WAAW;AACb;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,oBAAoB;AACtB","file":"index.css","sourcesContent":[".pdf-view-container {\n margin: 0 auto;\n position: relative;\n max-width: 1200px;\n width: 100%;\n}\n.pdf-view-container :global(.react-pdf__Page__canvas),\n.pdf-view-container :global(.textLayer) {\n margin: 0 auto;\n}\n\n.pdf-view-container {\n width: 100%;\n position: relative;\n}\n\n.pdf-view {\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n}\n\n.pdf-view-children {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 10;\n}\n\n.pdf-view-page-control-left,\n.pdf-view-page-control-right {\n position: absolute;\n font-size: 30px;\n top: calc(50% - 19px);\n z-index: 10;\n padding: 8px;\n cursor: pointer;\n opacity: 0.3;\n}\n\n.pdf-view-page-control-current {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n color: #666666;\n background-color: rgba(255, 255, 255, 0.5);\n text-shadow: 0 0 8px white, 0 0 8px white;\n border-radius: 4px;\n}\n\n.pdf-view-page-control-right {\n right: 0;\n}\n\n.signature-container {\n border: 1px solid #cccccc;\n border-radius: 4px;\n position: relative;\n}\n\n.signature-canvas {\n width: 100%;\n height: 100%;\n}\n\n.signature-modal :global .ant-modal-confirm-paragraph {\n max-width: unset;\n width: 100%;\n}\n\n.signature-mask {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}"]}