{"_id":"@apollo-design/react-docx-preview","_rev":"4-b28b02b0e1bc6441bc74d5e9ce7f3a49","name":"@apollo-design/react-docx-preview","dist-tags":{"latest":"0.4.0"},"versions":{"0.1.0":{"name":"@apollo-design/react-docx-preview","version":"0.1.0","keywords":["word","docx","preview","viewer","react"],"author":{"name":"apollocmh"},"license":"Apache-2.0","_id":"@apollo-design/react-docx-preview@0.1.0","maintainers":[{"name":"apollocmh","email":"baochangliu0206@gmail.com"}],"homepage":"https://apollocmh.github.io/docx-preview/","bugs":{"url":"https://github.com/apollocmh/docx-preview/issues"},"dist":{"shasum":"ee829c6950fc68cc1384cba8d51e46f0f834ee53","tarball":"https://registry.npmjs.org/@apollo-design/react-docx-preview/-/react-docx-preview-0.1.0.tgz","fileCount":21,"integrity":"sha512-lSVi5SDgHHTM4m0nV8P7KROUSAF4KstBx0sn7AWzgKxgQBMqB3fTa5W4RTnDoFWV+yJXtz8zKb+Ix/8/nq871Q==","signatures":[{"sig":"MEQCIF4YHKf9Hf0WjC4aVBoJcsHFHBAV9QD/ouUvH6r5odejAiAMH6xfbdt3+wFDlmlcdX0h4qQBXvk+RrZFTssW9Rrxyg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":96458},"type":"module","_from":"file:apollo-design-react-docx-preview-0.1.0.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./dist/style.css","./package.json":"./package.json"},"scripts":{"build":"vite build"},"_npmUser":{"name":"apollocmh","email":"baochangliu0206@gmail.com"},"_resolved":"D:\\Code\\docx-preview\\packages\\react-docx-preview\\apollo-design-react-docx-preview-0.1.0.tgz","_integrity":"sha512-lSVi5SDgHHTM4m0nV8P7KROUSAF4KstBx0sn7AWzgKxgQBMqB3fTa5W4RTnDoFWV+yJXtz8zKb+Ix/8/nq871Q==","repository":{"url":"git+https://github.com/apollocmh/docx-preview.git","type":"git","directory":"packages/react-docx-preview"},"_npmVersion":"10.9.2","description":"React DOCX viewer component (toolbar, pager, zoom, thumbnails) built on @apollo-design/docx-preview","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.13.1","dependencies":{"@apollo-design/docx-preview":"0.6.3"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=17"},"_npmOperationalInternal":{"tmp":"tmp/react-docx-preview_0.1.0_1788507854729_0.5184139392797888","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@apollo-design/react-docx-preview","version":"0.2.0","keywords":["word","docx","preview","viewer","react"],"author":{"name":"apollocmh"},"license":"Apache-2.0","_id":"@apollo-design/react-docx-preview@0.2.0","maintainers":[{"name":"apollocmh","email":"baochangliu0206@gmail.com"}],"homepage":"https://apollocmh.github.io/docx-preview/","bugs":{"url":"https://github.com/apollocmh/docx-preview/issues"},"dist":{"shasum":"fb4f293ed8fdeab435905758cf663a7dd59ea43d","tarball":"https://registry.npmjs.org/@apollo-design/react-docx-preview/-/react-docx-preview-0.2.0.tgz","fileCount":22,"integrity":"sha512-/OzjmcsBIlLt1y2XiFBa1bvLX7AXAjEl69xFqAfu+3wMXZjVbaEWAfpjoWVYmLArlWoahRq6SckcCo7FziM1yw==","signatures":[{"sig":"MEYCIQCxkwC81NBRbYEWtK/NmIXrqzMIJ9pn/dckXmGO9dsIDQIhAMaxyIJ7AIH4bz9pdhE240F9+LmnX9+MQ6E6xvdqG2eU","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCIQCyS1UzvehH9GFPwGRbAosH9/7pNuzJbR0y6CA4UH9nnwIgL/dewIIW2NqAj8YOeUc+S1BcSGfpGmjfQxyVfSuTvpQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@apollo-design%2freact-docx-preview@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":103787},"type":"module","_from":"file:apollo-design-react-docx-preview-0.2.0.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./dist/style.css","./package.json":"./package.json"},"scripts":{"build":"vite build"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:3c1d97c3-c401-4b56-99bb-9dc643c594d2"}},"_resolved":"/home/runner/work/docx-preview/docx-preview/apollo-design-react-docx-preview-0.2.0.tgz","_integrity":"sha512-/OzjmcsBIlLt1y2XiFBa1bvLX7AXAjEl69xFqAfu+3wMXZjVbaEWAfpjoWVYmLArlWoahRq6SckcCo7FziM1yw==","repository":{"url":"git+https://github.com/apollocmh/docx-preview.git","type":"git","directory":"packages/react-docx-preview"},"_npmVersion":"12.0.2","description":"React DOCX viewer component (toolbar, pager, zoom, thumbnails) built on @apollo-design/docx-preview","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.23.2","dependencies":{"@apollo-design/docx-preview":"0.8.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=17"},"_npmOperationalInternal":{"tmp":"tmp/react-docx-preview_0.2.0_1788749283150_0.06315640740547335","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@apollo-design/react-docx-preview","version":"0.3.0","keywords":["word","docx","preview","viewer","react"],"author":{"name":"apollocmh"},"license":"Apache-2.0","_id":"@apollo-design/react-docx-preview@0.3.0","maintainers":[{"name":"apollocmh","email":"baochangliu0206@gmail.com"}],"homepage":"https://apollocmh.github.io/docx-preview/","bugs":{"url":"https://github.com/apollocmh/docx-preview/issues"},"dist":{"shasum":"13fb9c7d3ff688aa11422a40f184c202481c01d7","tarball":"https://registry.npmjs.org/@apollo-design/react-docx-preview/-/react-docx-preview-0.3.0.tgz","fileCount":17,"integrity":"sha512-Aam1ypMIe7s6XtK14dPEARMgKBnNqY5Z0d8KiHjU8M7badDC3pbXbjiV6tRZdMmVu3RZT8xZleJsjU7Gdcj/0g==","signatures":[{"sig":"MEQCICXWs/kXgZLnuwjsqyd7YePb6y40gpnK4XfE4yyG5nGhAiAkTxVPsjv+JpDYw39ioswHtaclOwXJTYQ2VUOsuz+99w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCICxRkfNZDAh55uGGEdpk6NM/nZpaqNqIIfqPIcvqJ0aqAiEAs2QD8uYDfC2RmqIFih+OT2zpivgg/Y366hSFRrocDps=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@apollo-design%2freact-docx-preview@0.3.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":103184},"type":"module","_from":"file:apollo-design-react-docx-preview-0.3.0.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","development":"./src/index.ts"},"./style.css":{"default":"./dist/style.css","development":"./src/styles/viewer.css"},"./package.json":"./package.json"},"scripts":{"build":"vite build","typecheck":"tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:3c1d97c3-c401-4b56-99bb-9dc643c594d2"}},"_resolved":"/home/runner/work/docx-preview/docx-preview/apollo-design-react-docx-preview-0.3.0.tgz","_integrity":"sha512-Aam1ypMIe7s6XtK14dPEARMgKBnNqY5Z0d8KiHjU8M7badDC3pbXbjiV6tRZdMmVu3RZT8xZleJsjU7Gdcj/0g==","repository":{"url":"git+https://github.com/apollocmh/docx-preview.git","type":"git","directory":"packages/react-docx-preview"},"_npmVersion":"12.0.2","description":"React DOCX viewer component (toolbar, pager, zoom, thumbnails) built on @apollo-design/docx-preview","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.23.2","dependencies":{"@apollo-design/docx-preview":"0.8.1"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.2.2","react":"^19.2.8","react-dom":"^19.2.8","typescript":"^5.0.3","@types/react":"^19.2.18","vite-plugin-dts":"^5.1.0","@types/react-dom":"^19.2.5"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/react-docx-preview_0.3.0_1789378498211_0.6224858979177603","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"_id":"@apollo-design/react-docx-preview@0.4.0","bugs":{"url":"https://github.com/apollocmh/docx-preview/issues"},"dist":{"shasum":"c0bea72c0f1d99feab49459a1d9169a51a457660","tarball":"https://registry.npmjs.org/@apollo-design/react-docx-preview/-/react-docx-preview-0.4.0.tgz","fileCount":17,"integrity":"sha512-uKw+EXVX2cw/r+0g6FgyvugM/727iyb3ej9zp4GAmxr0ubapoYl5RuVDJBgfDIGp6GjauPsS0+QgsnrU+aciCQ==","signatures":[{"sig":"MEYCIQD8rpnnT1CeogMTI0oH8OC9qJONwAD5ZinwziVNMLUvrQIhANQFic3MR8wHHE24i3Z2lInjbK2jTTpY9MwoORFGLIsK","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICh+ehrHQegfdp46SeuuuB5Vpx8fFklqAmlUrxwoxjTPAiAuL1RNhea1JYlmI20RtRLUxXY4K0T52W30ftpkgvZdiA=="}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@apollo-design%2freact-docx-preview@0.4.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":113835},"name":"@apollo-design/react-docx-preview","type":"module","_from":"file:apollo-design-react-docx-preview-0.4.0.tgz","author":{"name":"apollocmh"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","development":"./src/index.ts"},"./style.css":{"default":"./dist/style.css","development":"./src/styles/viewer.css"},"./package.json":"./package.json"},"license":"Apache-2.0","scripts":{"build":"vite build","typecheck":"tsc --noEmit"},"version":"0.4.0","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:3c1d97c3-c401-4b56-99bb-9dc643c594d2"}},"homepage":"https://apollocmh.github.io/docx-preview/","keywords":["word","docx","preview","viewer","react"],"_resolved":"/home/runner/work/docx-preview/docx-preview/apollo-design-react-docx-preview-0.4.0.tgz","_integrity":"sha512-uKw+EXVX2cw/r+0g6FgyvugM/727iyb3ej9zp4GAmxr0ubapoYl5RuVDJBgfDIGp6GjauPsS0+QgsnrU+aciCQ==","repository":{"url":"git+https://github.com/apollocmh/docx-preview.git","type":"git","directory":"packages/react-docx-preview"},"_npmVersion":"12.0.2","description":"React DOCX viewer component (toolbar, pager, zoom, thumbnails) built on @apollo-design/docx-preview","directories":{},"maintainers":[{"name":"apollocmh","email":"baochangliu0206@gmail.com"}],"sideEffects":["**/*.css"],"_nodeVersion":"22.23.2","dependencies":{"@apollo-design/docx-preview":"0.9.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.2.2","react":"^19.2.8","react-dom":"^19.2.8","typescript":"^5.0.3","@types/react":"^19.2.18","vite-plugin-dts":"^5.1.0","@types/react-dom":"^19.2.5"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-docx-preview_0.4.0_1789492946148_0.5696376107043752"}}},"time":{"created":"2026-09-04T07:44:14.487Z","modified":"2026-09-15T17:22:26.674Z","0.1.0":"2026-09-04T07:44:14.870Z","0.2.0":"2026-09-07T02:48:03.241Z","0.3.0":"2026-09-14T09:34:58.307Z","0.4.0":"2026-09-15T17:22:26.251Z"},"bugs":{"url":"https://github.com/apollocmh/docx-preview/issues"},"author":{"name":"apollocmh"},"license":"Apache-2.0","homepage":"https://apollocmh.github.io/docx-preview/","keywords":["word","docx","preview","viewer","react"],"repository":{"url":"git+https://github.com/apollocmh/docx-preview.git","type":"git","directory":"packages/react-docx-preview"},"description":"React DOCX viewer component (toolbar, pager, zoom, thumbnails) built on @apollo-design/docx-preview","maintainers":[{"name":"apollocmh","email":"baochangliu0206@gmail.com"}],"readme":"# @apollo-design/react-docx-preview\n\nReact DOCX 查看器组件——WPS 风格工具栏、翻页器、缩放（适应宽度/百分比）、下载、缩略图侧栏、页角裁切标记，基于 [`@apollo-design/docx-preview`](https://www.npmjs.com/package/@apollo-design/docx-preview)（将 DOCX 渲染为语义化 HTML，含重排分页引擎）。\n\n> 本项目基于 [docxjs](https://github.com/VolodymyrBaydalka/docxjs)（Volodymyr Baydalka，Apache-2.0）深度改造。\n\n## 安装\n\n```bash\npnpm add @apollo-design/react-docx-preview\n# 或 npm i / yarn add\n```\n\npeer 依赖：`react >= 17`。\n\n## 使用\n\n```jsx\nimport { DocxViewer } from '@apollo-design/react-docx-preview';\nimport '@apollo-design/react-docx-preview/style.css';\n\nfunction App() {\n  return (\n    <DocxViewer\n      url=\"/files/报告.docx\"      // 文档地址,默认 GET 读取,变化即重新加载\n      name=\"报告.docx\"            // 下载文件名(缺省取 url 末段)\n      style={{ height: '100%' }}  // 组件填满容器,需父级给定高度\n      onRendered={() => console.log('rendered')}\n      onError={console.error}\n    />\n  );\n}\n```\n\n组件高度由外部容器决定（内部 `height: 100%`），请为父元素设置高度。\n\n需要鉴权（token、自定义请求头等）时用 `customRequest` 接管请求：\n\n```jsx\n<DocxViewer\n  url=\"/api/files/123\"\n  customRequest={async (url) => {\n    const res = await fetch(url, { headers: { Authorization: `Bearer ${token}` } });\n    if (!res.ok) throw new Error(`HTTP ${res.status}`);\n    return res.blob();\n  }}\n/>\n```\n\n## Props\n\n| Prop | 类型 | 默认值 | 说明 |\n|---|---|---|---|\n| `url` | `string \\| null` | `null` | 文档地址，默认 GET 读取；变化即重新加载。为空时显示空态 |\n| `customRequest` | `(url) => Promise<Blob \\| ArrayBuffer \\| Uint8Array \\| null>` | — | 自定义请求（鉴权头等）；缺省用 `fetch` GET |\n| `name` | `string` | url 末段 | 下载按钮使用的文件名 |\n| `initialScale` | `'fit' \\| number` | `'fit'` | 初始缩放：适应宽度或百分比（`0.75` / `75` 均可）；仅挂载时生效 |\n| `showThumbs` | `boolean` | `true` | 初始是否显示缩略图侧栏；仅挂载时生效 |\n| `renderOptions` | `Partial<Options>` | — | 透传给核心库的渲染选项，合并于 `{ paginate: true, experimental: true }` 之上 |\n| `empty` | `ReactNode` | `暂无预览文档` | 无文档（`url` 为空且未加载）时的占位内容，对应 Vue 版的 `#empty` 插槽 |\n| `className` / `style` | — | — | 根元素 class / 内联样式 |\n| `onRendered` | `(result) => void` | — | 渲染完成回调 |\n| `onError` | `(error) => void` | — | 渲染失败回调 |\n\n## 空态\n\n`url` 为空（`null` / 空串）且没有正在加载时，组件渲染 `empty`：\n\n```jsx\n<DocxViewer\n  url={fileUrl} // string | null\n  empty={<p className=\"text-gray-400\">请选择一个 DOCX 文件</p>}\n/>\n```\n\n## 外部字体\n\n通过 `renderOptions.fonts` 注入 webfont。字体族名必须与文档内部引用一致（中文文档常直接引用中文族名，如 `宋体`），别名需列为单独条目：\n\n```jsx\n<DocxViewer\n  url=\"/files/报告.docx\"\n  renderOptions={{\n    fonts: [\n      { name: 'SimSun', src: 'url(/fonts/simsun.woff2) format(\"woff2\")' },\n      { name: '宋体', src: 'url(/fonts/simsun.woff2) format(\"woff2\")' },\n    ],\n  }}\n/>\n```\n\n## 在线 Demo\n\n[React Viewer Demo](https://apollocmh.github.io/docx-preview/demos/react/) · [文档站](https://apollocmh.github.io/docx-preview/)\n\n## License\n\nApache-2.0 · 基于 docxjs（见仓库 NOTICE）\n","readmeFilename":"README.md"}