@kne-components/react-pdf-sign 1.0.4 → 1.0.5

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 (14) hide show
  1. package/build/asset-manifest.json +10 -10
  2. package/build/index.html +1 -1
  3. package/build/remoteEntry.js +1 -1
  4. package/build/remoteEntry.js.map +1 -1
  5. package/build/static/js/{198.0416f8ff.chunk.js → 198.3144322c.chunk.js} +2 -2
  6. package/build/static/js/{198.0416f8ff.chunk.js.map → 198.3144322c.chunk.js.map} +1 -1
  7. package/build/static/js/{340.90e6b38c.chunk.js → 340.d03c4008.chunk.js} +2 -2
  8. package/build/static/js/{340.90e6b38c.chunk.js.map → 340.d03c4008.chunk.js.map} +1 -1
  9. package/build/static/js/{8.3d610f54.chunk.js → 8.f7e618a6.chunk.js} +2 -2
  10. package/build/static/js/8.f7e618a6.chunk.js.map +1 -0
  11. package/build/static/js/{main.77101774.js → main.d586bc4b.js} +2 -2
  12. package/build/static/js/{main.77101774.js.map → main.d586bc4b.js.map} +1 -1
  13. package/package.json +1 -1
  14. package/build/static/js/8.3d610f54.chunk.js.map +0 -1
package/build/static/js/{198.0416f8ff.chunk.js.map → 198.3144322c.chunk.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"static/js/198.0416f8ff.chunk.js","mappings":"+SAMAA,OAAOC,WAAaC,kBAOpB,MAAMC,EAAW,CACfC,IAAK,yBAA0BC,IAAK,iE,+FCThCC,EAAgBC,EAAAA,GAAYD,cAuBlC,EArBYE,IAAiC,IAAhC,aAAEC,GAAwBD,EAAPE,GAAKC,EAAAA,EAAAA,GAAAH,EAAAI,GACnC,OACIC,EAAAA,EAAAA,KAACC,EAAAA,WAAU,CAAAC,UACTF,EAAAA,EAAAA,KAACP,GAAaU,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACNN,GAAK,IACTO,MAAO,CACL,CACEC,IAAK,aACLC,KAAM,IACNC,MAAO,iBAGXC,OAAQZ,EACRa,WAAYb,EAAaa,WACzBC,OAAQA,EAAAA,QACRC,UAAW,CAAEC,KAAM,YCjBzBC,EAAOC,EAAAA,WAAoBC,SAASC,eAAe,SAEtCC,WACjB,MAAMrB,OFSkBqB,WACxB,MAAMC,GAAOC,EAAAA,EAAAA,GAAW,CACtBC,aAAcC,GAASC,EAAAA,QAAQD,MAAMA,KAGjCE,GAAoBpB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACrBb,GAAQ,IAAEkC,OAAQ,kBAAmBC,eAAgB,UAgC1D,OA7BAC,EAAAA,EAAAA,QAAmB,CACjBC,QAAS,CACPC,QAASL,EAAsB,kBAAmBA,EAAsB,uBAAqBpB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACxFb,GAAQ,IAAEkC,OAAQ,sBAAuBC,eAAgB,UAC3D,kBAEFtB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACIb,GAAQ,IAAEkC,OAAQ,iBAAkBC,eAAgBpC,cAM7DwC,EAAAA,EAAAA,QAAY,CACVX,OAAMY,SAAS9B,EAAAA,EAAAA,KAAC+B,EAAAA,KAAI,CAACC,MAAO,IACPC,MAAO,CACLC,SAAU,WACVC,KAAM,MACNC,QAAS,OACTC,UAAW,sBACNhB,MAAO,KAAMiB,OAAOtC,EAAAA,EAAAA,KAACuC,EAAAA,MAAK,IAAKC,kBAAoBC,IAC7E,MAAM,KAAEC,GAASD,EAIjB,OAHAA,EAASC,KAAO,CACdC,KAAoB,IAAdD,EAAKC,KAAa,IAAMD,EAAKC,KAAMC,IAAKF,EAAKE,IAAKC,QAASH,EAAKA,MAEjED,KAIJ,CACLvB,OAAM4B,MAAO,CAAC,EAAGC,KAAM,CAAC,EAAGtC,WAAY,CACrCuC,aAAc,aEjDSC,GACpBpC,EAAKqC,QAAOlD,EAAAA,EAAAA,KAACmD,EAAG,CAAC1C,WAAYb,EAAaa,WAAYb,aAAcA,MAG7EwD,CAAWD,E,sLCHX,MAooBA,EApoBqB,CACjBE,KAAM,iBACNC,QAAS,2qGAiBTC,YAAa,qdACbC,YAAa,sBACbC,IAAK,65MAuULC,QAAS,CACLC,QAAQ,EACRC,UAAW,uBACX3B,MAAO,GACP4B,KAAM,CAAC,CACXtD,MAAO,uCACPgD,YAAa,mJACbZ,KAAM,siEAiENmB,MAAO,CAAC,CACRT,KAAM,gBACNG,YAAa,kCACbO,gBAAiB,uDACjBC,UAAW,GACb,CACEX,KAAM,OACNG,YAAa,OACbQ,UAAW,KAEb,CACEzD,MAAO,iCACPgD,YAAa,yJACbZ,KAAM,mNAaNmB,MAAO,CAAC,CACRT,KAAM,gBACNG,YAAa,kCACbO,gBAAiB,uDACjBC,UAAW,KAEb,CACEzD,MAAO,wBACPgD,YAAa,8HACbZ,KAAM,uOAcNmB,MAAO,CAAC,CACRT,KAAM,gBACNG,YAAa,kCACbO,gBAAiB,uDACjBC,UAAW,GACb,CACEX,KAAM,cACNG,YAAa,oBACbQ,UAAW,iBAEb,CACEzD,MAAO,8BACPgD,YAAa,qKACbZ,KAAM,4/EAiFNmB,MAAO,CAAC,CACRT,KAAM,gBACNG,YAAa,kCACbO,gBAAiB,uDACjBC,UAAW,GACb,CACEX,KAAM,cACNG,YAAa,oBACbQ,UAAW,eACb,CACEX,KAAM,aACNG,YAAa,sBACbQ,UAAW,eACb,CACEX,KAAM,OACNG,YAAa,OACbQ,UAAW,KAEb,CACEzD,MAAO,uCACPgD,YAAa,8GACbZ,KAAM,yzCA+CNmB,MAAO,CAAC,CACRT,KAAM,gBACNG,YAAa,kCACbO,gBAAiB,uDACjBC,UAAW,GACb,CACEX,KAAM,OACNG,YAAa,OACbQ,UAAW,O","sources":["preset.js","App.js","bootstrap.js","../../README.md"],"sourcesContent":["import React from 'react';\nimport { preset as fetchPreset } from '@kne/react-fetch';\nimport { Spin, Empty, message } from 'antd';\nimport createAjax from '@kne/axios-fetch';\nimport { preset as remoteLoaderPreset } from '@kne/remote-loader';\n\nwindow.PUBLIC_URL = process.env.PUBLIC_URL;\n\n// url: 'https://registry.npmmirror.com',\n// tpl: '{{url}}/@kne-components%2f{{remote}}/{{version}}/files/build',\n\n// url: 'https://cdn.jsdelivr.net', tpl: '{{url}}/npm/@kne-components/{{remote}}@{{version}}/build'\n\nconst registry = {\n url: 'https://uc.fatalent.cn', tpl: '{{url}}/packages/@kne-components/{{remote}}/{{version}}/build'\n};\n\nexport const globalInit = async () => {\n const ajax = createAjax({\n errorHandler: error => message.error(error)\n });\n\n const componentsCoreRemote = {\n ...registry, remote: 'components-core', defaultVersion: '0.4.3'\n };\n\n remoteLoaderPreset({\n remotes: {\n default: componentsCoreRemote, 'components-core': componentsCoreRemote, 'components-iconfont': {\n ...registry, remote: 'components-iconfont', defaultVersion: '0.2.1'\n }, 'react-pdf-sign': process.env.NODE_ENV === 'development' ? {\n remote: 'react-pdf-sign', url: '/', tpl: '{{url}}'\n } : {\n ...registry, remote: 'react-pdf-sign', defaultVersion: process.env.DEFAULT_VERSION\n }\n }\n });\n\n\n fetchPreset({\n ajax, loading: <Spin delay={500}\n style={{\n position: 'absolute',\n left: '50%',\n padding: '10px',\n transform: 'translateX(-50%)'\n }} />, error: null, empty: <Empty />, transformResponse: (response) => {\n const { data } = response;\n response.data = {\n code: data.code === 0 ? 200 : data.code, msg: data.msg, results: data.data\n };\n return response;\n }\n });\n\n return {\n ajax, enums: {}, apis: {}, themeToken: {\n colorPrimary: '#4183F0'\n }\n };\n};\n","import { HashRouter } from \"react-router-dom\";\nimport createEntry from \"@kne/modules-dev/dist/create-entry.modern\";\nimport \"@kne/modules-dev/dist/create-entry.css\";\nimport readme from \"readme\";\n\nconst ExampleRoutes = createEntry.ExampleRoutes;\n\nconst App = ({ globalPreset, ...props }) => {\n return (\n <HashRouter>\n <ExampleRoutes\n {...props}\n paths={[\n {\n key: \"components\",\n path: \"/\",\n title: \"首页\",\n },\n ]}\n preset={globalPreset}\n themeToken={globalPreset.themeToken}\n readme={readme}\n pageProps={{ menu: null }}\n />\n </HashRouter>\n );\n};\n\nexport default App;\n","import { globalInit } from './preset';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\n\nconst renderRoot = async (App) => {\n const globalPreset = await globalInit();\n return root.render(<App themeToken={globalPreset.themeToken} globalPreset={globalPreset} />);\n};\n\nrenderRoot(App);\n","import * as component_1 from '@kne/current-lib_react-pdf-sign';\nimport * as component_2 from 'antd';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nimport * as component_5 from './doc/example.pdf';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nimport * as component_7 from './doc/signature.png';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nconst readmeConfig = {\n name: `react-pdf-sign`,\n summary: `<p>这是一个功能强大的 React PDF 签名组件库，专为需要在 PDF 文档上添加电子签名的应用场景而设计。该组件库提供了灵活的签名解决方案，支持即时签名添加和预定义签名区域两种模式。</p>\n<h2>核心特性</h2>\n<p><strong>直观的签名体验</strong> - 提供手写签名画板，用户可以通过鼠标或触摸设备自然地绘制签名，签名支持实时预览和调整。支持在签名画板上叠加自定义内容，如日期、文字等。</p>\n<p><strong>灵活的定位控制</strong> - 签名区域可以在 PDF 页面上自由拖拽、缩放和精确定位，支持保持比例缩放，确保签名的视觉效果。</p>\n<p><strong>完整的 PDF 操作</strong> - 基于 pdf-lib 和 react-pdf，支持多页 PDF 文档的浏览、签名定位和最终签名文件的生成。</p>\n<p><strong>组件化设计</strong> - 提供多个独立组件（PDFSign、PDFViewer、LocationLayer、useSignature），开发者可以根据需求灵活组合使用。支持默认签名位置设置和位置变化回调，便于集成到现有业务流程。</p>\n<p><strong>国际化支持</strong> - 内置中英文语言包，支持多语言切换，适合国际化应用。</p>\n<p><strong>现代化技术栈</strong> - 基于 React 18+，使用 Konva.js 实现高性能的图形渲染，支持响应式设计。</p>\n<h2>使用场景</h2>\n<ul>\n<li>合同签署系统</li>\n<li>文档审批流程</li>\n<li>电子表单签名</li>\n<li>证书颁发系统</li>\n<li>法律文件签署</li>\n</ul>\n<p>该组件库简化了 PDF 签名的复杂实现，开发者只需要几行代码就能集成完整的签名功能，大大提升了开发效率。新增的签名叠加功能让签名更加丰富和个性化，满足各种业务场景需求。</p>`,\n description: `这是一个功能强大的 React PDF 签名组件库，专为需要在 PDF 文档上添加电子签名的应用场景而设计。该组件库提供了灵活的签名解决方案，支持即时签名添加和预定义签名区域两种模式`,\n packageName: `@kne/react-pdf-sign`,\n api: `<h3>PDFSign</h3>\n<p>主要的 PDF 签名组件，集成了 PDF 查看器和签名定位功能。</p>\n<table>\n<thead>\n<tr>\n<th>属性</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>string</td>\n<td>-</td>\n<td>PDF 文件的 URL 地址</td>\n</tr>\n<tr>\n<td>signature</td>\n<td>string</td>\n<td>-</td>\n<td>签名图片的 URL 地址</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>签名区域的宽度</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>50</td>\n<td>签名区域的高度</td>\n</tr>\n<tr>\n<td>padding</td>\n<td>number</td>\n<td>8</td>\n<td>签名区域变换器的内边距</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>string</td>\n<td>'拖拽到签名位置'</td>\n<td>签名区域的占位文本</td>\n</tr>\n<tr>\n<td>filename</td>\n<td>string</td>\n<td>'signed-document.pdf'</td>\n<td>生成签名PDF的文件名</td>\n</tr>\n<tr>\n<td>defaultLocation</td>\n<td>object</td>\n<td>-</td>\n<td>默认签名位置信息</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>function</td>\n<td>-</td>\n<td>签名位置变化回调函数</td>\n</tr>\n</tbody>\n</table>\n<h4>实例方法</h4>\n<table>\n<thead>\n<tr>\n<th>方法名</th>\n<th>参数</th>\n<th>返回值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>getLocation</td>\n<td>-</td>\n<td>object</td>\n<td>获取当前签名位置信息</td>\n</tr>\n<tr>\n<td>setLocation</td>\n<td>location: object</td>\n<td>-</td>\n<td>设置签名位置</td>\n</tr>\n<tr>\n<td>getPdfSignature</td>\n<td>-</td>\n<td>object</td>\n<td>获取 PDF 签名信息</td>\n</tr>\n<tr>\n<td>sign</td>\n<td>-</td>\n<td>Promise&lt;File&gt;</td>\n<td>生成签名后的 PDF 文件</td>\n</tr>\n</tbody>\n</table>\n<h3>PDFViewer</h3>\n<p>PDF 文档查看器组件，提供 PDF 页面浏览功能。</p>\n<table>\n<thead>\n<tr>\n<th>属性</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>string</td>\n<td>-</td>\n<td>PDF 文件的 URL 地址</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>-</td>\n<td>自定义 CSS 类名</td>\n</tr>\n<tr>\n<td>defaultPage</td>\n<td>number</td>\n<td>1</td>\n<td>默认显示的页码</td>\n</tr>\n<tr>\n<td>maxWidth</td>\n<td>number</td>\n<td>1200</td>\n<td>最大显示宽度</td>\n</tr>\n<tr>\n<td>pdfjsUrl</td>\n<td>string</td>\n<td>-</td>\n<td>自定义 pdf.js CDN 地址</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>object</td>\n<td>-</td>\n<td>API 配置对象</td>\n</tr>\n</tbody>\n</table>\n<h4>children 渲染属性</h4>\n<p>当 children 为函数时，会传入以下参数：</p>\n<table>\n<thead>\n<tr>\n<th>参数</th>\n<th>类型</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>size</td>\n<td>object</td>\n<td>当前页面的尺寸信息</td>\n</tr>\n<tr>\n<td>currentPage</td>\n<td>number</td>\n<td>当前页码</td>\n</tr>\n<tr>\n<td>pageSize</td>\n<td>number</td>\n<td>总页数</td>\n</tr>\n</tbody>\n</table>\n<h3>LocationLayer</h3>\n<p>签名定位层组件，用于在 PDF 上定位和调整签名区域。</p>\n<table>\n<thead>\n<tr>\n<th>属性</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>stageWidth</td>\n<td>number</td>\n<td>-</td>\n<td>画布宽度（必需）</td>\n</tr>\n<tr>\n<td>stageHeight</td>\n<td>number</td>\n<td>-</td>\n<td>画布高度（必需）</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>签名区域宽度</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>50</td>\n<td>签名区域高度</td>\n</tr>\n<tr>\n<td>padding</td>\n<td>number</td>\n<td>8</td>\n<td>变换器内边距</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>string</td>\n<td>'拖拽到签名位置'</td>\n<td>占位文本</td>\n</tr>\n<tr>\n<td>signature</td>\n<td>string</td>\n<td>-</td>\n<td>签名图片 URL</td>\n</tr>\n<tr>\n<td>value</td>\n<td>object</td>\n<td>-</td>\n<td>受控的位置值</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>function</td>\n<td>-</td>\n<td>位置变化回调</td>\n</tr>\n</tbody>\n</table>\n<h3>useSignature</h3>\n<p>签名画板 Hook，提供手写签名功能。</p>\n<h4>返回的函数参数</h4>\n<table>\n<thead>\n<tr>\n<th>参数</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>filename</td>\n<td>string</td>\n<td>'signature.png'</td>\n<td>签名文件名</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>签名画板宽度</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>80</td>\n<td>签名画板高度</td>\n</tr>\n<tr>\n<td>mask</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>签名画板叠加内容</td>\n</tr>\n<tr>\n<td>onSuccess</td>\n<td>function</td>\n<td>-</td>\n<td>签名完成回调</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>object</td>\n<td>-</td>\n<td>Modal 组件属性</td>\n</tr>\n</tbody>\n</table>\n<h4>Hook 配置参数</h4>\n<table>\n<thead>\n<tr>\n<th>参数</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>默认签名画板宽度</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>80</td>\n<td>默认签名画板高度</td>\n</tr>\n</tbody>\n</table>`,\n example: {\n isFull: false,\n className: `react_pdf_sign_e88dd`,\n style: ``,\n list: [{\n title: `完整签名流程`,\n description: `演示PDF上传、手写签名创建和签名PDF生成的完整工作流程`,\n code: `const { default: ReactPdfSign, useSignature } = _ReactPdfSign;\nconst { useState, useRef } = React;\nconst { Flex, Button } = antd;\n\nconst BaseExample = () => {\n const [pdfFile, setPdfFile] = useState(null);\n const [sign, setSign] = useState(null);\n const ref = useRef(null);\n const signatureModal = useSignature();\n return (\n <Flex vertical gap={12}>\n <Flex gap={8}>\n <Button>\n <input\n type=\"file\"\n accept=\"application/pdf\"\n onChange={e => {\n const file = e.target.files[0];\n setPdfFile(URL.createObjectURL(file));\n }}\n />\n </Button>\n {pdfFile && (\n <Button\n onClick={() => {\n const { size } = ref.current.getLocation();\n signatureModal({\n mask: (\n <Flex justify=\"flex-end\" align=\"flex-end\" style={{ height: '100%', width: '100%', padding: '10px', boxSizing: 'border-box' }}>\n 签字日期: {new Date().toLocaleDateString()}\n </Flex>\n ),\n width: size.width,\n height: size.height,\n onSuccess: file => {\n setSign(URL.createObjectURL(file));\n }\n });\n }}>\n 添加签名\n </Button>\n )}\n {pdfFile && sign && (\n <Button\n onClick={async () => {\n const blob = await ref.current.sign();\n const link = document.createElement('a');\n const url = URL.createObjectURL(blob);\n link.href = url;\n link.download = 'signed-document.pdf';\n link.click();\n URL.revokeObjectURL(url);\n }}>\n 生成签名PDF\n </Button>\n )}\n </Flex>\n {pdfFile ? <ReactPdfSign url={pdfFile} signature={sign} ref={ref} /> : null}\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n},{\n title: `签名定位层`,\n description: `展示独立的签名定位组件，支持拖拽和缩放调整签名位置`,\n code: `const { LocationLayer } = _ReactPdfSign;\n\nconst BaseExample = () => {\n return (\n <div>\n <LocationLayer stageWidth={400} stageHeight={300} />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n}]\n},{\n title: `PDF查看器`,\n description: `基础的PDF文档查看器，支持页面切换和缩放显示`,\n code: `const { PDFViewer } = _ReactPdfSign;\nconst { default: examplePdf } = _examplePdf;\n\nconst BaseExample = () => {\n return (\n <div>\n <PDFViewer url={examplePdf} />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n},{\n name: \"_examplePdf\",\n packageName: \"./doc/example.pdf\",\n component: component_5\n}]\n},{\n title: `PDF签名组件`,\n description: `演示PDF签名组件的API使用，包括位置获取、设置和签名文件生成`,\n code: `const { PDFSign } = _ReactPdfSign;\nconst { default: examplePdf } = _examplePdf;\nconst { default: signature } = _signature;\nconst { useRef } = React;\nconst { Flex, Button, App } = antd;\n\nconst BaseExample = () => {\n const ref = useRef();\n const ref2 = useRef();\n const { modal } = App.useApp();\n return (\n <Flex vertical gap={24}>\n <Flex vertical gap={8}>\n <Flex gap={8}>\n <Button\n onClick={() => {\n const location = ref.current.getLocation();\n modal.info({\n title: '签名位置',\n content: <pre>{JSON.stringify(location, null, 2)}</pre>\n });\n }}>\n 获取签名位置\n </Button>\n <Button\n onClick={() => {\n ref.current.setLocation({\n size: {\n width: 390,\n height: 156,\n x: 163,\n y: 8\n },\n scaleX: 1.95,\n scaleY: 1.95,\n x: 163,\n y: 8\n });\n }}>\n 设置签名位置\n </Button>\n <Button onClick={()=>{\n ref.current.setLocation({});\n }}>恢复到默认位置</Button>\n <Button\n onClick={() => {\n const pdfSignature = ref.current.getPdfSignature();\n modal.info({\n title: 'PDF签名信息',\n content: <pre style={{ 'white-space': 'break-spaces' }}>{JSON.stringify(pdfSignature, null, 2)}</pre>\n });\n }}>\n 获取PDF签名信息\n </Button>\n </Flex>\n <PDFSign url={examplePdf} ref={ref} />\n </Flex>\n <Flex vertical gap={8}>\n <div>\n <Button\n onClick={async () => {\n const blob = await ref2.current.sign();\n const link = document.createElement('a');\n const url = URL.createObjectURL(blob);\n link.href = url;\n link.download = 'signed-document.pdf';\n link.click();\n URL.revokeObjectURL(url);\n }}>\n 生成签名文件\n </Button>\n </div>\n <PDFSign url={examplePdf} signature={signature} ref={ref2} />\n </Flex>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n},{\n name: \"_examplePdf\",\n packageName: \"./doc/example.pdf\",\n component: component_5\n},{\n name: \"_signature\",\n packageName: \"./doc/signature.png\",\n component: component_7\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n},{\n title: `手写签名画板`,\n description: `展示useSignature Hook的使用，打开手写签名模态框`,\n code: `const { useSignature } = _ReactPdfSign;\nconst { Button, Flex } = antd;\n\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [result, setResult] = useState(null);\n const modal = useSignature();\n return (\n <Flex vertical gap={12}>\n {result && <img src={result} alt=\"result\" style={{ width: '300px' }} />}\n <Flex gap={8}>\n <Button\n onClick={() => {\n modal({\n onSuccess: file => {\n console.log(file);\n setResult(URL.createObjectURL(file));\n }\n });\n }}>\n 签名\n </Button>\n <Button\n onClick={() => {\n modal({\n mask: (\n <Flex justify=\"flex-end\" align=\"flex-end\" style={{ height: '100%', width: '100%', padding: '10px', boxSizing: 'border-box' }}>\n 签字日期: {new Date().toLocaleDateString()}\n </Flex>\n ),\n onSuccess: file => {\n console.log(file);\n setResult(URL.createObjectURL(file));\n }\n });\n }}>\n 带有日期模版的签名\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n}]\n }\n};\nexport default readmeConfig;\n"],"names":["window","PUBLIC_URL","process","registry","url","tpl","ExampleRoutes","createEntry","_ref","globalPreset","props","_objectWithoutProperties","_excluded","_jsx","HashRouter","children","_objectSpread","paths","key","path","title","preset","themeToken","readme","pageProps","menu","root","ReactDOM","document","getElementById","async","ajax","createAjax","errorHandler","error","message","componentsCoreRemote","remote","defaultVersion","remoteLoaderPreset","remotes","default","fetchPreset","loading","Spin","delay","style","position","left","padding","transform","empty","Empty","transformResponse","response","data","code","msg","results","enums","apis","colorPrimary","globalInit","render","App","renderRoot","name","summary","description","packageName","api","example","isFull","className","list","scope","importStatement","component"],"ignoreList":[],"sourceRoot":""}
1
+ {"version":3,"file":"static/js/198.3144322c.chunk.js","mappings":"+SAMAA,OAAOC,WAAaC,kBAOpB,MAAMC,EAAW,CACfC,IAAK,yBAA0BC,IAAK,iE,+FCThCC,EAAgBC,EAAAA,GAAYD,cAuBlC,EArBYE,IAAiC,IAAhC,aAAEC,GAAwBD,EAAPE,GAAKC,EAAAA,EAAAA,GAAAH,EAAAI,GACnC,OACIC,EAAAA,EAAAA,KAACC,EAAAA,WAAU,CAAAC,UACTF,EAAAA,EAAAA,KAACP,GAAaU,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACNN,GAAK,IACTO,MAAO,CACL,CACEC,IAAK,aACLC,KAAM,IACNC,MAAO,iBAGXC,OAAQZ,EACRa,WAAYb,EAAaa,WACzBC,OAAQA,EAAAA,QACRC,UAAW,CAAEC,KAAM,YCjBzBC,EAAOC,EAAAA,WAAoBC,SAASC,eAAe,SAEtCC,WACjB,MAAMrB,OFSkBqB,WACxB,MAAMC,GAAOC,EAAAA,EAAAA,GAAW,CACtBC,aAAcC,GAASC,EAAAA,QAAQD,MAAMA,KAGjCE,GAAoBpB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACrBb,GAAQ,IAAEkC,OAAQ,kBAAmBC,eAAgB,UAgC1D,OA7BAC,EAAAA,EAAAA,QAAmB,CACjBC,QAAS,CACPC,QAASL,EAAsB,kBAAmBA,EAAsB,uBAAqBpB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACxFb,GAAQ,IAAEkC,OAAQ,sBAAuBC,eAAgB,UAC3D,kBAEFtB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACIb,GAAQ,IAAEkC,OAAQ,iBAAkBC,eAAgBpC,cAM7DwC,EAAAA,EAAAA,QAAY,CACVX,OAAMY,SAAS9B,EAAAA,EAAAA,KAAC+B,EAAAA,KAAI,CAACC,MAAO,IACPC,MAAO,CACLC,SAAU,WACVC,KAAM,MACNC,QAAS,OACTC,UAAW,sBACNhB,MAAO,KAAMiB,OAAOtC,EAAAA,EAAAA,KAACuC,EAAAA,MAAK,IAAKC,kBAAoBC,IAC7E,MAAM,KAAEC,GAASD,EAIjB,OAHAA,EAASC,KAAO,CACdC,KAAoB,IAAdD,EAAKC,KAAa,IAAMD,EAAKC,KAAMC,IAAKF,EAAKE,IAAKC,QAASH,EAAKA,MAEjED,KAIJ,CACLvB,OAAM4B,MAAO,CAAC,EAAGC,KAAM,CAAC,EAAGtC,WAAY,CACrCuC,aAAc,aEjDSC,GACpBpC,EAAKqC,QAAOlD,EAAAA,EAAAA,KAACmD,EAAG,CAAC1C,WAAYb,EAAaa,WAAYb,aAAcA,MAG7EwD,CAAWD,E,sLCHX,MAooBA,EApoBqB,CACjBE,KAAM,iBACNC,QAAS,2qGAiBTC,YAAa,qdACbC,YAAa,sBACbC,IAAK,65MAuULC,QAAS,CACLC,QAAQ,EACRC,UAAW,uBACX3B,MAAO,GACP4B,KAAM,CAAC,CACXtD,MAAO,uCACPgD,YAAa,mJACbZ,KAAM,siEAiENmB,MAAO,CAAC,CACRT,KAAM,gBACNG,YAAa,kCACbO,gBAAiB,uDACjBC,UAAW,GACb,CACEX,KAAM,OACNG,YAAa,OACbQ,UAAW,KAEb,CACEzD,MAAO,iCACPgD,YAAa,yJACbZ,KAAM,mNAaNmB,MAAO,CAAC,CACRT,KAAM,gBACNG,YAAa,kCACbO,gBAAiB,uDACjBC,UAAW,KAEb,CACEzD,MAAO,wBACPgD,YAAa,8HACbZ,KAAM,uOAcNmB,MAAO,CAAC,CACRT,KAAM,gBACNG,YAAa,kCACbO,gBAAiB,uDACjBC,UAAW,GACb,CACEX,KAAM,cACNG,YAAa,oBACbQ,UAAW,iBAEb,CACEzD,MAAO,8BACPgD,YAAa,qKACbZ,KAAM,4/EAiFNmB,MAAO,CAAC,CACRT,KAAM,gBACNG,YAAa,kCACbO,gBAAiB,uDACjBC,UAAW,GACb,CACEX,KAAM,cACNG,YAAa,oBACbQ,UAAW,eACb,CACEX,KAAM,aACNG,YAAa,sBACbQ,UAAW,eACb,CACEX,KAAM,OACNG,YAAa,OACbQ,UAAW,KAEb,CACEzD,MAAO,uCACPgD,YAAa,8GACbZ,KAAM,yzCA+CNmB,MAAO,CAAC,CACRT,KAAM,gBACNG,YAAa,kCACbO,gBAAiB,uDACjBC,UAAW,GACb,CACEX,KAAM,OACNG,YAAa,OACbQ,UAAW,O","sources":["preset.js","App.js","bootstrap.js","../../README.md"],"sourcesContent":["import React from 'react';\nimport { preset as fetchPreset } from '@kne/react-fetch';\nimport { Spin, Empty, message } from 'antd';\nimport createAjax from '@kne/axios-fetch';\nimport { preset as remoteLoaderPreset } from '@kne/remote-loader';\n\nwindow.PUBLIC_URL = process.env.PUBLIC_URL;\n\n// url: 'https://registry.npmmirror.com',\n// tpl: '{{url}}/@kne-components%2f{{remote}}/{{version}}/files/build',\n\n// url: 'https://cdn.jsdelivr.net', tpl: '{{url}}/npm/@kne-components/{{remote}}@{{version}}/build'\n\nconst registry = {\n url: 'https://uc.fatalent.cn', tpl: '{{url}}/packages/@kne-components/{{remote}}/{{version}}/build'\n};\n\nexport const globalInit = async () => {\n const ajax = createAjax({\n errorHandler: error => message.error(error)\n });\n\n const componentsCoreRemote = {\n ...registry, remote: 'components-core', defaultVersion: '0.4.3'\n };\n\n remoteLoaderPreset({\n remotes: {\n default: componentsCoreRemote, 'components-core': componentsCoreRemote, 'components-iconfont': {\n ...registry, remote: 'components-iconfont', defaultVersion: '0.2.1'\n }, 'react-pdf-sign': process.env.NODE_ENV === 'development' ? {\n remote: 'react-pdf-sign', url: '/', tpl: '{{url}}'\n } : {\n ...registry, remote: 'react-pdf-sign', defaultVersion: process.env.DEFAULT_VERSION\n }\n }\n });\n\n\n fetchPreset({\n ajax, loading: <Spin delay={500}\n style={{\n position: 'absolute',\n left: '50%',\n padding: '10px',\n transform: 'translateX(-50%)'\n }} />, error: null, empty: <Empty />, transformResponse: (response) => {\n const { data } = response;\n response.data = {\n code: data.code === 0 ? 200 : data.code, msg: data.msg, results: data.data\n };\n return response;\n }\n });\n\n return {\n ajax, enums: {}, apis: {}, themeToken: {\n colorPrimary: '#4183F0'\n }\n };\n};\n","import { HashRouter } from \"react-router-dom\";\nimport createEntry from \"@kne/modules-dev/dist/create-entry.modern\";\nimport \"@kne/modules-dev/dist/create-entry.css\";\nimport readme from \"readme\";\n\nconst ExampleRoutes = createEntry.ExampleRoutes;\n\nconst App = ({ globalPreset, ...props }) => {\n return (\n <HashRouter>\n <ExampleRoutes\n {...props}\n paths={[\n {\n key: \"components\",\n path: \"/\",\n title: \"首页\",\n },\n ]}\n preset={globalPreset}\n themeToken={globalPreset.themeToken}\n readme={readme}\n pageProps={{ menu: null }}\n />\n </HashRouter>\n );\n};\n\nexport default App;\n","import { globalInit } from './preset';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\n\nconst renderRoot = async (App) => {\n const globalPreset = await globalInit();\n return root.render(<App themeToken={globalPreset.themeToken} globalPreset={globalPreset} />);\n};\n\nrenderRoot(App);\n","import * as component_1 from '@kne/current-lib_react-pdf-sign';\nimport * as component_2 from 'antd';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nimport * as component_5 from './doc/example.pdf';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nimport * as component_7 from './doc/signature.png';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nconst readmeConfig = {\n name: `react-pdf-sign`,\n summary: `<p>这是一个功能强大的 React PDF 签名组件库，专为需要在 PDF 文档上添加电子签名的应用场景而设计。该组件库提供了灵活的签名解决方案，支持即时签名添加和预定义签名区域两种模式。</p>\n<h2>核心特性</h2>\n<p><strong>直观的签名体验</strong> - 提供手写签名画板，用户可以通过鼠标或触摸设备自然地绘制签名，签名支持实时预览和调整。支持在签名画板上叠加自定义内容，如日期、文字等。</p>\n<p><strong>灵活的定位控制</strong> - 签名区域可以在 PDF 页面上自由拖拽、缩放和精确定位，支持保持比例缩放，确保签名的视觉效果。</p>\n<p><strong>完整的 PDF 操作</strong> - 基于 pdf-lib 和 react-pdf，支持多页 PDF 文档的浏览、签名定位和最终签名文件的生成。</p>\n<p><strong>组件化设计</strong> - 提供多个独立组件（PDFSign、PDFViewer、LocationLayer、useSignature），开发者可以根据需求灵活组合使用。支持默认签名位置设置和位置变化回调，便于集成到现有业务流程。</p>\n<p><strong>国际化支持</strong> - 内置中英文语言包，支持多语言切换，适合国际化应用。</p>\n<p><strong>现代化技术栈</strong> - 基于 React 18+，使用 Konva.js 实现高性能的图形渲染，支持响应式设计。</p>\n<h2>使用场景</h2>\n<ul>\n<li>合同签署系统</li>\n<li>文档审批流程</li>\n<li>电子表单签名</li>\n<li>证书颁发系统</li>\n<li>法律文件签署</li>\n</ul>\n<p>该组件库简化了 PDF 签名的复杂实现，开发者只需要几行代码就能集成完整的签名功能，大大提升了开发效率。新增的签名叠加功能让签名更加丰富和个性化，满足各种业务场景需求。</p>`,\n description: `这是一个功能强大的 React PDF 签名组件库，专为需要在 PDF 文档上添加电子签名的应用场景而设计。该组件库提供了灵活的签名解决方案，支持即时签名添加和预定义签名区域两种模式`,\n packageName: `@kne/react-pdf-sign`,\n api: `<h3>PDFSign</h3>\n<p>主要的 PDF 签名组件，集成了 PDF 查看器和签名定位功能。</p>\n<table>\n<thead>\n<tr>\n<th>属性</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>string</td>\n<td>-</td>\n<td>PDF 文件的 URL 地址</td>\n</tr>\n<tr>\n<td>signature</td>\n<td>string</td>\n<td>-</td>\n<td>签名图片的 URL 地址</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>签名区域的宽度</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>50</td>\n<td>签名区域的高度</td>\n</tr>\n<tr>\n<td>padding</td>\n<td>number</td>\n<td>8</td>\n<td>签名区域变换器的内边距</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>string</td>\n<td>'拖拽到签名位置'</td>\n<td>签名区域的占位文本</td>\n</tr>\n<tr>\n<td>filename</td>\n<td>string</td>\n<td>'signed-document.pdf'</td>\n<td>生成签名PDF的文件名</td>\n</tr>\n<tr>\n<td>defaultLocation</td>\n<td>object</td>\n<td>-</td>\n<td>默认签名位置信息</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>function</td>\n<td>-</td>\n<td>签名位置变化回调函数</td>\n</tr>\n</tbody>\n</table>\n<h4>实例方法</h4>\n<table>\n<thead>\n<tr>\n<th>方法名</th>\n<th>参数</th>\n<th>返回值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>getLocation</td>\n<td>-</td>\n<td>object</td>\n<td>获取当前签名位置信息</td>\n</tr>\n<tr>\n<td>setLocation</td>\n<td>location: object</td>\n<td>-</td>\n<td>设置签名位置</td>\n</tr>\n<tr>\n<td>getPdfSignature</td>\n<td>-</td>\n<td>object</td>\n<td>获取 PDF 签名信息</td>\n</tr>\n<tr>\n<td>sign</td>\n<td>-</td>\n<td>Promise&lt;File&gt;</td>\n<td>生成签名后的 PDF 文件</td>\n</tr>\n</tbody>\n</table>\n<h3>PDFViewer</h3>\n<p>PDF 文档查看器组件，提供 PDF 页面浏览功能。</p>\n<table>\n<thead>\n<tr>\n<th>属性</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>string</td>\n<td>-</td>\n<td>PDF 文件的 URL 地址</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>-</td>\n<td>自定义 CSS 类名</td>\n</tr>\n<tr>\n<td>defaultPage</td>\n<td>number</td>\n<td>1</td>\n<td>默认显示的页码</td>\n</tr>\n<tr>\n<td>maxWidth</td>\n<td>number</td>\n<td>1200</td>\n<td>最大显示宽度</td>\n</tr>\n<tr>\n<td>pdfjsUrl</td>\n<td>string</td>\n<td>-</td>\n<td>自定义 pdf.js CDN 地址</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>object</td>\n<td>-</td>\n<td>API 配置对象</td>\n</tr>\n</tbody>\n</table>\n<h4>children 渲染属性</h4>\n<p>当 children 为函数时，会传入以下参数：</p>\n<table>\n<thead>\n<tr>\n<th>参数</th>\n<th>类型</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>size</td>\n<td>object</td>\n<td>当前页面的尺寸信息</td>\n</tr>\n<tr>\n<td>currentPage</td>\n<td>number</td>\n<td>当前页码</td>\n</tr>\n<tr>\n<td>pageSize</td>\n<td>number</td>\n<td>总页数</td>\n</tr>\n</tbody>\n</table>\n<h3>LocationLayer</h3>\n<p>签名定位层组件，用于在 PDF 上定位和调整签名区域。</p>\n<table>\n<thead>\n<tr>\n<th>属性</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>stageWidth</td>\n<td>number</td>\n<td>-</td>\n<td>画布宽度（必需）</td>\n</tr>\n<tr>\n<td>stageHeight</td>\n<td>number</td>\n<td>-</td>\n<td>画布高度（必需）</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>签名区域宽度</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>50</td>\n<td>签名区域高度</td>\n</tr>\n<tr>\n<td>padding</td>\n<td>number</td>\n<td>8</td>\n<td>变换器内边距</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>string</td>\n<td>'拖拽到签名位置'</td>\n<td>占位文本</td>\n</tr>\n<tr>\n<td>signature</td>\n<td>string</td>\n<td>-</td>\n<td>签名图片 URL</td>\n</tr>\n<tr>\n<td>value</td>\n<td>object</td>\n<td>-</td>\n<td>受控的位置值</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>function</td>\n<td>-</td>\n<td>位置变化回调</td>\n</tr>\n</tbody>\n</table>\n<h3>useSignature</h3>\n<p>签名画板 Hook，提供手写签名功能。</p>\n<h4>返回的函数参数</h4>\n<table>\n<thead>\n<tr>\n<th>参数</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>filename</td>\n<td>string</td>\n<td>'signature.png'</td>\n<td>签名文件名</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>签名画板宽度</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>80</td>\n<td>签名画板高度</td>\n</tr>\n<tr>\n<td>mask</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>签名画板叠加内容</td>\n</tr>\n<tr>\n<td>onSuccess</td>\n<td>function</td>\n<td>-</td>\n<td>签名完成回调</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>object</td>\n<td>-</td>\n<td>Modal 组件属性</td>\n</tr>\n</tbody>\n</table>\n<h4>Hook 配置参数</h4>\n<table>\n<thead>\n<tr>\n<th>参数</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>默认签名画板宽度</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>80</td>\n<td>默认签名画板高度</td>\n</tr>\n</tbody>\n</table>`,\n example: {\n isFull: false,\n className: `react_pdf_sign_e88dd`,\n style: ``,\n list: [{\n title: `完整签名流程`,\n description: `演示PDF上传、手写签名创建和签名PDF生成的完整工作流程`,\n code: `const { default: ReactPdfSign, useSignature } = _ReactPdfSign;\nconst { useState, useRef } = React;\nconst { Flex, Button } = antd;\n\nconst BaseExample = () => {\n const [pdfFile, setPdfFile] = useState(null);\n const [sign, setSign] = useState(null);\n const ref = useRef(null);\n const signatureModal = useSignature();\n return (\n <Flex vertical gap={12}>\n <Flex gap={8}>\n <Button>\n <input\n type=\"file\"\n accept=\"application/pdf\"\n onChange={e => {\n const file = e.target.files[0];\n setPdfFile(URL.createObjectURL(file));\n }}\n />\n </Button>\n {pdfFile && (\n <Button\n onClick={() => {\n const { size } = ref.current.getLocation();\n signatureModal({\n mask: (\n <Flex justify=\"flex-end\" align=\"flex-end\" style={{ height: '100%', width: '100%', padding: '10px', boxSizing: 'border-box' }}>\n 签字日期: {new Date().toLocaleDateString()}\n </Flex>\n ),\n width: size.width,\n height: size.height,\n onSuccess: file => {\n setSign(URL.createObjectURL(file));\n }\n });\n }}>\n 添加签名\n </Button>\n )}\n {pdfFile && sign && (\n <Button\n onClick={async () => {\n const blob = await ref.current.sign();\n const link = document.createElement('a');\n const url = URL.createObjectURL(blob);\n link.href = url;\n link.download = 'signed-document.pdf';\n link.click();\n URL.revokeObjectURL(url);\n }}>\n 生成签名PDF\n </Button>\n )}\n </Flex>\n {pdfFile ? <ReactPdfSign url={pdfFile} signature={sign} ref={ref} /> : null}\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n},{\n title: `签名定位层`,\n description: `展示独立的签名定位组件，支持拖拽和缩放调整签名位置`,\n code: `const { LocationLayer } = _ReactPdfSign;\n\nconst BaseExample = () => {\n return (\n <div>\n <LocationLayer stageWidth={400} stageHeight={300} />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n}]\n},{\n title: `PDF查看器`,\n description: `基础的PDF文档查看器，支持页面切换和缩放显示`,\n code: `const { PDFViewer } = _ReactPdfSign;\nconst { default: examplePdf } = _examplePdf;\n\nconst BaseExample = () => {\n return (\n <div>\n <PDFViewer url={examplePdf} />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n},{\n name: \"_examplePdf\",\n packageName: \"./doc/example.pdf\",\n component: component_5\n}]\n},{\n title: `PDF签名组件`,\n description: `演示PDF签名组件的API使用，包括位置获取、设置和签名文件生成`,\n code: `const { PDFSign } = _ReactPdfSign;\nconst { default: examplePdf } = _examplePdf;\nconst { default: signature } = _signature;\nconst { useRef } = React;\nconst { Flex, Button, App } = antd;\n\nconst BaseExample = () => {\n const ref = useRef();\n const ref2 = useRef();\n const { modal } = App.useApp();\n return (\n <Flex vertical gap={24}>\n <Flex vertical gap={8}>\n <Flex gap={8}>\n <Button\n onClick={() => {\n const location = ref.current.getLocation();\n modal.info({\n title: '签名位置',\n content: <pre>{JSON.stringify(location, null, 2)}</pre>\n });\n }}>\n 获取签名位置\n </Button>\n <Button\n onClick={() => {\n ref.current.setLocation({\n size: {\n width: 390,\n height: 156,\n x: 163,\n y: 8\n },\n scaleX: 1.95,\n scaleY: 1.95,\n x: 163,\n y: 8\n });\n }}>\n 设置签名位置\n </Button>\n <Button onClick={()=>{\n ref.current.setLocation({});\n }}>恢复到默认位置</Button>\n <Button\n onClick={() => {\n const pdfSignature = ref.current.getPdfSignature();\n modal.info({\n title: 'PDF签名信息',\n content: <pre style={{ 'white-space': 'break-spaces' }}>{JSON.stringify(pdfSignature, null, 2)}</pre>\n });\n }}>\n 获取PDF签名信息\n </Button>\n </Flex>\n <PDFSign url={examplePdf} ref={ref} />\n </Flex>\n <Flex vertical gap={8}>\n <div>\n <Button\n onClick={async () => {\n const blob = await ref2.current.sign();\n const link = document.createElement('a');\n const url = URL.createObjectURL(blob);\n link.href = url;\n link.download = 'signed-document.pdf';\n link.click();\n URL.revokeObjectURL(url);\n }}>\n 生成签名文件\n </Button>\n </div>\n <PDFSign url={examplePdf} signature={signature} ref={ref2} />\n </Flex>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n},{\n name: \"_examplePdf\",\n packageName: \"./doc/example.pdf\",\n component: component_5\n},{\n name: \"_signature\",\n packageName: \"./doc/signature.png\",\n component: component_7\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n},{\n title: `手写签名画板`,\n description: `展示useSignature Hook的使用，打开手写签名模态框`,\n code: `const { useSignature } = _ReactPdfSign;\nconst { Button, Flex } = antd;\n\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [result, setResult] = useState(null);\n const modal = useSignature();\n return (\n <Flex vertical gap={12}>\n {result && <img src={result} alt=\"result\" style={{ width: '300px' }} />}\n <Flex gap={8}>\n <Button\n onClick={() => {\n modal({\n onSuccess: file => {\n console.log(file);\n setResult(URL.createObjectURL(file));\n }\n });\n }}>\n 签名\n </Button>\n <Button\n onClick={() => {\n modal({\n mask: (\n <Flex justify=\"flex-end\" align=\"flex-end\" style={{ height: '100%', width: '100%', padding: '10px', boxSizing: 'border-box' }}>\n 签字日期: {new Date().toLocaleDateString()}\n </Flex>\n ),\n onSuccess: file => {\n console.log(file);\n setResult(URL.createObjectURL(file));\n }\n });\n }}>\n 带有日期模版的签名\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n}]\n }\n};\nexport default readmeConfig;\n"],"names":["window","PUBLIC_URL","process","registry","url","tpl","ExampleRoutes","createEntry","_ref","globalPreset","props","_objectWithoutProperties","_excluded","_jsx","HashRouter","children","_objectSpread","paths","key","path","title","preset","themeToken","readme","pageProps","menu","root","ReactDOM","document","getElementById","async","ajax","createAjax","errorHandler","error","message","componentsCoreRemote","remote","defaultVersion","remoteLoaderPreset","remotes","default","fetchPreset","loading","Spin","delay","style","position","left","padding","transform","empty","Empty","transformResponse","response","data","code","msg","results","enums","apis","colorPrimary","globalInit","render","App","renderRoot","name","summary","description","packageName","api","example","isFull","className","list","scope","importStatement","component"],"ignoreList":[],"sourceRoot":""}
package/build/static/js/{340.90e6b38c.chunk.js → 340.d03c4008.chunk.js} RENAMED
@@ -1,2 +1,2 @@
1
- "use strict";(self.webpackChunk_kne_components_react_pdf_sign=self.webpackChunk_kne_components_react_pdf_sign||[]).push([[340],{26784:(n,t,e)=>{e.r(t),e.d(t,{default:()=>c,manifest:()=>s});var d=e(81755),a=e(55199);const r=e.p+"static/media/example.034ae1f30c5fe6d68d26.pdf";var i=e.t(r);const o=e.p+"static/media/signature.841922fcd4ffbb9de231.png";const c={ReactPdfSign:{name:"react-pdf-sign",summary:"<p>\u8fd9\u662f\u4e00\u4e2a\u529f\u80fd\u5f3a\u5927\u7684 React PDF \u7b7e\u540d\u7ec4\u4ef6\u5e93\uff0c\u4e13\u4e3a\u9700\u8981\u5728 PDF \u6587\u6863\u4e0a\u6dfb\u52a0\u7535\u5b50\u7b7e\u540d\u7684\u5e94\u7528\u573a\u666f\u800c\u8bbe\u8ba1\u3002\u8be5\u7ec4\u4ef6\u5e93\u63d0\u4f9b\u4e86\u7075\u6d3b\u7684\u7b7e\u540d\u89e3\u51b3\u65b9\u6848\uff0c\u652f\u6301\u5373\u65f6\u7b7e\u540d\u6dfb\u52a0\u548c\u9884\u5b9a\u4e49\u7b7e\u540d\u533a\u57df\u4e24\u79cd\u6a21\u5f0f\u3002</p>\n<h2>\u6838\u5fc3\u7279\u6027</h2>\n<p><strong>\u76f4\u89c2\u7684\u7b7e\u540d\u4f53\u9a8c</strong> - \u63d0\u4f9b\u624b\u5199\u7b7e\u540d\u753b\u677f\uff0c\u7528\u6237\u53ef\u4ee5\u901a\u8fc7\u9f20\u6807\u6216\u89e6\u6478\u8bbe\u5907\u81ea\u7136\u5730\u7ed8\u5236\u7b7e\u540d\uff0c\u7b7e\u540d\u652f\u6301\u5b9e\u65f6\u9884\u89c8\u548c\u8c03\u6574\u3002\u652f\u6301\u5728\u7b7e\u540d\u753b\u677f\u4e0a\u53e0\u52a0\u81ea\u5b9a\u4e49\u5185\u5bb9\uff0c\u5982\u65e5\u671f\u3001\u6587\u5b57\u7b49\u3002</p>\n<p><strong>\u7075\u6d3b\u7684\u5b9a\u4f4d\u63a7\u5236</strong> - \u7b7e\u540d\u533a\u57df\u53ef\u4ee5\u5728 PDF \u9875\u9762\u4e0a\u81ea\u7531\u62d6\u62fd\u3001\u7f29\u653e\u548c\u7cbe\u786e\u5b9a\u4f4d\uff0c\u652f\u6301\u4fdd\u6301\u6bd4\u4f8b\u7f29\u653e\uff0c\u786e\u4fdd\u7b7e\u540d\u7684\u89c6\u89c9\u6548\u679c\u3002</p>\n<p><strong>\u5b8c\u6574\u7684 PDF \u64cd\u4f5c</strong> - \u57fa\u4e8e pdf-lib \u548c react-pdf\uff0c\u652f\u6301\u591a\u9875 PDF \u6587\u6863\u7684\u6d4f\u89c8\u3001\u7b7e\u540d\u5b9a\u4f4d\u548c\u6700\u7ec8\u7b7e\u540d\u6587\u4ef6\u7684\u751f\u6210\u3002</p>\n<p><strong>\u7ec4\u4ef6\u5316\u8bbe\u8ba1</strong> - \u63d0\u4f9b\u591a\u4e2a\u72ec\u7acb\u7ec4\u4ef6\uff08PDFSign\u3001PDFViewer\u3001LocationLayer\u3001useSignature\uff09\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u6839\u636e\u9700\u6c42\u7075\u6d3b\u7ec4\u5408\u4f7f\u7528\u3002\u652f\u6301\u9ed8\u8ba4\u7b7e\u540d\u4f4d\u7f6e\u8bbe\u7f6e\u548c\u4f4d\u7f6e\u53d8\u5316\u56de\u8c03\uff0c\u4fbf\u4e8e\u96c6\u6210\u5230\u73b0\u6709\u4e1a\u52a1\u6d41\u7a0b\u3002</p>\n<p><strong>\u56fd\u9645\u5316\u652f\u6301</strong> - \u5185\u7f6e\u4e2d\u82f1\u6587\u8bed\u8a00\u5305\uff0c\u652f\u6301\u591a\u8bed\u8a00\u5207\u6362\uff0c\u9002\u5408\u56fd\u9645\u5316\u5e94\u7528\u3002</p>\n<p><strong>\u73b0\u4ee3\u5316\u6280\u672f\u6808</strong> - \u57fa\u4e8e React 18+\uff0c\u4f7f\u7528 Konva.js \u5b9e\u73b0\u9ad8\u6027\u80fd\u7684\u56fe\u5f62\u6e32\u67d3\uff0c\u652f\u6301\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u3002</p>\n<h2>\u4f7f\u7528\u573a\u666f</h2>\n<ul>\n<li>\u5408\u540c\u7b7e\u7f72\u7cfb\u7edf</li>\n<li>\u6587\u6863\u5ba1\u6279\u6d41\u7a0b</li>\n<li>\u7535\u5b50\u8868\u5355\u7b7e\u540d</li>\n<li>\u8bc1\u4e66\u9881\u53d1\u7cfb\u7edf</li>\n<li>\u6cd5\u5f8b\u6587\u4ef6\u7b7e\u7f72</li>\n</ul>\n<p>\u8be5\u7ec4\u4ef6\u5e93\u7b80\u5316\u4e86 PDF \u7b7e\u540d\u7684\u590d\u6742\u5b9e\u73b0\uff0c\u5f00\u53d1\u8005\u53ea\u9700\u8981\u51e0\u884c\u4ee3\u7801\u5c31\u80fd\u96c6\u6210\u5b8c\u6574\u7684\u7b7e\u540d\u529f\u80fd\uff0c\u5927\u5927\u63d0\u5347\u4e86\u5f00\u53d1\u6548\u7387\u3002\u65b0\u589e\u7684\u7b7e\u540d\u53e0\u52a0\u529f\u80fd\u8ba9\u7b7e\u540d\u66f4\u52a0\u4e30\u5bcc\u548c\u4e2a\u6027\u5316\uff0c\u6ee1\u8db3\u5404\u79cd\u4e1a\u52a1\u573a\u666f\u9700\u6c42\u3002</p>",description:"\u8fd9\u662f\u4e00\u4e2a\u529f\u80fd\u5f3a\u5927\u7684 React PDF \u7b7e\u540d\u7ec4\u4ef6\u5e93\uff0c\u4e13\u4e3a\u9700\u8981\u5728 PDF \u6587\u6863\u4e0a\u6dfb\u52a0\u7535\u5b50\u7b7e\u540d\u7684\u5e94\u7528\u573a\u666f\u800c\u8bbe\u8ba1\u3002\u8be5\u7ec4\u4ef6\u5e93\u63d0\u4f9b\u4e86\u7075\u6d3b\u7684\u7b7e\u540d\u89e3\u51b3\u65b9\u6848\uff0c\u652f\u6301\u5373\u65f6\u7b7e\u540d\u6dfb\u52a0\u548c\u9884\u5b9a\u4e49\u7b7e\u540d\u533a\u57df\u4e24\u79cd\u6a21\u5f0f",packageName:"@kne/react-pdf-sign",api:"<h3>PDFSign</h3>\n<p>\u4e3b\u8981\u7684 PDF \u7b7e\u540d\u7ec4\u4ef6\uff0c\u96c6\u6210\u4e86 PDF \u67e5\u770b\u5668\u548c\u7b7e\u540d\u5b9a\u4f4d\u529f\u80fd\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>string</td>\n<td>-</td>\n<td>PDF \u6587\u4ef6\u7684 URL \u5730\u5740</td>\n</tr>\n<tr>\n<td>signature</td>\n<td>string</td>\n<td>-</td>\n<td>\u7b7e\u540d\u56fe\u7247\u7684 URL \u5730\u5740</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>\u7b7e\u540d\u533a\u57df\u7684\u5bbd\u5ea6</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>50</td>\n<td>\u7b7e\u540d\u533a\u57df\u7684\u9ad8\u5ea6</td>\n</tr>\n<tr>\n<td>padding</td>\n<td>number</td>\n<td>8</td>\n<td>\u7b7e\u540d\u533a\u57df\u53d8\u6362\u5668\u7684\u5185\u8fb9\u8ddd</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>string</td>\n<td>'\u62d6\u62fd\u5230\u7b7e\u540d\u4f4d\u7f6e'</td>\n<td>\u7b7e\u540d\u533a\u57df\u7684\u5360\u4f4d\u6587\u672c</td>\n</tr>\n<tr>\n<td>filename</td>\n<td>string</td>\n<td>'signed-document.pdf'</td>\n<td>\u751f\u6210\u7b7e\u540dPDF\u7684\u6587\u4ef6\u540d</td>\n</tr>\n<tr>\n<td>defaultLocation</td>\n<td>object</td>\n<td>-</td>\n<td>\u9ed8\u8ba4\u7b7e\u540d\u4f4d\u7f6e\u4fe1\u606f</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>function</td>\n<td>-</td>\n<td>\u7b7e\u540d\u4f4d\u7f6e\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n</tr>\n</tbody>\n</table>\n<h4>\u5b9e\u4f8b\u65b9\u6cd5</h4>\n<table>\n<thead>\n<tr>\n<th>\u65b9\u6cd5\u540d</th>\n<th>\u53c2\u6570</th>\n<th>\u8fd4\u56de\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>getLocation</td>\n<td>-</td>\n<td>object</td>\n<td>\u83b7\u53d6\u5f53\u524d\u7b7e\u540d\u4f4d\u7f6e\u4fe1\u606f</td>\n</tr>\n<tr>\n<td>setLocation</td>\n<td>location: object</td>\n<td>-</td>\n<td>\u8bbe\u7f6e\u7b7e\u540d\u4f4d\u7f6e</td>\n</tr>\n<tr>\n<td>getPdfSignature</td>\n<td>-</td>\n<td>object</td>\n<td>\u83b7\u53d6 PDF \u7b7e\u540d\u4fe1\u606f</td>\n</tr>\n<tr>\n<td>sign</td>\n<td>-</td>\n<td>Promise&lt;File&gt;</td>\n<td>\u751f\u6210\u7b7e\u540d\u540e\u7684 PDF \u6587\u4ef6</td>\n</tr>\n</tbody>\n</table>\n<h3>PDFViewer</h3>\n<p>PDF \u6587\u6863\u67e5\u770b\u5668\u7ec4\u4ef6\uff0c\u63d0\u4f9b PDF \u9875\u9762\u6d4f\u89c8\u529f\u80fd\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>string</td>\n<td>-</td>\n<td>PDF \u6587\u4ef6\u7684 URL \u5730\u5740</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49 CSS \u7c7b\u540d</td>\n</tr>\n<tr>\n<td>defaultPage</td>\n<td>number</td>\n<td>1</td>\n<td>\u9ed8\u8ba4\u663e\u793a\u7684\u9875\u7801</td>\n</tr>\n<tr>\n<td>maxWidth</td>\n<td>number</td>\n<td>1200</td>\n<td>\u6700\u5927\u663e\u793a\u5bbd\u5ea6</td>\n</tr>\n<tr>\n<td>pdfjsUrl</td>\n<td>string</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49 pdf.js CDN \u5730\u5740</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>object</td>\n<td>-</td>\n<td>API \u914d\u7f6e\u5bf9\u8c61</td>\n</tr>\n</tbody>\n</table>\n<h4>children \u6e32\u67d3\u5c5e\u6027</h4>\n<p>\u5f53 children \u4e3a\u51fd\u6570\u65f6\uff0c\u4f1a\u4f20\u5165\u4ee5\u4e0b\u53c2\u6570\uff1a</p>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570</th>\n<th>\u7c7b\u578b</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>size</td>\n<td>object</td>\n<td>\u5f53\u524d\u9875\u9762\u7684\u5c3a\u5bf8\u4fe1\u606f</td>\n</tr>\n<tr>\n<td>currentPage</td>\n<td>number</td>\n<td>\u5f53\u524d\u9875\u7801</td>\n</tr>\n<tr>\n<td>pageSize</td>\n<td>number</td>\n<td>\u603b\u9875\u6570</td>\n</tr>\n</tbody>\n</table>\n<h3>LocationLayer</h3>\n<p>\u7b7e\u540d\u5b9a\u4f4d\u5c42\u7ec4\u4ef6\uff0c\u7528\u4e8e\u5728 PDF \u4e0a\u5b9a\u4f4d\u548c\u8c03\u6574\u7b7e\u540d\u533a\u57df\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>stageWidth</td>\n<td>number</td>\n<td>-</td>\n<td>\u753b\u5e03\u5bbd\u5ea6\uff08\u5fc5\u9700\uff09</td>\n</tr>\n<tr>\n<td>stageHeight</td>\n<td>number</td>\n<td>-</td>\n<td>\u753b\u5e03\u9ad8\u5ea6\uff08\u5fc5\u9700\uff09</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>\u7b7e\u540d\u533a\u57df\u5bbd\u5ea6</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>50</td>\n<td>\u7b7e\u540d\u533a\u57df\u9ad8\u5ea6</td>\n</tr>\n<tr>\n<td>padding</td>\n<td>number</td>\n<td>8</td>\n<td>\u53d8\u6362\u5668\u5185\u8fb9\u8ddd</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>string</td>\n<td>'\u62d6\u62fd\u5230\u7b7e\u540d\u4f4d\u7f6e'</td>\n<td>\u5360\u4f4d\u6587\u672c</td>\n</tr>\n<tr>\n<td>signature</td>\n<td>string</td>\n<td>-</td>\n<td>\u7b7e\u540d\u56fe\u7247 URL</td>\n</tr>\n<tr>\n<td>value</td>\n<td>object</td>\n<td>-</td>\n<td>\u53d7\u63a7\u7684\u4f4d\u7f6e\u503c</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>function</td>\n<td>-</td>\n<td>\u4f4d\u7f6e\u53d8\u5316\u56de\u8c03</td>\n</tr>\n</tbody>\n</table>\n<h3>useSignature</h3>\n<p>\u7b7e\u540d\u753b\u677f Hook\uff0c\u63d0\u4f9b\u624b\u5199\u7b7e\u540d\u529f\u80fd\u3002</p>\n<h4>\u8fd4\u56de\u7684\u51fd\u6570\u53c2\u6570</h4>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>filename</td>\n<td>string</td>\n<td>'signature.png'</td>\n<td>\u7b7e\u540d\u6587\u4ef6\u540d</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>\u7b7e\u540d\u753b\u677f\u5bbd\u5ea6</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>80</td>\n<td>\u7b7e\u540d\u753b\u677f\u9ad8\u5ea6</td>\n</tr>\n<tr>\n<td>mask</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u7b7e\u540d\u753b\u677f\u53e0\u52a0\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>onSuccess</td>\n<td>function</td>\n<td>-</td>\n<td>\u7b7e\u540d\u5b8c\u6210\u56de\u8c03</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>object</td>\n<td>-</td>\n<td>Modal \u7ec4\u4ef6\u5c5e\u6027</td>\n</tr>\n</tbody>\n</table>\n<h4>Hook \u914d\u7f6e\u53c2\u6570</h4>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>\u9ed8\u8ba4\u7b7e\u540d\u753b\u677f\u5bbd\u5ea6</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>80</td>\n<td>\u9ed8\u8ba4\u7b7e\u540d\u753b\u677f\u9ad8\u5ea6</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!1,className:"react_pdf_sign_e88dd",style:"",list:[{title:"\u5b8c\u6574\u7b7e\u540d\u6d41\u7a0b",description:"\u6f14\u793aPDF\u4e0a\u4f20\u3001\u624b\u5199\u7b7e\u540d\u521b\u5efa\u548c\u7b7e\u540dPDF\u751f\u6210\u7684\u5b8c\u6574\u5de5\u4f5c\u6d41\u7a0b",code:"const { default: ReactPdfSign, useSignature } = _ReactPdfSign;\nconst { useState, useRef } = React;\nconst { Flex, Button } = antd;\n\nconst BaseExample = () => {\n const [pdfFile, setPdfFile] = useState(null);\n const [sign, setSign] = useState(null);\n const ref = useRef(null);\n const signatureModal = useSignature();\n return (\n <Flex vertical gap={12}>\n <Flex gap={8}>\n <Button>\n <input\n type=\"file\"\n accept=\"application/pdf\"\n onChange={e => {\n const file = e.target.files[0];\n setPdfFile(URL.createObjectURL(file));\n }}\n />\n </Button>\n {pdfFile && (\n <Button\n onClick={() => {\n const { size } = ref.current.getLocation();\n signatureModal({\n mask: (\n <Flex justify=\"flex-end\" align=\"flex-end\" style={{ height: '100%', width: '100%', padding: '10px', boxSizing: 'border-box' }}>\n \u7b7e\u5b57\u65e5\u671f: {new Date().toLocaleDateString()}\n </Flex>\n ),\n width: size.width,\n height: size.height,\n onSuccess: file => {\n setSign(URL.createObjectURL(file));\n }\n });\n }}>\n \u6dfb\u52a0\u7b7e\u540d\n </Button>\n )}\n {pdfFile && sign && (\n <Button\n onClick={async () => {\n const blob = await ref.current.sign();\n const link = document.createElement('a');\n const url = URL.createObjectURL(blob);\n link.href = url;\n link.download = 'signed-document.pdf';\n link.click();\n URL.revokeObjectURL(url);\n }}>\n \u751f\u6210\u7b7e\u540dPDF\n </Button>\n )}\n </Flex>\n {pdfFile ? <ReactPdfSign url={pdfFile} signature={sign} ref={ref} /> : null}\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ReactPdfSign",packageName:"@kne/current-lib_react-pdf-sign",importStatement:'import * as _ReactPdfSign from "@kne/react-pdf-sign"',component:d},{name:"antd",packageName:"antd",component:a}]},{title:"\u7b7e\u540d\u5b9a\u4f4d\u5c42",description:"\u5c55\u793a\u72ec\u7acb\u7684\u7b7e\u540d\u5b9a\u4f4d\u7ec4\u4ef6\uff0c\u652f\u6301\u62d6\u62fd\u548c\u7f29\u653e\u8c03\u6574\u7b7e\u540d\u4f4d\u7f6e",code:"const { LocationLayer } = _ReactPdfSign;\n\nconst BaseExample = () => {\n return (\n <div>\n <LocationLayer stageWidth={400} stageHeight={300} />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ReactPdfSign",packageName:"@kne/current-lib_react-pdf-sign",importStatement:'import * as _ReactPdfSign from "@kne/react-pdf-sign"',component:d}]},{title:"PDF\u67e5\u770b\u5668",description:"\u57fa\u7840\u7684PDF\u6587\u6863\u67e5\u770b\u5668\uff0c\u652f\u6301\u9875\u9762\u5207\u6362\u548c\u7f29\u653e\u663e\u793a",code:"const { PDFViewer } = _ReactPdfSign;\nconst { default: examplePdf } = _examplePdf;\n\nconst BaseExample = () => {\n return (\n <div>\n <PDFViewer url={examplePdf} />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ReactPdfSign",packageName:"@kne/current-lib_react-pdf-sign",importStatement:'import * as _ReactPdfSign from "@kne/react-pdf-sign"',component:d},{name:"_examplePdf",packageName:"./doc/example.pdf",component:i}]},{title:"PDF\u7b7e\u540d\u7ec4\u4ef6",description:"\u6f14\u793aPDF\u7b7e\u540d\u7ec4\u4ef6\u7684API\u4f7f\u7528\uff0c\u5305\u62ec\u4f4d\u7f6e\u83b7\u53d6\u3001\u8bbe\u7f6e\u548c\u7b7e\u540d\u6587\u4ef6\u751f\u6210",code:"const { PDFSign } = _ReactPdfSign;\nconst { default: examplePdf } = _examplePdf;\nconst { default: signature } = _signature;\nconst { useRef } = React;\nconst { Flex, Button, App } = antd;\n\nconst BaseExample = () => {\n const ref = useRef();\n const ref2 = useRef();\n const { modal } = App.useApp();\n return (\n <Flex vertical gap={24}>\n <Flex vertical gap={8}>\n <Flex gap={8}>\n <Button\n onClick={() => {\n const location = ref.current.getLocation();\n modal.info({\n title: '\u7b7e\u540d\u4f4d\u7f6e',\n content: <pre>{JSON.stringify(location, null, 2)}</pre>\n });\n }}>\n \u83b7\u53d6\u7b7e\u540d\u4f4d\u7f6e\n </Button>\n <Button\n onClick={() => {\n ref.current.setLocation({\n size: {\n width: 390,\n height: 156,\n x: 163,\n y: 8\n },\n scaleX: 1.95,\n scaleY: 1.95,\n x: 163,\n y: 8\n });\n }}>\n \u8bbe\u7f6e\u7b7e\u540d\u4f4d\u7f6e\n </Button>\n <Button onClick={()=>{\n ref.current.setLocation({});\n }}>\u6062\u590d\u5230\u9ed8\u8ba4\u4f4d\u7f6e</Button>\n <Button\n onClick={() => {\n const pdfSignature = ref.current.getPdfSignature();\n modal.info({\n title: 'PDF\u7b7e\u540d\u4fe1\u606f',\n content: <pre style={{ 'white-space': 'break-spaces' }}>{JSON.stringify(pdfSignature, null, 2)}</pre>\n });\n }}>\n \u83b7\u53d6PDF\u7b7e\u540d\u4fe1\u606f\n </Button>\n </Flex>\n <PDFSign url={examplePdf} ref={ref} />\n </Flex>\n <Flex vertical gap={8}>\n <div>\n <Button\n onClick={async () => {\n const blob = await ref2.current.sign();\n const link = document.createElement('a');\n const url = URL.createObjectURL(blob);\n link.href = url;\n link.download = 'signed-document.pdf';\n link.click();\n URL.revokeObjectURL(url);\n }}>\n \u751f\u6210\u7b7e\u540d\u6587\u4ef6\n </Button>\n </div>\n <PDFSign url={examplePdf} signature={signature} ref={ref2} />\n </Flex>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ReactPdfSign",packageName:"@kne/current-lib_react-pdf-sign",importStatement:'import * as _ReactPdfSign from "@kne/react-pdf-sign"',component:d},{name:"_examplePdf",packageName:"./doc/example.pdf",component:i},{name:"_signature",packageName:"./doc/signature.png",component:e.t(o)},{name:"antd",packageName:"antd",component:a}]},{title:"\u624b\u5199\u7b7e\u540d\u753b\u677f",description:"\u5c55\u793auseSignature Hook\u7684\u4f7f\u7528\uff0c\u6253\u5f00\u624b\u5199\u7b7e\u540d\u6a21\u6001\u6846",code:"const { useSignature } = _ReactPdfSign;\nconst { Button, Flex } = antd;\n\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [result, setResult] = useState(null);\n const modal = useSignature();\n return (\n <Flex vertical gap={12}>\n {result && <img src={result} alt=\"result\" style={{ width: '300px' }} />}\n <Flex gap={8}>\n <Button\n onClick={() => {\n modal({\n onSuccess: file => {\n console.log(file);\n setResult(URL.createObjectURL(file));\n }\n });\n }}>\n \u7b7e\u540d\n </Button>\n <Button\n onClick={() => {\n modal({\n mask: (\n <Flex justify=\"flex-end\" align=\"flex-end\" style={{ height: '100%', width: '100%', padding: '10px', boxSizing: 'border-box' }}>\n \u7b7e\u5b57\u65e5\u671f: {new Date().toLocaleDateString()}\n </Flex>\n ),\n onSuccess: file => {\n console.log(file);\n setResult(URL.createObjectURL(file));\n }\n });\n }}>\n \u5e26\u6709\u65e5\u671f\u6a21\u7248\u7684\u7b7e\u540d\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ReactPdfSign",packageName:"@kne/current-lib_react-pdf-sign",importStatement:'import * as _ReactPdfSign from "@kne/react-pdf-sign"',component:d},{name:"antd",packageName:"antd",component:a}]}]}}},s={name:"react-pdf-sign",version:"1.0.4","open-version":!0,"public-url":"/react-pdf-sign",modules:[{name:"react-pdf-sign",baseDir:"/home/runner/work/react-pdf-sign/react-pdf-sign",description:"\u8fd9\u662f\u4e00\u4e2a\u529f\u80fd\u5f3a\u5927\u7684 React PDF \u7b7e\u540d\u7ec4\u4ef6\u5e93\uff0c\u4e13\u4e3a\u9700\u8981\u5728 PDF \u6587\u6863\u4e0a\u6dfb\u52a0\u7535\u5b50\u7b7e\u540d\u7684\u5e94\u7528\u573a\u666f\u800c\u8bbe\u8ba1\u3002\u8be5\u7ec4\u4ef6\u5e93\u63d0\u4f9b\u4e86\u7075\u6d3b\u7684\u7b7e\u540d\u89e3\u51b3\u65b9\u6848\uff0c\u652f\u6301\u5373\u65f6\u7b7e\u540d\u6dfb\u52a0\u548c\u9884\u5b9a\u4e49\u7b7e\u540d\u533a\u57df\u4e24\u79cd\u6a21\u5f0f",packageName:"@kne/react-pdf-sign"}]}}}]);
2
- //# sourceMappingURL=340.90e6b38c.chunk.js.map
1
+ "use strict";(self.webpackChunk_kne_components_react_pdf_sign=self.webpackChunk_kne_components_react_pdf_sign||[]).push([[340],{26784:(n,t,e)=>{e.r(t),e.d(t,{default:()=>c,manifest:()=>s});var d=e(81755),a=e(55199);const r=e.p+"static/media/example.034ae1f30c5fe6d68d26.pdf";var i=e.t(r);const o=e.p+"static/media/signature.841922fcd4ffbb9de231.png";const c={ReactPdfSign:{name:"react-pdf-sign",summary:"<p>\u8fd9\u662f\u4e00\u4e2a\u529f\u80fd\u5f3a\u5927\u7684 React PDF \u7b7e\u540d\u7ec4\u4ef6\u5e93\uff0c\u4e13\u4e3a\u9700\u8981\u5728 PDF \u6587\u6863\u4e0a\u6dfb\u52a0\u7535\u5b50\u7b7e\u540d\u7684\u5e94\u7528\u573a\u666f\u800c\u8bbe\u8ba1\u3002\u8be5\u7ec4\u4ef6\u5e93\u63d0\u4f9b\u4e86\u7075\u6d3b\u7684\u7b7e\u540d\u89e3\u51b3\u65b9\u6848\uff0c\u652f\u6301\u5373\u65f6\u7b7e\u540d\u6dfb\u52a0\u548c\u9884\u5b9a\u4e49\u7b7e\u540d\u533a\u57df\u4e24\u79cd\u6a21\u5f0f\u3002</p>\n<h2>\u6838\u5fc3\u7279\u6027</h2>\n<p><strong>\u76f4\u89c2\u7684\u7b7e\u540d\u4f53\u9a8c</strong> - \u63d0\u4f9b\u624b\u5199\u7b7e\u540d\u753b\u677f\uff0c\u7528\u6237\u53ef\u4ee5\u901a\u8fc7\u9f20\u6807\u6216\u89e6\u6478\u8bbe\u5907\u81ea\u7136\u5730\u7ed8\u5236\u7b7e\u540d\uff0c\u7b7e\u540d\u652f\u6301\u5b9e\u65f6\u9884\u89c8\u548c\u8c03\u6574\u3002\u652f\u6301\u5728\u7b7e\u540d\u753b\u677f\u4e0a\u53e0\u52a0\u81ea\u5b9a\u4e49\u5185\u5bb9\uff0c\u5982\u65e5\u671f\u3001\u6587\u5b57\u7b49\u3002</p>\n<p><strong>\u7075\u6d3b\u7684\u5b9a\u4f4d\u63a7\u5236</strong> - \u7b7e\u540d\u533a\u57df\u53ef\u4ee5\u5728 PDF \u9875\u9762\u4e0a\u81ea\u7531\u62d6\u62fd\u3001\u7f29\u653e\u548c\u7cbe\u786e\u5b9a\u4f4d\uff0c\u652f\u6301\u4fdd\u6301\u6bd4\u4f8b\u7f29\u653e\uff0c\u786e\u4fdd\u7b7e\u540d\u7684\u89c6\u89c9\u6548\u679c\u3002</p>\n<p><strong>\u5b8c\u6574\u7684 PDF \u64cd\u4f5c</strong> - \u57fa\u4e8e pdf-lib \u548c react-pdf\uff0c\u652f\u6301\u591a\u9875 PDF \u6587\u6863\u7684\u6d4f\u89c8\u3001\u7b7e\u540d\u5b9a\u4f4d\u548c\u6700\u7ec8\u7b7e\u540d\u6587\u4ef6\u7684\u751f\u6210\u3002</p>\n<p><strong>\u7ec4\u4ef6\u5316\u8bbe\u8ba1</strong> - \u63d0\u4f9b\u591a\u4e2a\u72ec\u7acb\u7ec4\u4ef6\uff08PDFSign\u3001PDFViewer\u3001LocationLayer\u3001useSignature\uff09\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u6839\u636e\u9700\u6c42\u7075\u6d3b\u7ec4\u5408\u4f7f\u7528\u3002\u652f\u6301\u9ed8\u8ba4\u7b7e\u540d\u4f4d\u7f6e\u8bbe\u7f6e\u548c\u4f4d\u7f6e\u53d8\u5316\u56de\u8c03\uff0c\u4fbf\u4e8e\u96c6\u6210\u5230\u73b0\u6709\u4e1a\u52a1\u6d41\u7a0b\u3002</p>\n<p><strong>\u56fd\u9645\u5316\u652f\u6301</strong> - \u5185\u7f6e\u4e2d\u82f1\u6587\u8bed\u8a00\u5305\uff0c\u652f\u6301\u591a\u8bed\u8a00\u5207\u6362\uff0c\u9002\u5408\u56fd\u9645\u5316\u5e94\u7528\u3002</p>\n<p><strong>\u73b0\u4ee3\u5316\u6280\u672f\u6808</strong> - \u57fa\u4e8e React 18+\uff0c\u4f7f\u7528 Konva.js \u5b9e\u73b0\u9ad8\u6027\u80fd\u7684\u56fe\u5f62\u6e32\u67d3\uff0c\u652f\u6301\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u3002</p>\n<h2>\u4f7f\u7528\u573a\u666f</h2>\n<ul>\n<li>\u5408\u540c\u7b7e\u7f72\u7cfb\u7edf</li>\n<li>\u6587\u6863\u5ba1\u6279\u6d41\u7a0b</li>\n<li>\u7535\u5b50\u8868\u5355\u7b7e\u540d</li>\n<li>\u8bc1\u4e66\u9881\u53d1\u7cfb\u7edf</li>\n<li>\u6cd5\u5f8b\u6587\u4ef6\u7b7e\u7f72</li>\n</ul>\n<p>\u8be5\u7ec4\u4ef6\u5e93\u7b80\u5316\u4e86 PDF \u7b7e\u540d\u7684\u590d\u6742\u5b9e\u73b0\uff0c\u5f00\u53d1\u8005\u53ea\u9700\u8981\u51e0\u884c\u4ee3\u7801\u5c31\u80fd\u96c6\u6210\u5b8c\u6574\u7684\u7b7e\u540d\u529f\u80fd\uff0c\u5927\u5927\u63d0\u5347\u4e86\u5f00\u53d1\u6548\u7387\u3002\u65b0\u589e\u7684\u7b7e\u540d\u53e0\u52a0\u529f\u80fd\u8ba9\u7b7e\u540d\u66f4\u52a0\u4e30\u5bcc\u548c\u4e2a\u6027\u5316\uff0c\u6ee1\u8db3\u5404\u79cd\u4e1a\u52a1\u573a\u666f\u9700\u6c42\u3002</p>",description:"\u8fd9\u662f\u4e00\u4e2a\u529f\u80fd\u5f3a\u5927\u7684 React PDF \u7b7e\u540d\u7ec4\u4ef6\u5e93\uff0c\u4e13\u4e3a\u9700\u8981\u5728 PDF \u6587\u6863\u4e0a\u6dfb\u52a0\u7535\u5b50\u7b7e\u540d\u7684\u5e94\u7528\u573a\u666f\u800c\u8bbe\u8ba1\u3002\u8be5\u7ec4\u4ef6\u5e93\u63d0\u4f9b\u4e86\u7075\u6d3b\u7684\u7b7e\u540d\u89e3\u51b3\u65b9\u6848\uff0c\u652f\u6301\u5373\u65f6\u7b7e\u540d\u6dfb\u52a0\u548c\u9884\u5b9a\u4e49\u7b7e\u540d\u533a\u57df\u4e24\u79cd\u6a21\u5f0f",packageName:"@kne/react-pdf-sign",api:"<h3>PDFSign</h3>\n<p>\u4e3b\u8981\u7684 PDF \u7b7e\u540d\u7ec4\u4ef6\uff0c\u96c6\u6210\u4e86 PDF \u67e5\u770b\u5668\u548c\u7b7e\u540d\u5b9a\u4f4d\u529f\u80fd\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>string</td>\n<td>-</td>\n<td>PDF \u6587\u4ef6\u7684 URL \u5730\u5740</td>\n</tr>\n<tr>\n<td>signature</td>\n<td>string</td>\n<td>-</td>\n<td>\u7b7e\u540d\u56fe\u7247\u7684 URL \u5730\u5740</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>\u7b7e\u540d\u533a\u57df\u7684\u5bbd\u5ea6</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>50</td>\n<td>\u7b7e\u540d\u533a\u57df\u7684\u9ad8\u5ea6</td>\n</tr>\n<tr>\n<td>padding</td>\n<td>number</td>\n<td>8</td>\n<td>\u7b7e\u540d\u533a\u57df\u53d8\u6362\u5668\u7684\u5185\u8fb9\u8ddd</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>string</td>\n<td>'\u62d6\u62fd\u5230\u7b7e\u540d\u4f4d\u7f6e'</td>\n<td>\u7b7e\u540d\u533a\u57df\u7684\u5360\u4f4d\u6587\u672c</td>\n</tr>\n<tr>\n<td>filename</td>\n<td>string</td>\n<td>'signed-document.pdf'</td>\n<td>\u751f\u6210\u7b7e\u540dPDF\u7684\u6587\u4ef6\u540d</td>\n</tr>\n<tr>\n<td>defaultLocation</td>\n<td>object</td>\n<td>-</td>\n<td>\u9ed8\u8ba4\u7b7e\u540d\u4f4d\u7f6e\u4fe1\u606f</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>function</td>\n<td>-</td>\n<td>\u7b7e\u540d\u4f4d\u7f6e\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n</tr>\n</tbody>\n</table>\n<h4>\u5b9e\u4f8b\u65b9\u6cd5</h4>\n<table>\n<thead>\n<tr>\n<th>\u65b9\u6cd5\u540d</th>\n<th>\u53c2\u6570</th>\n<th>\u8fd4\u56de\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>getLocation</td>\n<td>-</td>\n<td>object</td>\n<td>\u83b7\u53d6\u5f53\u524d\u7b7e\u540d\u4f4d\u7f6e\u4fe1\u606f</td>\n</tr>\n<tr>\n<td>setLocation</td>\n<td>location: object</td>\n<td>-</td>\n<td>\u8bbe\u7f6e\u7b7e\u540d\u4f4d\u7f6e</td>\n</tr>\n<tr>\n<td>getPdfSignature</td>\n<td>-</td>\n<td>object</td>\n<td>\u83b7\u53d6 PDF \u7b7e\u540d\u4fe1\u606f</td>\n</tr>\n<tr>\n<td>sign</td>\n<td>-</td>\n<td>Promise&lt;File&gt;</td>\n<td>\u751f\u6210\u7b7e\u540d\u540e\u7684 PDF \u6587\u4ef6</td>\n</tr>\n</tbody>\n</table>\n<h3>PDFViewer</h3>\n<p>PDF \u6587\u6863\u67e5\u770b\u5668\u7ec4\u4ef6\uff0c\u63d0\u4f9b PDF \u9875\u9762\u6d4f\u89c8\u529f\u80fd\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>string</td>\n<td>-</td>\n<td>PDF \u6587\u4ef6\u7684 URL \u5730\u5740</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49 CSS \u7c7b\u540d</td>\n</tr>\n<tr>\n<td>defaultPage</td>\n<td>number</td>\n<td>1</td>\n<td>\u9ed8\u8ba4\u663e\u793a\u7684\u9875\u7801</td>\n</tr>\n<tr>\n<td>maxWidth</td>\n<td>number</td>\n<td>1200</td>\n<td>\u6700\u5927\u663e\u793a\u5bbd\u5ea6</td>\n</tr>\n<tr>\n<td>pdfjsUrl</td>\n<td>string</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49 pdf.js CDN \u5730\u5740</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>object</td>\n<td>-</td>\n<td>API \u914d\u7f6e\u5bf9\u8c61</td>\n</tr>\n</tbody>\n</table>\n<h4>children \u6e32\u67d3\u5c5e\u6027</h4>\n<p>\u5f53 children \u4e3a\u51fd\u6570\u65f6\uff0c\u4f1a\u4f20\u5165\u4ee5\u4e0b\u53c2\u6570\uff1a</p>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570</th>\n<th>\u7c7b\u578b</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>size</td>\n<td>object</td>\n<td>\u5f53\u524d\u9875\u9762\u7684\u5c3a\u5bf8\u4fe1\u606f</td>\n</tr>\n<tr>\n<td>currentPage</td>\n<td>number</td>\n<td>\u5f53\u524d\u9875\u7801</td>\n</tr>\n<tr>\n<td>pageSize</td>\n<td>number</td>\n<td>\u603b\u9875\u6570</td>\n</tr>\n</tbody>\n</table>\n<h3>LocationLayer</h3>\n<p>\u7b7e\u540d\u5b9a\u4f4d\u5c42\u7ec4\u4ef6\uff0c\u7528\u4e8e\u5728 PDF \u4e0a\u5b9a\u4f4d\u548c\u8c03\u6574\u7b7e\u540d\u533a\u57df\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>stageWidth</td>\n<td>number</td>\n<td>-</td>\n<td>\u753b\u5e03\u5bbd\u5ea6\uff08\u5fc5\u9700\uff09</td>\n</tr>\n<tr>\n<td>stageHeight</td>\n<td>number</td>\n<td>-</td>\n<td>\u753b\u5e03\u9ad8\u5ea6\uff08\u5fc5\u9700\uff09</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>\u7b7e\u540d\u533a\u57df\u5bbd\u5ea6</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>50</td>\n<td>\u7b7e\u540d\u533a\u57df\u9ad8\u5ea6</td>\n</tr>\n<tr>\n<td>padding</td>\n<td>number</td>\n<td>8</td>\n<td>\u53d8\u6362\u5668\u5185\u8fb9\u8ddd</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>string</td>\n<td>'\u62d6\u62fd\u5230\u7b7e\u540d\u4f4d\u7f6e'</td>\n<td>\u5360\u4f4d\u6587\u672c</td>\n</tr>\n<tr>\n<td>signature</td>\n<td>string</td>\n<td>-</td>\n<td>\u7b7e\u540d\u56fe\u7247 URL</td>\n</tr>\n<tr>\n<td>value</td>\n<td>object</td>\n<td>-</td>\n<td>\u53d7\u63a7\u7684\u4f4d\u7f6e\u503c</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>function</td>\n<td>-</td>\n<td>\u4f4d\u7f6e\u53d8\u5316\u56de\u8c03</td>\n</tr>\n</tbody>\n</table>\n<h3>useSignature</h3>\n<p>\u7b7e\u540d\u753b\u677f Hook\uff0c\u63d0\u4f9b\u624b\u5199\u7b7e\u540d\u529f\u80fd\u3002</p>\n<h4>\u8fd4\u56de\u7684\u51fd\u6570\u53c2\u6570</h4>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>filename</td>\n<td>string</td>\n<td>'signature.png'</td>\n<td>\u7b7e\u540d\u6587\u4ef6\u540d</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>\u7b7e\u540d\u753b\u677f\u5bbd\u5ea6</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>80</td>\n<td>\u7b7e\u540d\u753b\u677f\u9ad8\u5ea6</td>\n</tr>\n<tr>\n<td>mask</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u7b7e\u540d\u753b\u677f\u53e0\u52a0\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>onSuccess</td>\n<td>function</td>\n<td>-</td>\n<td>\u7b7e\u540d\u5b8c\u6210\u56de\u8c03</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>object</td>\n<td>-</td>\n<td>Modal \u7ec4\u4ef6\u5c5e\u6027</td>\n</tr>\n</tbody>\n</table>\n<h4>Hook \u914d\u7f6e\u53c2\u6570</h4>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>\u9ed8\u8ba4\u7b7e\u540d\u753b\u677f\u5bbd\u5ea6</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>80</td>\n<td>\u9ed8\u8ba4\u7b7e\u540d\u753b\u677f\u9ad8\u5ea6</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!1,className:"react_pdf_sign_e88dd",style:"",list:[{title:"\u5b8c\u6574\u7b7e\u540d\u6d41\u7a0b",description:"\u6f14\u793aPDF\u4e0a\u4f20\u3001\u624b\u5199\u7b7e\u540d\u521b\u5efa\u548c\u7b7e\u540dPDF\u751f\u6210\u7684\u5b8c\u6574\u5de5\u4f5c\u6d41\u7a0b",code:"const { default: ReactPdfSign, useSignature } = _ReactPdfSign;\nconst { useState, useRef } = React;\nconst { Flex, Button } = antd;\n\nconst BaseExample = () => {\n const [pdfFile, setPdfFile] = useState(null);\n const [sign, setSign] = useState(null);\n const ref = useRef(null);\n const signatureModal = useSignature();\n return (\n <Flex vertical gap={12}>\n <Flex gap={8}>\n <Button>\n <input\n type=\"file\"\n accept=\"application/pdf\"\n onChange={e => {\n const file = e.target.files[0];\n setPdfFile(URL.createObjectURL(file));\n }}\n />\n </Button>\n {pdfFile && (\n <Button\n onClick={() => {\n const { size } = ref.current.getLocation();\n signatureModal({\n mask: (\n <Flex justify=\"flex-end\" align=\"flex-end\" style={{ height: '100%', width: '100%', padding: '10px', boxSizing: 'border-box' }}>\n \u7b7e\u5b57\u65e5\u671f: {new Date().toLocaleDateString()}\n </Flex>\n ),\n width: size.width,\n height: size.height,\n onSuccess: file => {\n setSign(URL.createObjectURL(file));\n }\n });\n }}>\n \u6dfb\u52a0\u7b7e\u540d\n </Button>\n )}\n {pdfFile && sign && (\n <Button\n onClick={async () => {\n const blob = await ref.current.sign();\n const link = document.createElement('a');\n const url = URL.createObjectURL(blob);\n link.href = url;\n link.download = 'signed-document.pdf';\n link.click();\n URL.revokeObjectURL(url);\n }}>\n \u751f\u6210\u7b7e\u540dPDF\n </Button>\n )}\n </Flex>\n {pdfFile ? <ReactPdfSign url={pdfFile} signature={sign} ref={ref} /> : null}\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ReactPdfSign",packageName:"@kne/current-lib_react-pdf-sign",importStatement:'import * as _ReactPdfSign from "@kne/react-pdf-sign"',component:d},{name:"antd",packageName:"antd",component:a}]},{title:"\u7b7e\u540d\u5b9a\u4f4d\u5c42",description:"\u5c55\u793a\u72ec\u7acb\u7684\u7b7e\u540d\u5b9a\u4f4d\u7ec4\u4ef6\uff0c\u652f\u6301\u62d6\u62fd\u548c\u7f29\u653e\u8c03\u6574\u7b7e\u540d\u4f4d\u7f6e",code:"const { LocationLayer } = _ReactPdfSign;\n\nconst BaseExample = () => {\n return (\n <div>\n <LocationLayer stageWidth={400} stageHeight={300} />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ReactPdfSign",packageName:"@kne/current-lib_react-pdf-sign",importStatement:'import * as _ReactPdfSign from "@kne/react-pdf-sign"',component:d}]},{title:"PDF\u67e5\u770b\u5668",description:"\u57fa\u7840\u7684PDF\u6587\u6863\u67e5\u770b\u5668\uff0c\u652f\u6301\u9875\u9762\u5207\u6362\u548c\u7f29\u653e\u663e\u793a",code:"const { PDFViewer } = _ReactPdfSign;\nconst { default: examplePdf } = _examplePdf;\n\nconst BaseExample = () => {\n return (\n <div>\n <PDFViewer url={examplePdf} />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ReactPdfSign",packageName:"@kne/current-lib_react-pdf-sign",importStatement:'import * as _ReactPdfSign from "@kne/react-pdf-sign"',component:d},{name:"_examplePdf",packageName:"./doc/example.pdf",component:i}]},{title:"PDF\u7b7e\u540d\u7ec4\u4ef6",description:"\u6f14\u793aPDF\u7b7e\u540d\u7ec4\u4ef6\u7684API\u4f7f\u7528\uff0c\u5305\u62ec\u4f4d\u7f6e\u83b7\u53d6\u3001\u8bbe\u7f6e\u548c\u7b7e\u540d\u6587\u4ef6\u751f\u6210",code:"const { PDFSign } = _ReactPdfSign;\nconst { default: examplePdf } = _examplePdf;\nconst { default: signature } = _signature;\nconst { useRef } = React;\nconst { Flex, Button, App } = antd;\n\nconst BaseExample = () => {\n const ref = useRef();\n const ref2 = useRef();\n const { modal } = App.useApp();\n return (\n <Flex vertical gap={24}>\n <Flex vertical gap={8}>\n <Flex gap={8}>\n <Button\n onClick={() => {\n const location = ref.current.getLocation();\n modal.info({\n title: '\u7b7e\u540d\u4f4d\u7f6e',\n content: <pre>{JSON.stringify(location, null, 2)}</pre>\n });\n }}>\n \u83b7\u53d6\u7b7e\u540d\u4f4d\u7f6e\n </Button>\n <Button\n onClick={() => {\n ref.current.setLocation({\n size: {\n width: 390,\n height: 156,\n x: 163,\n y: 8\n },\n scaleX: 1.95,\n scaleY: 1.95,\n x: 163,\n y: 8\n });\n }}>\n \u8bbe\u7f6e\u7b7e\u540d\u4f4d\u7f6e\n </Button>\n <Button onClick={()=>{\n ref.current.setLocation({});\n }}>\u6062\u590d\u5230\u9ed8\u8ba4\u4f4d\u7f6e</Button>\n <Button\n onClick={() => {\n const pdfSignature = ref.current.getPdfSignature();\n modal.info({\n title: 'PDF\u7b7e\u540d\u4fe1\u606f',\n content: <pre style={{ 'white-space': 'break-spaces' }}>{JSON.stringify(pdfSignature, null, 2)}</pre>\n });\n }}>\n \u83b7\u53d6PDF\u7b7e\u540d\u4fe1\u606f\n </Button>\n </Flex>\n <PDFSign url={examplePdf} ref={ref} />\n </Flex>\n <Flex vertical gap={8}>\n <div>\n <Button\n onClick={async () => {\n const blob = await ref2.current.sign();\n const link = document.createElement('a');\n const url = URL.createObjectURL(blob);\n link.href = url;\n link.download = 'signed-document.pdf';\n link.click();\n URL.revokeObjectURL(url);\n }}>\n \u751f\u6210\u7b7e\u540d\u6587\u4ef6\n </Button>\n </div>\n <PDFSign url={examplePdf} signature={signature} ref={ref2} />\n </Flex>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ReactPdfSign",packageName:"@kne/current-lib_react-pdf-sign",importStatement:'import * as _ReactPdfSign from "@kne/react-pdf-sign"',component:d},{name:"_examplePdf",packageName:"./doc/example.pdf",component:i},{name:"_signature",packageName:"./doc/signature.png",component:e.t(o)},{name:"antd",packageName:"antd",component:a}]},{title:"\u624b\u5199\u7b7e\u540d\u753b\u677f",description:"\u5c55\u793auseSignature Hook\u7684\u4f7f\u7528\uff0c\u6253\u5f00\u624b\u5199\u7b7e\u540d\u6a21\u6001\u6846",code:"const { useSignature } = _ReactPdfSign;\nconst { Button, Flex } = antd;\n\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [result, setResult] = useState(null);\n const modal = useSignature();\n return (\n <Flex vertical gap={12}>\n {result && <img src={result} alt=\"result\" style={{ width: '300px' }} />}\n <Flex gap={8}>\n <Button\n onClick={() => {\n modal({\n onSuccess: file => {\n console.log(file);\n setResult(URL.createObjectURL(file));\n }\n });\n }}>\n \u7b7e\u540d\n </Button>\n <Button\n onClick={() => {\n modal({\n mask: (\n <Flex justify=\"flex-end\" align=\"flex-end\" style={{ height: '100%', width: '100%', padding: '10px', boxSizing: 'border-box' }}>\n \u7b7e\u5b57\u65e5\u671f: {new Date().toLocaleDateString()}\n </Flex>\n ),\n onSuccess: file => {\n console.log(file);\n setResult(URL.createObjectURL(file));\n }\n });\n }}>\n \u5e26\u6709\u65e5\u671f\u6a21\u7248\u7684\u7b7e\u540d\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ReactPdfSign",packageName:"@kne/current-lib_react-pdf-sign",importStatement:'import * as _ReactPdfSign from "@kne/react-pdf-sign"',component:d},{name:"antd",packageName:"antd",component:a}]}]}}},s={name:"react-pdf-sign",version:"1.0.5","open-version":!0,"public-url":"/react-pdf-sign",modules:[{name:"react-pdf-sign",baseDir:"/home/runner/work/react-pdf-sign/react-pdf-sign",description:"\u8fd9\u662f\u4e00\u4e2a\u529f\u80fd\u5f3a\u5927\u7684 React PDF \u7b7e\u540d\u7ec4\u4ef6\u5e93\uff0c\u4e13\u4e3a\u9700\u8981\u5728 PDF \u6587\u6863\u4e0a\u6dfb\u52a0\u7535\u5b50\u7b7e\u540d\u7684\u5e94\u7528\u573a\u666f\u800c\u8bbe\u8ba1\u3002\u8be5\u7ec4\u4ef6\u5e93\u63d0\u4f9b\u4e86\u7075\u6d3b\u7684\u7b7e\u540d\u89e3\u51b3\u65b9\u6848\uff0c\u652f\u6301\u5373\u65f6\u7b7e\u540d\u6dfb\u52a0\u548c\u9884\u5b9a\u4e49\u7b7e\u540d\u533a\u57df\u4e24\u79cd\u6a21\u5f0f",packageName:"@kne/react-pdf-sign"}]}}}]);
2
+ //# sourceMappingURL=340.d03c4008.chunk.js.map
package/build/static/js/{340.90e6b38c.chunk.js.map → 340.d03c4008.chunk.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"static/js/340.90e6b38c.chunk.js","mappings":"8VASA,MCTgE,GAAgBA,aDS3D,CACjBC,KAAM,iBACNC,QAAS,2qGAiBTC,YAAa,qdACbC,YAAa,sBACbC,IAAK,65MAuULC,QAAS,CACLC,QAAQ,EACRC,UAAW,uBACXC,MAAO,GACPC,KAAM,CAAC,CACXC,MAAO,uCACPR,YAAa,mJACbS,KAAM,siEAiENC,MAAO,CAAC,CACRZ,KAAM,gBACNG,YAAa,kCACbU,gBAAiB,uDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,iCACPR,YAAa,yJACbS,KAAM,mNAaNC,MAAO,CAAC,CACRZ,KAAM,gBACNG,YAAa,kCACbU,gBAAiB,uDACjBC,UAAW,KAEb,CACEJ,MAAO,wBACPR,YAAa,8HACbS,KAAM,uOAcNC,MAAO,CAAC,CACRZ,KAAM,gBACNG,YAAa,kCACbU,gBAAiB,uDACjBC,UAAW,GACb,CACEd,KAAM,cACNG,YAAa,oBACbW,UAAW,KAEb,CACEJ,MAAO,8BACPR,YAAa,qKACbS,KAAM,4/EAiFNC,MAAO,CAAC,CACRZ,KAAM,gBACNG,YAAa,kCACbU,gBAAiB,uDACjBC,UAAW,GACb,CACEd,KAAM,cACNG,YAAa,oBACbW,UAAW,GACb,CACEd,KAAM,aACNG,YAAa,sBACbW,U,QACF,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,uCACPR,YAAa,8GACbS,KAAM,yzCA+CNC,MAAO,CAAC,CACRZ,KAAM,gBACNG,YAAa,kCACbU,gBAAiB,uDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,SCvoBFC,EAAW,CAAC,KAAO,iBAAiB,QAAU,QAAQ,gBAAe,EAAK,aAAa,kBAAkB,QAAU,CAAC,CAAC,KAAO,iBAAiB,QAAU,kDAAkD,YAAc,qdAA8F,YAAc,wB","sources":["../../README.md","../node_modules/readme/modules.js"],"sourcesContent":["import * as component_1 from '@kne/current-lib_react-pdf-sign';\nimport * as component_2 from 'antd';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nimport * as component_5 from './doc/example.pdf';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nimport * as component_7 from './doc/signature.png';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nconst readmeConfig = {\n name: `react-pdf-sign`,\n summary: `<p>这是一个功能强大的 React PDF 签名组件库，专为需要在 PDF 文档上添加电子签名的应用场景而设计。该组件库提供了灵活的签名解决方案，支持即时签名添加和预定义签名区域两种模式。</p>\n<h2>核心特性</h2>\n<p><strong>直观的签名体验</strong> - 提供手写签名画板，用户可以通过鼠标或触摸设备自然地绘制签名，签名支持实时预览和调整。支持在签名画板上叠加自定义内容，如日期、文字等。</p>\n<p><strong>灵活的定位控制</strong> - 签名区域可以在 PDF 页面上自由拖拽、缩放和精确定位，支持保持比例缩放，确保签名的视觉效果。</p>\n<p><strong>完整的 PDF 操作</strong> - 基于 pdf-lib 和 react-pdf，支持多页 PDF 文档的浏览、签名定位和最终签名文件的生成。</p>\n<p><strong>组件化设计</strong> - 提供多个独立组件（PDFSign、PDFViewer、LocationLayer、useSignature），开发者可以根据需求灵活组合使用。支持默认签名位置设置和位置变化回调，便于集成到现有业务流程。</p>\n<p><strong>国际化支持</strong> - 内置中英文语言包，支持多语言切换，适合国际化应用。</p>\n<p><strong>现代化技术栈</strong> - 基于 React 18+，使用 Konva.js 实现高性能的图形渲染，支持响应式设计。</p>\n<h2>使用场景</h2>\n<ul>\n<li>合同签署系统</li>\n<li>文档审批流程</li>\n<li>电子表单签名</li>\n<li>证书颁发系统</li>\n<li>法律文件签署</li>\n</ul>\n<p>该组件库简化了 PDF 签名的复杂实现，开发者只需要几行代码就能集成完整的签名功能，大大提升了开发效率。新增的签名叠加功能让签名更加丰富和个性化，满足各种业务场景需求。</p>`,\n description: `这是一个功能强大的 React PDF 签名组件库，专为需要在 PDF 文档上添加电子签名的应用场景而设计。该组件库提供了灵活的签名解决方案，支持即时签名添加和预定义签名区域两种模式`,\n packageName: `@kne/react-pdf-sign`,\n api: `<h3>PDFSign</h3>\n<p>主要的 PDF 签名组件，集成了 PDF 查看器和签名定位功能。</p>\n<table>\n<thead>\n<tr>\n<th>属性</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>string</td>\n<td>-</td>\n<td>PDF 文件的 URL 地址</td>\n</tr>\n<tr>\n<td>signature</td>\n<td>string</td>\n<td>-</td>\n<td>签名图片的 URL 地址</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>签名区域的宽度</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>50</td>\n<td>签名区域的高度</td>\n</tr>\n<tr>\n<td>padding</td>\n<td>number</td>\n<td>8</td>\n<td>签名区域变换器的内边距</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>string</td>\n<td>'拖拽到签名位置'</td>\n<td>签名区域的占位文本</td>\n</tr>\n<tr>\n<td>filename</td>\n<td>string</td>\n<td>'signed-document.pdf'</td>\n<td>生成签名PDF的文件名</td>\n</tr>\n<tr>\n<td>defaultLocation</td>\n<td>object</td>\n<td>-</td>\n<td>默认签名位置信息</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>function</td>\n<td>-</td>\n<td>签名位置变化回调函数</td>\n</tr>\n</tbody>\n</table>\n<h4>实例方法</h4>\n<table>\n<thead>\n<tr>\n<th>方法名</th>\n<th>参数</th>\n<th>返回值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>getLocation</td>\n<td>-</td>\n<td>object</td>\n<td>获取当前签名位置信息</td>\n</tr>\n<tr>\n<td>setLocation</td>\n<td>location: object</td>\n<td>-</td>\n<td>设置签名位置</td>\n</tr>\n<tr>\n<td>getPdfSignature</td>\n<td>-</td>\n<td>object</td>\n<td>获取 PDF 签名信息</td>\n</tr>\n<tr>\n<td>sign</td>\n<td>-</td>\n<td>Promise&lt;File&gt;</td>\n<td>生成签名后的 PDF 文件</td>\n</tr>\n</tbody>\n</table>\n<h3>PDFViewer</h3>\n<p>PDF 文档查看器组件，提供 PDF 页面浏览功能。</p>\n<table>\n<thead>\n<tr>\n<th>属性</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>string</td>\n<td>-</td>\n<td>PDF 文件的 URL 地址</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>-</td>\n<td>自定义 CSS 类名</td>\n</tr>\n<tr>\n<td>defaultPage</td>\n<td>number</td>\n<td>1</td>\n<td>默认显示的页码</td>\n</tr>\n<tr>\n<td>maxWidth</td>\n<td>number</td>\n<td>1200</td>\n<td>最大显示宽度</td>\n</tr>\n<tr>\n<td>pdfjsUrl</td>\n<td>string</td>\n<td>-</td>\n<td>自定义 pdf.js CDN 地址</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>object</td>\n<td>-</td>\n<td>API 配置对象</td>\n</tr>\n</tbody>\n</table>\n<h4>children 渲染属性</h4>\n<p>当 children 为函数时，会传入以下参数：</p>\n<table>\n<thead>\n<tr>\n<th>参数</th>\n<th>类型</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>size</td>\n<td>object</td>\n<td>当前页面的尺寸信息</td>\n</tr>\n<tr>\n<td>currentPage</td>\n<td>number</td>\n<td>当前页码</td>\n</tr>\n<tr>\n<td>pageSize</td>\n<td>number</td>\n<td>总页数</td>\n</tr>\n</tbody>\n</table>\n<h3>LocationLayer</h3>\n<p>签名定位层组件，用于在 PDF 上定位和调整签名区域。</p>\n<table>\n<thead>\n<tr>\n<th>属性</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>stageWidth</td>\n<td>number</td>\n<td>-</td>\n<td>画布宽度（必需）</td>\n</tr>\n<tr>\n<td>stageHeight</td>\n<td>number</td>\n<td>-</td>\n<td>画布高度（必需）</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>签名区域宽度</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>50</td>\n<td>签名区域高度</td>\n</tr>\n<tr>\n<td>padding</td>\n<td>number</td>\n<td>8</td>\n<td>变换器内边距</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>string</td>\n<td>'拖拽到签名位置'</td>\n<td>占位文本</td>\n</tr>\n<tr>\n<td>signature</td>\n<td>string</td>\n<td>-</td>\n<td>签名图片 URL</td>\n</tr>\n<tr>\n<td>value</td>\n<td>object</td>\n<td>-</td>\n<td>受控的位置值</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>function</td>\n<td>-</td>\n<td>位置变化回调</td>\n</tr>\n</tbody>\n</table>\n<h3>useSignature</h3>\n<p>签名画板 Hook，提供手写签名功能。</p>\n<h4>返回的函数参数</h4>\n<table>\n<thead>\n<tr>\n<th>参数</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>filename</td>\n<td>string</td>\n<td>'signature.png'</td>\n<td>签名文件名</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>签名画板宽度</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>80</td>\n<td>签名画板高度</td>\n</tr>\n<tr>\n<td>mask</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>签名画板叠加内容</td>\n</tr>\n<tr>\n<td>onSuccess</td>\n<td>function</td>\n<td>-</td>\n<td>签名完成回调</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>object</td>\n<td>-</td>\n<td>Modal 组件属性</td>\n</tr>\n</tbody>\n</table>\n<h4>Hook 配置参数</h4>\n<table>\n<thead>\n<tr>\n<th>参数</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>默认签名画板宽度</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>80</td>\n<td>默认签名画板高度</td>\n</tr>\n</tbody>\n</table>`,\n example: {\n isFull: false,\n className: `react_pdf_sign_e88dd`,\n style: ``,\n list: [{\n title: `完整签名流程`,\n description: `演示PDF上传、手写签名创建和签名PDF生成的完整工作流程`,\n code: `const { default: ReactPdfSign, useSignature } = _ReactPdfSign;\nconst { useState, useRef } = React;\nconst { Flex, Button } = antd;\n\nconst BaseExample = () => {\n const [pdfFile, setPdfFile] = useState(null);\n const [sign, setSign] = useState(null);\n const ref = useRef(null);\n const signatureModal = useSignature();\n return (\n <Flex vertical gap={12}>\n <Flex gap={8}>\n <Button>\n <input\n type=\"file\"\n accept=\"application/pdf\"\n onChange={e => {\n const file = e.target.files[0];\n setPdfFile(URL.createObjectURL(file));\n }}\n />\n </Button>\n {pdfFile && (\n <Button\n onClick={() => {\n const { size } = ref.current.getLocation();\n signatureModal({\n mask: (\n <Flex justify=\"flex-end\" align=\"flex-end\" style={{ height: '100%', width: '100%', padding: '10px', boxSizing: 'border-box' }}>\n 签字日期: {new Date().toLocaleDateString()}\n </Flex>\n ),\n width: size.width,\n height: size.height,\n onSuccess: file => {\n setSign(URL.createObjectURL(file));\n }\n });\n }}>\n 添加签名\n </Button>\n )}\n {pdfFile && sign && (\n <Button\n onClick={async () => {\n const blob = await ref.current.sign();\n const link = document.createElement('a');\n const url = URL.createObjectURL(blob);\n link.href = url;\n link.download = 'signed-document.pdf';\n link.click();\n URL.revokeObjectURL(url);\n }}>\n 生成签名PDF\n </Button>\n )}\n </Flex>\n {pdfFile ? <ReactPdfSign url={pdfFile} signature={sign} ref={ref} /> : null}\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n},{\n title: `签名定位层`,\n description: `展示独立的签名定位组件，支持拖拽和缩放调整签名位置`,\n code: `const { LocationLayer } = _ReactPdfSign;\n\nconst BaseExample = () => {\n return (\n <div>\n <LocationLayer stageWidth={400} stageHeight={300} />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n}]\n},{\n title: `PDF查看器`,\n description: `基础的PDF文档查看器，支持页面切换和缩放显示`,\n code: `const { PDFViewer } = _ReactPdfSign;\nconst { default: examplePdf } = _examplePdf;\n\nconst BaseExample = () => {\n return (\n <div>\n <PDFViewer url={examplePdf} />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n},{\n name: \"_examplePdf\",\n packageName: \"./doc/example.pdf\",\n component: component_5\n}]\n},{\n title: `PDF签名组件`,\n description: `演示PDF签名组件的API使用，包括位置获取、设置和签名文件生成`,\n code: `const { PDFSign } = _ReactPdfSign;\nconst { default: examplePdf } = _examplePdf;\nconst { default: signature } = _signature;\nconst { useRef } = React;\nconst { Flex, Button, App } = antd;\n\nconst BaseExample = () => {\n const ref = useRef();\n const ref2 = useRef();\n const { modal } = App.useApp();\n return (\n <Flex vertical gap={24}>\n <Flex vertical gap={8}>\n <Flex gap={8}>\n <Button\n onClick={() => {\n const location = ref.current.getLocation();\n modal.info({\n title: '签名位置',\n content: <pre>{JSON.stringify(location, null, 2)}</pre>\n });\n }}>\n 获取签名位置\n </Button>\n <Button\n onClick={() => {\n ref.current.setLocation({\n size: {\n width: 390,\n height: 156,\n x: 163,\n y: 8\n },\n scaleX: 1.95,\n scaleY: 1.95,\n x: 163,\n y: 8\n });\n }}>\n 设置签名位置\n </Button>\n <Button onClick={()=>{\n ref.current.setLocation({});\n }}>恢复到默认位置</Button>\n <Button\n onClick={() => {\n const pdfSignature = ref.current.getPdfSignature();\n modal.info({\n title: 'PDF签名信息',\n content: <pre style={{ 'white-space': 'break-spaces' }}>{JSON.stringify(pdfSignature, null, 2)}</pre>\n });\n }}>\n 获取PDF签名信息\n </Button>\n </Flex>\n <PDFSign url={examplePdf} ref={ref} />\n </Flex>\n <Flex vertical gap={8}>\n <div>\n <Button\n onClick={async () => {\n const blob = await ref2.current.sign();\n const link = document.createElement('a');\n const url = URL.createObjectURL(blob);\n link.href = url;\n link.download = 'signed-document.pdf';\n link.click();\n URL.revokeObjectURL(url);\n }}>\n 生成签名文件\n </Button>\n </div>\n <PDFSign url={examplePdf} signature={signature} ref={ref2} />\n </Flex>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n},{\n name: \"_examplePdf\",\n packageName: \"./doc/example.pdf\",\n component: component_5\n},{\n name: \"_signature\",\n packageName: \"./doc/signature.png\",\n component: component_7\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n},{\n title: `手写签名画板`,\n description: `展示useSignature Hook的使用，打开手写签名模态框`,\n code: `const { useSignature } = _ReactPdfSign;\nconst { Button, Flex } = antd;\n\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [result, setResult] = useState(null);\n const modal = useSignature();\n return (\n <Flex vertical gap={12}>\n {result && <img src={result} alt=\"result\" style={{ width: '300px' }} />}\n <Flex gap={8}>\n <Button\n onClick={() => {\n modal({\n onSuccess: file => {\n console.log(file);\n setResult(URL.createObjectURL(file));\n }\n });\n }}>\n 签名\n </Button>\n <Button\n onClick={() => {\n modal({\n mask: (\n <Flex justify=\"flex-end\" align=\"flex-end\" style={{ height: '100%', width: '100%', padding: '10px', boxSizing: 'border-box' }}>\n 签字日期: {new Date().toLocaleDateString()}\n </Flex>\n ),\n onSuccess: file => {\n console.log(file);\n setResult(URL.createObjectURL(file));\n }\n });\n }}>\n 带有日期模版的签名\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n}]\n }\n};\nexport default readmeConfig;\n","import ReactPdfSign from '@components/react-pdf-sign/README.md';export default {ReactPdfSign};\nexport const manifest = {\"name\":\"react-pdf-sign\",\"version\":\"1.0.4\",\"open-version\":true,\"public-url\":\"/react-pdf-sign\",\"modules\":[{\"name\":\"react-pdf-sign\",\"baseDir\":\"/home/runner/work/react-pdf-sign/react-pdf-sign\",\"description\":\"这是一个功能强大的 React PDF 签名组件库，专为需要在 PDF 文档上添加电子签名的应用场景而设计。该组件库提供了灵活的签名解决方案，支持即时签名添加和预定义签名区域两种模式\",\"packageName\":\"@kne/react-pdf-sign\"}]};"],"names":["ReactPdfSign","name","summary","description","packageName","api","example","isFull","className","style","list","title","code","scope","importStatement","component","manifest"],"ignoreList":[],"sourceRoot":""}
1
+ {"version":3,"file":"static/js/340.d03c4008.chunk.js","mappings":"8VASA,MCTgE,GAAgBA,aDS3D,CACjBC,KAAM,iBACNC,QAAS,2qGAiBTC,YAAa,qdACbC,YAAa,sBACbC,IAAK,65MAuULC,QAAS,CACLC,QAAQ,EACRC,UAAW,uBACXC,MAAO,GACPC,KAAM,CAAC,CACXC,MAAO,uCACPR,YAAa,mJACbS,KAAM,siEAiENC,MAAO,CAAC,CACRZ,KAAM,gBACNG,YAAa,kCACbU,gBAAiB,uDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,iCACPR,YAAa,yJACbS,KAAM,mNAaNC,MAAO,CAAC,CACRZ,KAAM,gBACNG,YAAa,kCACbU,gBAAiB,uDACjBC,UAAW,KAEb,CACEJ,MAAO,wBACPR,YAAa,8HACbS,KAAM,uOAcNC,MAAO,CAAC,CACRZ,KAAM,gBACNG,YAAa,kCACbU,gBAAiB,uDACjBC,UAAW,GACb,CACEd,KAAM,cACNG,YAAa,oBACbW,UAAW,KAEb,CACEJ,MAAO,8BACPR,YAAa,qKACbS,KAAM,4/EAiFNC,MAAO,CAAC,CACRZ,KAAM,gBACNG,YAAa,kCACbU,gBAAiB,uDACjBC,UAAW,GACb,CACEd,KAAM,cACNG,YAAa,oBACbW,UAAW,GACb,CACEd,KAAM,aACNG,YAAa,sBACbW,U,QACF,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,uCACPR,YAAa,8GACbS,KAAM,yzCA+CNC,MAAO,CAAC,CACRZ,KAAM,gBACNG,YAAa,kCACbU,gBAAiB,uDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,SCvoBFC,EAAW,CAAC,KAAO,iBAAiB,QAAU,QAAQ,gBAAe,EAAK,aAAa,kBAAkB,QAAU,CAAC,CAAC,KAAO,iBAAiB,QAAU,kDAAkD,YAAc,qdAA8F,YAAc,wB","sources":["../../README.md","../node_modules/readme/modules.js"],"sourcesContent":["import * as component_1 from '@kne/current-lib_react-pdf-sign';\nimport * as component_2 from 'antd';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nimport * as component_5 from './doc/example.pdf';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nimport * as component_7 from './doc/signature.png';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nimport '@kne/current-lib_react-pdf-sign/dist/index.css';\nconst readmeConfig = {\n name: `react-pdf-sign`,\n summary: `<p>这是一个功能强大的 React PDF 签名组件库，专为需要在 PDF 文档上添加电子签名的应用场景而设计。该组件库提供了灵活的签名解决方案，支持即时签名添加和预定义签名区域两种模式。</p>\n<h2>核心特性</h2>\n<p><strong>直观的签名体验</strong> - 提供手写签名画板，用户可以通过鼠标或触摸设备自然地绘制签名，签名支持实时预览和调整。支持在签名画板上叠加自定义内容，如日期、文字等。</p>\n<p><strong>灵活的定位控制</strong> - 签名区域可以在 PDF 页面上自由拖拽、缩放和精确定位，支持保持比例缩放，确保签名的视觉效果。</p>\n<p><strong>完整的 PDF 操作</strong> - 基于 pdf-lib 和 react-pdf，支持多页 PDF 文档的浏览、签名定位和最终签名文件的生成。</p>\n<p><strong>组件化设计</strong> - 提供多个独立组件（PDFSign、PDFViewer、LocationLayer、useSignature），开发者可以根据需求灵活组合使用。支持默认签名位置设置和位置变化回调，便于集成到现有业务流程。</p>\n<p><strong>国际化支持</strong> - 内置中英文语言包，支持多语言切换，适合国际化应用。</p>\n<p><strong>现代化技术栈</strong> - 基于 React 18+，使用 Konva.js 实现高性能的图形渲染，支持响应式设计。</p>\n<h2>使用场景</h2>\n<ul>\n<li>合同签署系统</li>\n<li>文档审批流程</li>\n<li>电子表单签名</li>\n<li>证书颁发系统</li>\n<li>法律文件签署</li>\n</ul>\n<p>该组件库简化了 PDF 签名的复杂实现，开发者只需要几行代码就能集成完整的签名功能，大大提升了开发效率。新增的签名叠加功能让签名更加丰富和个性化，满足各种业务场景需求。</p>`,\n description: `这是一个功能强大的 React PDF 签名组件库，专为需要在 PDF 文档上添加电子签名的应用场景而设计。该组件库提供了灵活的签名解决方案，支持即时签名添加和预定义签名区域两种模式`,\n packageName: `@kne/react-pdf-sign`,\n api: `<h3>PDFSign</h3>\n<p>主要的 PDF 签名组件，集成了 PDF 查看器和签名定位功能。</p>\n<table>\n<thead>\n<tr>\n<th>属性</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>string</td>\n<td>-</td>\n<td>PDF 文件的 URL 地址</td>\n</tr>\n<tr>\n<td>signature</td>\n<td>string</td>\n<td>-</td>\n<td>签名图片的 URL 地址</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>签名区域的宽度</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>50</td>\n<td>签名区域的高度</td>\n</tr>\n<tr>\n<td>padding</td>\n<td>number</td>\n<td>8</td>\n<td>签名区域变换器的内边距</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>string</td>\n<td>'拖拽到签名位置'</td>\n<td>签名区域的占位文本</td>\n</tr>\n<tr>\n<td>filename</td>\n<td>string</td>\n<td>'signed-document.pdf'</td>\n<td>生成签名PDF的文件名</td>\n</tr>\n<tr>\n<td>defaultLocation</td>\n<td>object</td>\n<td>-</td>\n<td>默认签名位置信息</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>function</td>\n<td>-</td>\n<td>签名位置变化回调函数</td>\n</tr>\n</tbody>\n</table>\n<h4>实例方法</h4>\n<table>\n<thead>\n<tr>\n<th>方法名</th>\n<th>参数</th>\n<th>返回值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>getLocation</td>\n<td>-</td>\n<td>object</td>\n<td>获取当前签名位置信息</td>\n</tr>\n<tr>\n<td>setLocation</td>\n<td>location: object</td>\n<td>-</td>\n<td>设置签名位置</td>\n</tr>\n<tr>\n<td>getPdfSignature</td>\n<td>-</td>\n<td>object</td>\n<td>获取 PDF 签名信息</td>\n</tr>\n<tr>\n<td>sign</td>\n<td>-</td>\n<td>Promise&lt;File&gt;</td>\n<td>生成签名后的 PDF 文件</td>\n</tr>\n</tbody>\n</table>\n<h3>PDFViewer</h3>\n<p>PDF 文档查看器组件，提供 PDF 页面浏览功能。</p>\n<table>\n<thead>\n<tr>\n<th>属性</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>string</td>\n<td>-</td>\n<td>PDF 文件的 URL 地址</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>-</td>\n<td>自定义 CSS 类名</td>\n</tr>\n<tr>\n<td>defaultPage</td>\n<td>number</td>\n<td>1</td>\n<td>默认显示的页码</td>\n</tr>\n<tr>\n<td>maxWidth</td>\n<td>number</td>\n<td>1200</td>\n<td>最大显示宽度</td>\n</tr>\n<tr>\n<td>pdfjsUrl</td>\n<td>string</td>\n<td>-</td>\n<td>自定义 pdf.js CDN 地址</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>object</td>\n<td>-</td>\n<td>API 配置对象</td>\n</tr>\n</tbody>\n</table>\n<h4>children 渲染属性</h4>\n<p>当 children 为函数时，会传入以下参数：</p>\n<table>\n<thead>\n<tr>\n<th>参数</th>\n<th>类型</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>size</td>\n<td>object</td>\n<td>当前页面的尺寸信息</td>\n</tr>\n<tr>\n<td>currentPage</td>\n<td>number</td>\n<td>当前页码</td>\n</tr>\n<tr>\n<td>pageSize</td>\n<td>number</td>\n<td>总页数</td>\n</tr>\n</tbody>\n</table>\n<h3>LocationLayer</h3>\n<p>签名定位层组件，用于在 PDF 上定位和调整签名区域。</p>\n<table>\n<thead>\n<tr>\n<th>属性</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>stageWidth</td>\n<td>number</td>\n<td>-</td>\n<td>画布宽度（必需）</td>\n</tr>\n<tr>\n<td>stageHeight</td>\n<td>number</td>\n<td>-</td>\n<td>画布高度（必需）</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>签名区域宽度</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>50</td>\n<td>签名区域高度</td>\n</tr>\n<tr>\n<td>padding</td>\n<td>number</td>\n<td>8</td>\n<td>变换器内边距</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>string</td>\n<td>'拖拽到签名位置'</td>\n<td>占位文本</td>\n</tr>\n<tr>\n<td>signature</td>\n<td>string</td>\n<td>-</td>\n<td>签名图片 URL</td>\n</tr>\n<tr>\n<td>value</td>\n<td>object</td>\n<td>-</td>\n<td>受控的位置值</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>function</td>\n<td>-</td>\n<td>位置变化回调</td>\n</tr>\n</tbody>\n</table>\n<h3>useSignature</h3>\n<p>签名画板 Hook，提供手写签名功能。</p>\n<h4>返回的函数参数</h4>\n<table>\n<thead>\n<tr>\n<th>参数</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>filename</td>\n<td>string</td>\n<td>'signature.png'</td>\n<td>签名文件名</td>\n</tr>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>签名画板宽度</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>80</td>\n<td>签名画板高度</td>\n</tr>\n<tr>\n<td>mask</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>签名画板叠加内容</td>\n</tr>\n<tr>\n<td>onSuccess</td>\n<td>function</td>\n<td>-</td>\n<td>签名完成回调</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>object</td>\n<td>-</td>\n<td>Modal 组件属性</td>\n</tr>\n</tbody>\n</table>\n<h4>Hook 配置参数</h4>\n<table>\n<thead>\n<tr>\n<th>参数</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>width</td>\n<td>number</td>\n<td>200</td>\n<td>默认签名画板宽度</td>\n</tr>\n<tr>\n<td>height</td>\n<td>number</td>\n<td>80</td>\n<td>默认签名画板高度</td>\n</tr>\n</tbody>\n</table>`,\n example: {\n isFull: false,\n className: `react_pdf_sign_e88dd`,\n style: ``,\n list: [{\n title: `完整签名流程`,\n description: `演示PDF上传、手写签名创建和签名PDF生成的完整工作流程`,\n code: `const { default: ReactPdfSign, useSignature } = _ReactPdfSign;\nconst { useState, useRef } = React;\nconst { Flex, Button } = antd;\n\nconst BaseExample = () => {\n const [pdfFile, setPdfFile] = useState(null);\n const [sign, setSign] = useState(null);\n const ref = useRef(null);\n const signatureModal = useSignature();\n return (\n <Flex vertical gap={12}>\n <Flex gap={8}>\n <Button>\n <input\n type=\"file\"\n accept=\"application/pdf\"\n onChange={e => {\n const file = e.target.files[0];\n setPdfFile(URL.createObjectURL(file));\n }}\n />\n </Button>\n {pdfFile && (\n <Button\n onClick={() => {\n const { size } = ref.current.getLocation();\n signatureModal({\n mask: (\n <Flex justify=\"flex-end\" align=\"flex-end\" style={{ height: '100%', width: '100%', padding: '10px', boxSizing: 'border-box' }}>\n 签字日期: {new Date().toLocaleDateString()}\n </Flex>\n ),\n width: size.width,\n height: size.height,\n onSuccess: file => {\n setSign(URL.createObjectURL(file));\n }\n });\n }}>\n 添加签名\n </Button>\n )}\n {pdfFile && sign && (\n <Button\n onClick={async () => {\n const blob = await ref.current.sign();\n const link = document.createElement('a');\n const url = URL.createObjectURL(blob);\n link.href = url;\n link.download = 'signed-document.pdf';\n link.click();\n URL.revokeObjectURL(url);\n }}>\n 生成签名PDF\n </Button>\n )}\n </Flex>\n {pdfFile ? <ReactPdfSign url={pdfFile} signature={sign} ref={ref} /> : null}\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n},{\n title: `签名定位层`,\n description: `展示独立的签名定位组件，支持拖拽和缩放调整签名位置`,\n code: `const { LocationLayer } = _ReactPdfSign;\n\nconst BaseExample = () => {\n return (\n <div>\n <LocationLayer stageWidth={400} stageHeight={300} />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n}]\n},{\n title: `PDF查看器`,\n description: `基础的PDF文档查看器，支持页面切换和缩放显示`,\n code: `const { PDFViewer } = _ReactPdfSign;\nconst { default: examplePdf } = _examplePdf;\n\nconst BaseExample = () => {\n return (\n <div>\n <PDFViewer url={examplePdf} />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n},{\n name: \"_examplePdf\",\n packageName: \"./doc/example.pdf\",\n component: component_5\n}]\n},{\n title: `PDF签名组件`,\n description: `演示PDF签名组件的API使用，包括位置获取、设置和签名文件生成`,\n code: `const { PDFSign } = _ReactPdfSign;\nconst { default: examplePdf } = _examplePdf;\nconst { default: signature } = _signature;\nconst { useRef } = React;\nconst { Flex, Button, App } = antd;\n\nconst BaseExample = () => {\n const ref = useRef();\n const ref2 = useRef();\n const { modal } = App.useApp();\n return (\n <Flex vertical gap={24}>\n <Flex vertical gap={8}>\n <Flex gap={8}>\n <Button\n onClick={() => {\n const location = ref.current.getLocation();\n modal.info({\n title: '签名位置',\n content: <pre>{JSON.stringify(location, null, 2)}</pre>\n });\n }}>\n 获取签名位置\n </Button>\n <Button\n onClick={() => {\n ref.current.setLocation({\n size: {\n width: 390,\n height: 156,\n x: 163,\n y: 8\n },\n scaleX: 1.95,\n scaleY: 1.95,\n x: 163,\n y: 8\n });\n }}>\n 设置签名位置\n </Button>\n <Button onClick={()=>{\n ref.current.setLocation({});\n }}>恢复到默认位置</Button>\n <Button\n onClick={() => {\n const pdfSignature = ref.current.getPdfSignature();\n modal.info({\n title: 'PDF签名信息',\n content: <pre style={{ 'white-space': 'break-spaces' }}>{JSON.stringify(pdfSignature, null, 2)}</pre>\n });\n }}>\n 获取PDF签名信息\n </Button>\n </Flex>\n <PDFSign url={examplePdf} ref={ref} />\n </Flex>\n <Flex vertical gap={8}>\n <div>\n <Button\n onClick={async () => {\n const blob = await ref2.current.sign();\n const link = document.createElement('a');\n const url = URL.createObjectURL(blob);\n link.href = url;\n link.download = 'signed-document.pdf';\n link.click();\n URL.revokeObjectURL(url);\n }}>\n 生成签名文件\n </Button>\n </div>\n <PDFSign url={examplePdf} signature={signature} ref={ref2} />\n </Flex>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n},{\n name: \"_examplePdf\",\n packageName: \"./doc/example.pdf\",\n component: component_5\n},{\n name: \"_signature\",\n packageName: \"./doc/signature.png\",\n component: component_7\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n},{\n title: `手写签名画板`,\n description: `展示useSignature Hook的使用，打开手写签名模态框`,\n code: `const { useSignature } = _ReactPdfSign;\nconst { Button, Flex } = antd;\n\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [result, setResult] = useState(null);\n const modal = useSignature();\n return (\n <Flex vertical gap={12}>\n {result && <img src={result} alt=\"result\" style={{ width: '300px' }} />}\n <Flex gap={8}>\n <Button\n onClick={() => {\n modal({\n onSuccess: file => {\n console.log(file);\n setResult(URL.createObjectURL(file));\n }\n });\n }}>\n 签名\n </Button>\n <Button\n onClick={() => {\n modal({\n mask: (\n <Flex justify=\"flex-end\" align=\"flex-end\" style={{ height: '100%', width: '100%', padding: '10px', boxSizing: 'border-box' }}>\n 签字日期: {new Date().toLocaleDateString()}\n </Flex>\n ),\n onSuccess: file => {\n console.log(file);\n setResult(URL.createObjectURL(file));\n }\n });\n }}>\n 带有日期模版的签名\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ReactPdfSign\",\n packageName: \"@kne/current-lib_react-pdf-sign\",\n importStatement: \"import * as _ReactPdfSign from \\\"@kne/react-pdf-sign\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n}]\n }\n};\nexport default readmeConfig;\n","import ReactPdfSign from '@components/react-pdf-sign/README.md';export default {ReactPdfSign};\nexport const manifest = {\"name\":\"react-pdf-sign\",\"version\":\"1.0.5\",\"open-version\":true,\"public-url\":\"/react-pdf-sign\",\"modules\":[{\"name\":\"react-pdf-sign\",\"baseDir\":\"/home/runner/work/react-pdf-sign/react-pdf-sign\",\"description\":\"这是一个功能强大的 React PDF 签名组件库，专为需要在 PDF 文档上添加电子签名的应用场景而设计。该组件库提供了灵活的签名解决方案，支持即时签名添加和预定义签名区域两种模式\",\"packageName\":\"@kne/react-pdf-sign\"}]};"],"names":["ReactPdfSign","name","summary","description","packageName","api","example","isFull","className","style","list","title","code","scope","importStatement","component","manifest"],"ignoreList":[],"sourceRoot":""}
package/build/static/js/{8.3d610f54.chunk.js → 8.f7e618a6.chunk.js} RENAMED
@@ -1,2 +1,2 @@
1
- (self.webpackChunk_kne_components_react_pdf_sign=self.webpackChunk_kne_components_react_pdf_sign||[]).push([[8],{59169:e=>{function t(e){return Promise.resolve().then(()=>{var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t})}t.keys=()=>[],t.resolve=t,t.id=59169,e.exports=t},71830:(e,t,n)=>{"use strict";n.r(t),n.d(t,{LocationLayer:()=>E,PDFSign:()=>Ee,PDFViewer:()=>k,default:()=>Ee,useSignature:()=>We});var r=n(51938),a=n(17402),i=n(2153),o=n(94922),s=n(74946),c=n(50805),l=n(54159),u=n.n(l),d=n(55199),h=n(57622),g=n(59790),f=(n(87821),n(70011),n(89261)),p=n(56075),w=n(48863),m=n(78678),v=n(81537),y=n.n(v),j=n(20274),x=n(90999),b=n(51766),S=n(80359);function P(){return P=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},P.apply(null,arguments)}function M(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}var C={"pdf-view-container":"_RgZXN","pdf-view":"_PAju1","pdf-view-children":"_N11Pj","pdf-view-page-control-left":"_IbVpf","pdf-view-page-control-right":"_IIgqj","pdf-view-page-control-current":"_JW3CT","signature-container":"_6TDb-","signature-canvas":"_2CGF4","signature-modal":"_kWe3k","signature-mask":"_FSvLv"};const O=["numPages"],k=e=>{let{className:t,defaultPage:n,apis:l,pdfjsUrl:p,url:w,maxWidth:m=1200,children:v}=e;var y;const{apis:j}=(0,s.usePreset)(),x=Object.assign({},j,l),b=p||(null==(y=x.file)?void 0:y.pdfjsUrl)||"https://cdn.jsdelivr.net/npm/pdfjs-dist@5.4.296";r.EA.workerSrc=b+"/build/pdf.worker.min.mjs";const S=(0,o.useMemo)(()=>({file:w,options:{standardFontDataUrl:b+"/standard_fonts/",cMapUrl:b+"/cmaps/",cMapPacked:!0}}),[b,w]),[k,_]=(0,o.useState)(m),[A,E]=(0,o.useState)(null),[N,F]=(0,o.useState)(0),[T,D]=(0,o.useState)(n||1),W=(0,c.A)(()=>{W.current&&W.current.clientWidth&&_(Math.min(W.current.clientWidth,m))});return(0,f.jsxs)("div",{ref:W,className:u()(t,C["pdf-view-container"],"pdf-view-container"),style:{maxWidth:m},children:[(0,f.jsx)("div",{className:u()(C["pdf-view"],"pdf-view"),children:(0,f.jsx)(a.A,P({},Object.assign({},S),{loading:(0,f.jsx)(d.Flex,{justify:"center",children:(0,f.jsx)(d.Spin,{})}),onLoadSuccess:e=>{let{numPages:t}=e;M(e,O),F(t),Number.isInteger(n)||D(t)},children:(0,f.jsx)(i.A,{width:k,pageNumber:T,renderTextLayer:!0,onLoadSuccess:e=>{E({width:Math.round(e.width),height:Math.round(e.height),originalWidth:e.originalWidth,originalHeight:e.originalHeight})}})}))}),A&&v&&(0,f.jsx)("div",{className:u()(C["pdf-view-children"],"pdf-view-children"),children:"function"===typeof v?v({size:A,currentPage:T,pageSize:N}):v}),(0,f.jsxs)("div",{className:u()(C["pdf-view-page-control"],"pdf-view-page-control"),children:[T>1&&(0,f.jsx)(h.A,{className:u()(C["pdf-view-page-control-left"],"pdf-view-page-control-left"),onClick:()=>{D(T-1)}}),T<N&&(0,f.jsx)(g.A,{className:u()(C["pdf-view-page-control-right"],"pdf-view-page-control-right"),onClick:()=>{D(T+1)}}),N?(0,f.jsxs)("div",{className:u()(C["pdf-view-page-control-current"],"pdf-view-page-control-current"),children:[T,"/",N]}):null]})]})},_=(0,j.createWithIntlProvider)({defaultLocale:"zh-CN",messages:{"zh-CN":{locationLayerPlaceholder:"\u7b7e\u540d\u533a\u57df",loadingError:"PDF\u5c1a\u672a\u52a0\u8f7d\u6210\u529f\uff0c\u8bf7\u7a0d\u540e\u91cd\u8bd5",signatureDefaultTitle:"\u7b7e\u540d",signatureConfirmText:"\u786e\u8ba4",signatureCancelText:"\u53d6\u6d88",signatureEmptyError:"\u7b7e\u540d\u5185\u5bb9\u4e0d\u80fd\u4e3a\u7a7a",signatureSuccess:"\u7b7e\u540d\u6210\u529f"},"en-US":{locationLayerPlaceholder:"Signature Area",loadingError:"PDF is not loaded successfully, please try again later",signatureDefaultTitle:"Signature",signatureConfirmText:"Confirm",signatureCancelText:"Cancel",signatureEmptyError:"Signature content cannot be empty",signatureSuccess:"Signature Success"}},namespace:"react-pdf-sign"}),A=["width","height","padding","stageWidth","stageHeight","placeholder","signature"],E=_(e=>{const{formatMessage:t}=(0,j.useIntl)(),{width:n=200,height:r=80,padding:a=8,stageWidth:i,stageHeight:s,placeholder:c=t({id:"locationLayerPlaceholder"}),signature:l}=e,u=M(e,A),[d,h]=(0,w.A)(u),[g,v]=(0,o.useState)(!1),[x]=y()(l),b=(0,o.useRef)(),S=(0,o.useRef)(),P=(0,o.useRef)(),C=()=>{const e=S.current.absolutePosition(),t=S.current.getClientRect();h({size:{width:Math.round(t.width),height:Math.round(t.height),x:Math.round(e.x),y:Math.round(e.y)},scaleX:Number(b.current.attrs.scaleX.toFixed(2)),scaleY:Number(b.current.attrs.scaleY.toFixed(2)),x:Math.round(b.current.attrs.x),y:Math.round(b.current.attrs.y)})},O=(0,m.A)(()=>{["scaleX","scaleY","x","y","size"].some(e=>!Object.assign({},d).hasOwnProperty(e))&&h({scaleX:1,scaleY:1,x:Math.round((i-n)/2),y:Math.round((s-r)/2),size:{width:n,height:r,x:Math.round((i-n)/2),y:Math.round((s-r)/2)}}),v(!0)}),k=(0,o.useMemo)(()=>{const e=document.createElement("div");e.style.color="var(--primary-color)",document.body.appendChild(e);const t=window.getComputedStyle(e).color;return document.body.removeChild(e),t},[]);return(0,o.useEffect)(()=>{O()},[]),(0,o.useEffect)(()=>{g&&P.current.nodes([b.current])},[g]),g&&d?(0,f.jsx)(p.BI,{width:i,height:s,children:(0,f.jsxs)(p.Wd,{children:[(0,f.jsxs)(p.YJ,{x:d.x,y:d.y,draggable:!0,ref:b,onDragEnd:C,scaleX:d.scaleX,scaleY:d.scaleY,onTransformEnd:C,children:[x?(0,f.jsx)(p._V,{width:n,height:r,image:x,cornerRadius:8,ref:S}):(0,f.jsx)(p.rw,{width:n,height:r,fill:"#f0f0f0",cornerRadius:8,ref:S}),(0,f.jsx)(p.EY,{text:x?"":c,fontSize:16,fill:"#666666",fontFamily:"Arial",align:"center",verticalAlign:"middle",width:n,height:r})]}),(0,f.jsx)(p.Ge,{ref:P,keepRatio:!0,flipEnabled:!1,rotateEnabled:!1,borderStroke:k,rotateAnchorStroke:k,anchorStroke:k,padding:a})]})}):null});var N="undefined"!==typeof globalThis?globalThis:"undefined"!==typeof window?window:"undefined"!==typeof n.g?n.g:"undefined"!==typeof self?self:{};function F(e){var t={exports:{}};return e(t,t.exports),t.exports}var T="object"==typeof N&&N&&N.Object===Object&&N,D="object"==typeof self&&self&&self.Object===Object&&self,W=T||D||Function("return this")(),L=W.Symbol,z=Object.prototype,I=z.hasOwnProperty,R=z.toString,U=L?L.toStringTag:void 0;var H=function(e){var t=I.call(e,U),n=e[U];try{e[U]=void 0;var r=!0}catch(i){}var a=R.call(e);return r&&(t?e[U]=n:delete e[U]),a},B=Object.prototype.toString;var Y=function(e){return B.call(e)},X=L?L.toStringTag:void 0;var $=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":X&&X in Object(e)?H(e):Y(e)};var V=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)};var q=function(e){if(!V(e))return!1;var t=$(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t},G=W["__core-js_shared__"],J=function(){var e=/[^.]+$/.exec(G&&G.keys&&G.keys.IE_PROTO||"");return e?"Symbol(src)_1."+e:""}();var Z=function(e){return!!J&&J in e},K=Function.prototype.toString;var Q=function(e){if(null!=e){try{return K.call(e)}catch(t){}try{return e+""}catch(t){}}return""},ee=/^\[object .+?Constructor\]$/,te=Function.prototype,ne=Object.prototype,re=te.toString,ae=ne.hasOwnProperty,ie=RegExp("^"+re.call(ae).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");var oe=function(e){return!(!V(e)||Z(e))&&(q(e)?ie:ee).test(Q(e))};var se=function(e,t){return null==e?void 0:e[t]};var ce=function(e,t){var n=se(e,t);return oe(n)?n:void 0},le=ce(W,"Map");ce(Object,"create");var ue=function(e){return null!=e&&"object"==typeof e};var de=function(e){return ue(e)&&"[object Arguments]"==$(e)},he=Object.prototype;he.hasOwnProperty,he.propertyIsEnumerable;de(function(){return arguments}());var ge=function(){return!1};F(function(e,t){var n=t&&!t.nodeType&&t,r=n&&e&&!e.nodeType&&e,a=r&&r.exports===n?W.Buffer:void 0,i=(a?a.isBuffer:void 0)||ge;e.exports=i}),F(function(e,t){var n=t&&!t.nodeType&&t,r=n&&e&&!e.nodeType&&e,a=r&&r.exports===n&&T.process,i=function(){try{var e=r&&r.require&&r.require("util").types;return e||a&&a.binding&&a.binding("util")}catch(t){}}();e.exports=i});var fe=ce(W,"DataView"),pe=ce(W,"Promise"),we=ce(W,"Set"),me=ce(W,"WeakMap"),ve="[object Map]",ye="[object Promise]",je="[object Set]",xe="[object WeakMap]",be="[object DataView]",Se=Q(fe),Pe=Q(le),Me=Q(pe),Ce=Q(we),Oe=Q(me),ke=$;(fe&&ke(new fe(new ArrayBuffer(1)))!=be||le&&ke(new le)!=ve||pe&&ke(pe.resolve())!=ye||we&&ke(new we)!=je||me&&ke(new me)!=xe)&&(ke=function(e){var t=$(e),n="[object Object]"==t?e.constructor:void 0,r=n?Q(n):"";if(r)switch(r){case Se:return be;case Pe:return ve;case Me:return ye;case Ce:return je;case Oe:return xe}return t});const _e=["placeholder","signature","url","width","height","padding","filename","defaultLocation","onChange"],Ae=(0,o.forwardRef)((e,t)=>{let{size:n,currentPage:r,placeholder:a,signature:i,url:s,width:c=200,height:l=80,padding:u,filename:d="signed-document.pdf",defaultLocation:h,onChange:g}=e;const p=(0,o.useMemo)(()=>({scaleX:1,scaleY:1,x:Math.round((n.width-c)/2),y:Math.round((n.height-l)/2),size:{width:c,height:l,x:Math.round((n.width-c)/2),y:Math.round((n.height-l)/2)}}),[n,c,l]),[w,v]=(0,o.useState)(Object.assign({},p,h)),y=(0,m.A)(e=>{v(Object.assign({},p,e))}),j=(0,o.useMemo)(()=>{const e=n.width/n.originalWidth,t=n.height/n.originalHeight,a=Math.round(w.size.x/e),o=Math.round(n.originalHeight-w.size.y/t),c=Math.round(w.size.width/e),l=Math.round(w.size.height/t);return{x:a,y:o-l,page:r,pageWidth:Math.round(n.originalWidth),pageHeight:Math.round(n.originalHeight),width:c,height:l,signature:i,url:s,filename:d}},[w,i,s,d,n,r]),b=(0,o.useCallback)(async()=>await(async e=>{const{x:t,y:n,page:r,width:a,height:i,signature:o,url:s,filename:c}=e,l=await window.fetch(s),u=await l.arrayBuffer(),d=await x.PDFDocument.load(u),h=d.getPage(r-1),g=await window.fetch(o).then(e=>e.arrayBuffer()),f=await d.embedPng(g);h.drawImage(f,{x:t,y:n,width:a,height:i});const p=await d.save();return new window.File([p],c,{type:"application/pdf"})})(j),[j]);(0,o.useImperativeHandle)(t,()=>({getLocation:()=>w,setLocation:e=>y(e),getPdfSignature:()=>j,sign:()=>b()}));const S=(0,m.A)(g);return(0,o.useEffect)(()=>{null==S||S({pdfSignature:j,location:w})},[j,w,S]),(0,f.jsx)(E,{stageWidth:n.width,stageHeight:n.height,width:c,height:l,padding:u,placeholder:a,signature:i,value:w,onChange:y})}),Ee=_((0,o.forwardRef)((e,t)=>{let{placeholder:n,signature:r,url:a,width:i,height:o,padding:s,filename:c="signed-document.pdf",onChange:l}=e,u=M(e,_e);return(0,f.jsx)(k,P({},u,{url:a,children:e=>{let{size:u,currentPage:d}=e;return(0,f.jsx)(Ae,{ref:t,size:u,currentPage:d,url:a,filename:c,width:i,height:o,padding:s,placeholder:n,signature:r,onChange:l})}}))})),Ne=["filename","onSuccess","width","height","mask"],Fe=e=>{let t=e.split(","),n=t[1].substring(0,t[1].length-2),r=t[0].match(/:(.*?);/)[1],a=atob(n),i=a.length,o=new Uint8Array(i);for(;i--;)o[i]=a.charCodeAt(i);return new Blob([o],{type:r})},Te=_(e=>{let{onClose:t,onSuccess:n,filename:r,width:a,height:i,mask:s=null}=e;const{formatMessage:c}=(0,j.useIntl)(),{message:l}=d.App.useApp(),h=(0,o.useRef)(null),g=(0,o.useRef)(null);return(0,f.jsxs)(d.Flex,{vertical:!0,gap:12,className:u()(C["signature-modal-content"],"signature-modal-content"),children:[(0,f.jsxs)("div",{className:u()(C["signature-container"],"signature-container"),style:{width:"368px",height:"".concat(Math.round(368*i/a),"px")},children:[(0,f.jsx)("div",{className:u()(C["signature-mask"],"signature-mask"),ref:g,children:s}),(0,f.jsx)(b.A,{ref:h,canvasProps:{className:u()(C["signature-canvas"],"signature-canvas")}})]}),(0,f.jsxs)(d.Flex,{justify:"flex-end",align:"center",gap:10,children:[(0,f.jsx)(d.Button,{onClick:()=>{t()},children:c({id:"signatureCancelText"})}),(0,f.jsx)(d.Button,{type:"primary",onClick:async()=>{if(h.current.isEmpty())return void l.error(c({id:"signatureEmptyError"}));let e=h.current.toDataURL("image/png");if(s){const t=await S.ph.toPng(g.current,{scale:2}),n=document.createElement("canvas");n.width=2*a,n.height=2*i;const r=n.getContext("2d");r.drawImage(t,0,0,n.width,n.height);const o=new Image;o.src=e,await new Promise(e=>{o.onload=e}),r.drawImage(o,0,0,n.width,n.height),e=n.toDataURL("image/png")}const o=new window.File([Fe(e)],r,{type:"image/png"});t(),n(o)},children:c({id:"signatureConfirmText"})})]})]})}),De=_(()=>{const{formatMessage:e}=(0,j.useIntl)();return(0,f.jsx)("span",{children:e({id:"signatureDefaultTitle"})})}),We=()=>{const{modal:e}=d.App.useApp();return t=>{const n=Object.assign({},t),{filename:r="signature.png",onSuccess:a,width:i=200,height:o=80,mask:s}=n,c=M(n,Ne),l=e.info(Object.assign({},{title:(0,f.jsx)(De,{}),icon:null,footer:null,wrapClassName:C["signature-modal"],classNames:{content:C["signature-modal"]}},c,{content:(0,f.jsx)(Te,{width:i,height:o,mask:s,filename:r,onSuccess:a,onClose:()=>{l.destroy()}})}));return l}}}}]);
2
- //# sourceMappingURL=8.3d610f54.chunk.js.map
1
+ (self.webpackChunk_kne_components_react_pdf_sign=self.webpackChunk_kne_components_react_pdf_sign||[]).push([[8],{59169:e=>{function t(e){return Promise.resolve().then(()=>{var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t})}t.keys=()=>[],t.resolve=t,t.id=59169,e.exports=t},71830:(e,t,n)=>{"use strict";n.r(t),n.d(t,{LocationLayer:()=>E,PDFSign:()=>Ee,PDFViewer:()=>k,default:()=>Ee,useSignature:()=>De});var r=n(51938),a=n(17402),i=n(2153),o=n(94922),s=n(74946),c=n(50805),l=n(54159),u=n.n(l),d=n(55199),h=n(57622),g=n(59790),f=(n(87821),n(70011),n(89261)),p=n(56075),w=n(48863),m=n(78678),v=n(81537),y=n.n(v),j=n(20274),x=n(90999),b=n(51766),S=n(80359);function P(){return P=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},P.apply(null,arguments)}function M(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}var C={"pdf-view-container":"_RgZXN","pdf-view":"_PAju1","pdf-view-children":"_N11Pj","pdf-view-page-control-left":"_IbVpf","pdf-view-page-control-right":"_IIgqj","pdf-view-page-control-current":"_JW3CT","signature-container":"_6TDb-","signature-canvas":"_2CGF4","signature-modal":"_kWe3k","signature-mask":"_FSvLv"};const O=["numPages"],k=e=>{let{className:t,defaultPage:n,apis:l,pdfjsUrl:p,url:w,maxWidth:m=1200,children:v}=e;var y;const{apis:j}=(0,s.usePreset)(),x=Object.assign({},j,l),b=p||(null==(y=x.file)?void 0:y.pdfjsUrl)||"https://cdn.jsdelivr.net/npm/pdfjs-dist@5.4.296";r.EA.workerSrc=b+"/build/pdf.worker.min.mjs";const S=(0,o.useMemo)(()=>({file:w,options:{standardFontDataUrl:b+"/standard_fonts/",cMapUrl:b+"/cmaps/",cMapPacked:!0}}),[b,w]),[k,_]=(0,o.useState)(m),[A,E]=(0,o.useState)(null),[N,F]=(0,o.useState)(0),[T,L]=(0,o.useState)(n||1),D=(0,c.A)(()=>{D.current&&D.current.clientWidth&&_(Math.min(D.current.clientWidth,m))});return(0,f.jsxs)("div",{ref:D,className:u()(t,C["pdf-view-container"],"pdf-view-container"),style:{maxWidth:m},children:[(0,f.jsx)("div",{className:u()(C["pdf-view"],"pdf-view"),children:(0,f.jsx)(a.A,P({},Object.assign({},S),{loading:(0,f.jsx)(d.Flex,{justify:"center",children:(0,f.jsx)(d.Spin,{})}),onLoadSuccess:e=>{let{numPages:t}=e;M(e,O),F(t),Number.isInteger(n)||L(t)},children:(0,f.jsx)(i.A,{width:k,pageNumber:T,renderTextLayer:!0,onLoadSuccess:e=>{E({width:Math.round(e.width),height:Math.round(e.height),originalWidth:e.originalWidth,originalHeight:e.originalHeight})}})}))}),A&&v&&(0,f.jsx)("div",{className:u()(C["pdf-view-children"],"pdf-view-children"),children:"function"===typeof v?v({size:A,currentPage:T,pageSize:N}):v}),(0,f.jsxs)("div",{className:u()(C["pdf-view-page-control"],"pdf-view-page-control"),children:[T>1&&(0,f.jsx)(h.A,{className:u()(C["pdf-view-page-control-left"],"pdf-view-page-control-left"),onClick:()=>{L(T-1)}}),T<N&&(0,f.jsx)(g.A,{className:u()(C["pdf-view-page-control-right"],"pdf-view-page-control-right"),onClick:()=>{L(T+1)}}),N?(0,f.jsxs)("div",{className:u()(C["pdf-view-page-control-current"],"pdf-view-page-control-current"),children:[T,"/",N]}):null]})]})},_=(0,j.createWithIntlProvider)({defaultLocale:"zh-CN",messages:{"zh-CN":{locationLayerPlaceholder:"\u7b7e\u540d\u533a\u57df",loadingError:"PDF\u5c1a\u672a\u52a0\u8f7d\u6210\u529f\uff0c\u8bf7\u7a0d\u540e\u91cd\u8bd5",signatureDefaultTitle:"\u7b7e\u540d",signatureConfirmText:"\u786e\u8ba4",signatureCancelText:"\u53d6\u6d88",signatureEmptyError:"\u7b7e\u540d\u5185\u5bb9\u4e0d\u80fd\u4e3a\u7a7a",signatureSuccess:"\u7b7e\u540d\u6210\u529f"},"en-US":{locationLayerPlaceholder:"Signature Area",loadingError:"PDF is not loaded successfully, please try again later",signatureDefaultTitle:"Signature",signatureConfirmText:"Confirm",signatureCancelText:"Cancel",signatureEmptyError:"Signature content cannot be empty",signatureSuccess:"Signature Success"}},namespace:"react-pdf-sign"}),A=["width","height","padding","stageWidth","stageHeight","placeholder","signature"],E=_(e=>{const{formatMessage:t}=(0,j.useIntl)(),{width:n=200,height:r=80,padding:a=8,stageWidth:i,stageHeight:s,placeholder:c=t({id:"locationLayerPlaceholder"}),signature:l}=e,u=M(e,A),[d,h]=(0,w.A)(u),[g,v]=(0,o.useState)(!1),[x]=y()(l),b=(0,o.useRef)(),S=(0,o.useRef)(),P=(0,o.useRef)(),C=()=>{const e=S.current.absolutePosition(),t=S.current.getClientRect();h({size:{width:Math.round(t.width),height:Math.round(t.height),x:Math.round(e.x),y:Math.round(e.y)},scaleX:Number(b.current.attrs.scaleX.toFixed(2)),scaleY:Number(b.current.attrs.scaleY.toFixed(2)),x:Math.round(b.current.attrs.x),y:Math.round(b.current.attrs.y)})},O=(0,m.A)(()=>{["scaleX","scaleY","x","y","size"].some(e=>!Object.assign({},d).hasOwnProperty(e))&&h({scaleX:1,scaleY:1,x:Math.round((i-n)/2),y:Math.round((s-r)/2),size:{width:n,height:r,x:Math.round((i-n)/2),y:Math.round((s-r)/2)}}),v(!0)}),k=(0,o.useMemo)(()=>{const e=document.createElement("div");e.style.color="var(--primary-color)",document.body.appendChild(e);const t=window.getComputedStyle(e).color;return document.body.removeChild(e),t},[]);return(0,o.useEffect)(()=>{O()},[]),(0,o.useEffect)(()=>{g&&P.current.nodes([b.current])},[g]),g&&d?(0,f.jsx)(p.BI,{width:i,height:s,children:(0,f.jsxs)(p.Wd,{children:[(0,f.jsxs)(p.YJ,{x:d.x,y:d.y,draggable:!0,ref:b,onDragEnd:C,scaleX:d.scaleX,scaleY:d.scaleY,onTransformEnd:C,children:[x?(0,f.jsx)(p._V,{width:n,height:r,image:x,cornerRadius:8,ref:S}):(0,f.jsx)(p.rw,{width:n,height:r,fill:"#f0f0f0",cornerRadius:8,ref:S}),(0,f.jsx)(p.EY,{text:x?"":c,fontSize:16,fill:"#666666",fontFamily:"Arial",align:"center",verticalAlign:"middle",width:n,height:r})]}),(0,f.jsx)(p.Ge,{ref:P,keepRatio:!0,flipEnabled:!1,rotateEnabled:!1,borderStroke:k,rotateAnchorStroke:k,anchorStroke:k,padding:a})]})}):null});var N="undefined"!==typeof globalThis?globalThis:"undefined"!==typeof window?window:"undefined"!==typeof n.g?n.g:"undefined"!==typeof self?self:{};function F(e){var t={exports:{}};return e(t,t.exports),t.exports}var T="object"==typeof N&&N&&N.Object===Object&&N,L="object"==typeof self&&self&&self.Object===Object&&self,D=T||L||Function("return this")(),W=D.Symbol,z=Object.prototype,I=z.hasOwnProperty,R=z.toString,U=W?W.toStringTag:void 0;var H=function(e){var t=I.call(e,U),n=e[U];try{e[U]=void 0;var r=!0}catch(i){}var a=R.call(e);return r&&(t?e[U]=n:delete e[U]),a},B=Object.prototype.toString;var Y=function(e){return B.call(e)},X=W?W.toStringTag:void 0;var $=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":X&&X in Object(e)?H(e):Y(e)};var V=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)};var q=function(e){if(!V(e))return!1;var t=$(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t},G=D["__core-js_shared__"],J=function(){var e=/[^.]+$/.exec(G&&G.keys&&G.keys.IE_PROTO||"");return e?"Symbol(src)_1."+e:""}();var Z=function(e){return!!J&&J in e},K=Function.prototype.toString;var Q=function(e){if(null!=e){try{return K.call(e)}catch(t){}try{return e+""}catch(t){}}return""},ee=/^\[object .+?Constructor\]$/,te=Function.prototype,ne=Object.prototype,re=te.toString,ae=ne.hasOwnProperty,ie=RegExp("^"+re.call(ae).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");var oe=function(e){return!(!V(e)||Z(e))&&(q(e)?ie:ee).test(Q(e))};var se=function(e,t){return null==e?void 0:e[t]};var ce=function(e,t){var n=se(e,t);return oe(n)?n:void 0},le=ce(D,"Map");ce(Object,"create");var ue=function(e){return null!=e&&"object"==typeof e};var de=function(e){return ue(e)&&"[object Arguments]"==$(e)},he=Object.prototype;he.hasOwnProperty,he.propertyIsEnumerable;de(function(){return arguments}());var ge=function(){return!1};F(function(e,t){var n=t&&!t.nodeType&&t,r=n&&e&&!e.nodeType&&e,a=r&&r.exports===n?D.Buffer:void 0,i=(a?a.isBuffer:void 0)||ge;e.exports=i}),F(function(e,t){var n=t&&!t.nodeType&&t,r=n&&e&&!e.nodeType&&e,a=r&&r.exports===n&&T.process,i=function(){try{var e=r&&r.require&&r.require("util").types;return e||a&&a.binding&&a.binding("util")}catch(t){}}();e.exports=i});var fe=ce(D,"DataView"),pe=ce(D,"Promise"),we=ce(D,"Set"),me=ce(D,"WeakMap"),ve="[object Map]",ye="[object Promise]",je="[object Set]",xe="[object WeakMap]",be="[object DataView]",Se=Q(fe),Pe=Q(le),Me=Q(pe),Ce=Q(we),Oe=Q(me),ke=$;(fe&&ke(new fe(new ArrayBuffer(1)))!=be||le&&ke(new le)!=ve||pe&&ke(pe.resolve())!=ye||we&&ke(new we)!=je||me&&ke(new me)!=xe)&&(ke=function(e){var t=$(e),n="[object Object]"==t?e.constructor:void 0,r=n?Q(n):"";if(r)switch(r){case Se:return be;case Pe:return ve;case Me:return ye;case Ce:return je;case Oe:return xe}return t});const _e=["placeholder","signature","url","width","height","padding","filename","defaultLocation","onChange"],Ae=(0,o.forwardRef)((e,t)=>{let{size:n,currentPage:r,placeholder:a,signature:i,url:s,width:c=200,height:l=80,padding:u,filename:d="signed-document.pdf",defaultLocation:h,onChange:g}=e;const p=(0,o.useMemo)(()=>({scaleX:1,scaleY:1,x:Math.round((n.width-c)/2),y:Math.round((n.height-l)/2),size:{width:c,height:l,x:Math.round((n.width-c)/2),y:Math.round((n.height-l)/2)}}),[n,c,l]),[w,v]=(0,o.useState)(Object.assign({},p,h)),y=(0,m.A)(e=>{v(Object.assign({},p,e))}),j=(0,o.useMemo)(()=>{const e=n.width/n.originalWidth,t=n.height/n.originalHeight,a=Math.round(w.size.x/e),o=Math.round(n.originalHeight-w.size.y/t),c=Math.round(w.size.width/e),l=Math.round(w.size.height/t);return{x:a,y:o-l,page:r,pageWidth:Math.round(n.originalWidth),pageHeight:Math.round(n.originalHeight),width:c,height:l,signature:i,url:s,filename:d}},[w,i,s,d,n,r]),b=(0,o.useCallback)(async()=>await(async e=>{const{x:t,y:n,page:r,width:a,height:i,signature:o,url:s,filename:c}=e,l=await window.fetch(s),u=await l.arrayBuffer(),d=await x.PDFDocument.load(u),h=d.getPage(r-1),g=await window.fetch(o).then(e=>e.arrayBuffer()),f=await d.embedPng(g);h.drawImage(f,{x:t,y:n,width:a,height:i});const p=await d.save();return new window.File([p],c,{type:"application/pdf"})})(j),[j]);(0,o.useImperativeHandle)(t,()=>({getLocation:()=>w,setLocation:e=>y(e),getPdfSignature:()=>j,sign:()=>b()}));const S=(0,m.A)(g);return(0,o.useEffect)(()=>{null==S||S({pdfSignature:j,location:w})},[j,w,S]),(0,f.jsx)(E,{stageWidth:n.width,stageHeight:n.height,width:c,height:l,padding:u,placeholder:a,signature:i,value:w,onChange:y})}),Ee=_((0,o.forwardRef)((e,t)=>{let{placeholder:n,signature:r,url:a,width:i,height:o,padding:s,filename:c="signed-document.pdf",defaultLocation:l,onChange:u}=e,d=M(e,_e);return(0,f.jsx)(k,P({},d,{url:a,children:e=>{let{size:d,currentPage:h}=e;return(0,f.jsx)(Ae,{ref:t,size:d,currentPage:h,url:a,filename:c,defaultLocation:l,width:i,height:o,padding:s,placeholder:n,signature:r,onChange:u})}}))})),Ne=["filename","onSuccess","width","height","mask"],Fe=e=>{let t=e.split(","),n=t[1].substring(0,t[1].length-2),r=t[0].match(/:(.*?);/)[1],a=atob(n),i=a.length,o=new Uint8Array(i);for(;i--;)o[i]=a.charCodeAt(i);return new Blob([o],{type:r})},Te=_(e=>{let{onClose:t,onSuccess:n,filename:r,width:a,height:i,mask:s=null}=e;const{formatMessage:c}=(0,j.useIntl)(),{message:l}=d.App.useApp(),h=(0,o.useRef)(null),g=(0,o.useRef)(null);return(0,f.jsxs)(d.Flex,{vertical:!0,gap:12,className:u()(C["signature-modal-content"],"signature-modal-content"),children:[(0,f.jsxs)("div",{className:u()(C["signature-container"],"signature-container"),style:{width:"368px",height:"".concat(Math.round(368*i/a),"px")},children:[(0,f.jsx)("div",{className:u()(C["signature-mask"],"signature-mask"),ref:g,children:s}),(0,f.jsx)(b.A,{ref:h,canvasProps:{className:u()(C["signature-canvas"],"signature-canvas")}})]}),(0,f.jsxs)(d.Flex,{justify:"flex-end",align:"center",gap:10,children:[(0,f.jsx)(d.Button,{onClick:()=>{t()},children:c({id:"signatureCancelText"})}),(0,f.jsx)(d.Button,{type:"primary",onClick:async()=>{if(h.current.isEmpty())return void l.error(c({id:"signatureEmptyError"}));let e=h.current.toDataURL("image/png");if(s){const t=await S.ph.toPng(g.current,{scale:2}),n=document.createElement("canvas");n.width=2*a,n.height=2*i;const r=n.getContext("2d");r.drawImage(t,0,0,n.width,n.height);const o=new Image;o.src=e,await new Promise(e=>{o.onload=e}),r.drawImage(o,0,0,n.width,n.height),e=n.toDataURL("image/png")}const o=new window.File([Fe(e)],r,{type:"image/png"});t(),n(o)},children:c({id:"signatureConfirmText"})})]})]})}),Le=_(()=>{const{formatMessage:e}=(0,j.useIntl)();return(0,f.jsx)("span",{children:e({id:"signatureDefaultTitle"})})}),De=()=>{const{modal:e}=d.App.useApp();return t=>{const n=Object.assign({},t),{filename:r="signature.png",onSuccess:a,width:i=200,height:o=80,mask:s}=n,c=M(n,Ne),l=e.info(Object.assign({},{title:(0,f.jsx)(Le,{}),icon:null,footer:null,wrapClassName:C["signature-modal"],classNames:{content:C["signature-modal"]}},c,{content:(0,f.jsx)(Te,{width:i,height:o,mask:s,filename:r,onSuccess:a,onClose:()=>{l.destroy()}})}));return l}}}}]);
2
+ //# sourceMappingURL=8.f7e618a6.chunk.js.map