amis PDF Viewer 组件JSON 配置 PDF 在线预览与文件上传联动实战指南【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis导读pdf-viewer是 amis 前端低代码框架内置的 PDF 在线预览组件只需在 JSON Schema 中声明type: pdf-viewer并指定文档地址即可完成 PDF 的加载、分页浏览与缩放查看它还能与input-file表单组件通过相同的name联动实现上传 PDF 后立即预览的完整闭环。本文以 docs/zh-CN/components/pdf-viewer.md 为核心结合 amis 与 amis-ui 仓库中 PdfViewer.tsx 的源码实现讲解组件的配置属性、表单联动机制、底层渲染原理及 PDF.js Worker 的部署前提帮助你在页面中快速落地可靠的 PDF 预览能力。基本用法在页面 JSON 的body中直接声明pdf-viewer节点即可渲染 PDF 预览{ type: pdf-viewer, id: pdf-viewer, src: /examples/static/simple.pdf, width: 500 }其中type固定为pdf-viewersrcPDF 文档的地址示例仓库中examples/static/simple.pdf即为可用的真实测试文件width渲染宽度像素不传时会从容器宽度自动计算。组件加载后会在内部完成以下流程对应 PdfViewer.tsx 的实现通过 amis 的env.fetcher以responseType: arraybuffer请求src对应的 PDF 文件将二进制数据交给基于react-pdf封装的底层组件 amis-ui 的 PdfViewer 渲染渲染出工具栏支持上一页 / 下一页切换、页码跳转输入框以及按 1.2 倍放大、0.8 倍缩小的缩放操作对应源码中的handleChangePage、handleChangeScale。源码中的默认宽度逻辑从 render() 可以看到组件最终渲染宽度计算为Math.max(this.props.width || this.state.width, 300)即显式传入width时优先使用该值未传width时使用挂载时读取的容器宽度减去 100 像素见componentDidMount中的clientWidth - 100无论哪种情况最小宽度不低于 300 像素避免页面过窄时组件被挤压变形。配合文件上传实现预览功能pdf-viewer最常见的实战场景是与input-file配合给两者配置相同的name上传完成后即可在表单内直接预览所选 PDF。{ type: form, title: , wrapWithPanel: false, body: [ { type: input-file, name: file, label: File, asBlob: true, accept: .pdf }, { type: pdf-viewer, id: pdf-viewer, name: file, width: 500 } ] }联动要点如下input-file开启asBlob: true后选中的文件会以FileBlob对象写入表单数据pdf-viewer的name指向同一个字段名file从而读取到该文件对象当表单数据中file字段的值发生变化时组件会重新渲染 PDF见下方源码联动机制accept: .pdf用于限制上传文件类型仅允许 PDF 文档。源码中的联动机制在 PdfViewer.tsx 的componentDidUpdate中组件会监听两类数据变化当src对应的地址经resolveVariableAndFilter过滤后的结果变化时会先abortLoad()取消未完成的请求再重新fetchPdf()当表单数据中name字段对应的变量值变化时同样会取消旧加载并调用renderPdf()。而 renderPdf() 中明确体现了优先级src的优先级高于name——只要配置了src组件就优先按地址加载只有未配置src时才从表单数据中取name字段的文件。对于表单文件场景renderFormFile() 会通过FileReader.readAsArrayBuffer将File对象读取为ArrayBuffer后再交给渲染层。因此上传预览的完整链路是input-file产生File→ 表单数据更新 →pdf-viewer监听name变化 →FileReader转为二进制 →react-pdf渲染。属性表组件属性在 AMISPdfViewerSchema 接口中定义对应文档属性表如下属性名类型默认值说明srcApi文档地址widthnumber宽度heightnumber-高度backgroundstring#fffPDF 背景色补充说明依据源码实现src除了普通字符串地址源码fetchPdf还兼容包含value字段的对象形式如接口返回结构{value: ...}并支持在地址中嵌入变量经resolveVariableAndFilter解析后取| raw结果因此src可以是${pdfUrl}这类模板字符串width/height透传给底层react-pdf的Page组件见 amis-ui PdfViewer用于控制 PDF 页面渲染尺寸其中width还有上文提到的最小 300px 兜底逻辑background作为背景色传入底层渲染容器默认#fff可覆盖为深色主题下的阅读背景额外支持name文件取值一般配合表单使用与className自定义样式类后者由源码render()中透传。运行前提必须配置 pdfjsWorkerSrc这是使用pdf-viewer最关键的前提条件。组件底层基于pdf.js通过react-pdf接入需要加载 Worker 脚本来解析 PDF。在 PdfViewer.tsx 的render()中可以看到若全局未配置pdfjsWorkerSrc组件不会渲染 PDF而是显示提示文案pdfjsWorkerSrc is required, Please set thepdfjsWorkerSrcin setGlobalOptions function.只有在配置了该值后才会通过React.lazySuspense异步加载amis-ui/lib/components/PdfViewer并真正渲染。全局选项定义在 amis-core 的 factory.tsx 中IGlobalOptions声明了pdfjsWorkerSrc: string默认值为空字符串需要通过setGlobalOptions(options)在应用初始化时注入并通过getGlobalOptions()读取。配置方式参考以仓库 examples 中的实际用法为例见 examples/embed.tsx 与 examples/components/SchemaRender.jsximport {setGlobalOptions, supportsMjs} from amis-core; import {pdfUrlLoad} from ./loadPdfjsWorker; setGlobalOptions({ pdfjsWorkerSrc: supportsMjs() ? pdfUrlLoad() : });其中pdfUrlLoad()的实现位于 examples/loadPdfjsWorker.ts它会引用pdfjs-dist/build/pdf.worker.min.mjs的地址supportsMjs()用于判断当前运行环境是否支持 ES Modulemjs在非 mjs 环境下需要改为指向兼容版本的 worker 文件。在实际部署中你需要将pdfjsWorkerSrc指向自己站点上可访问的pdf.worker.min.mjs或其他与所使用 pdf.js 版本匹配的 worker 文件地址。加载状态与错误处理组件在 PdfViewerState 中维护了loading、inited、error三个状态整体交互反馈如下加载中底层 amis-ui 组件展示 Spinner 转圈效果见 amis-ui PdfViewer 的 renderLoading加载失败当fetchPdf请求报错时置error: true页面显示loadingFailed文案并附上请求的url见 renderError()便于快速定位地址错误或跨域问题空数据当既没有src也没有name时显示占位提示块 PDF viewer见 renderEmpty()请求取消fetchPdf通过cancelExecutor注册了取消回调组件卸载或数据变化时会调用abortLoad()中止未完成的请求与FileReader避免内存泄漏与过期数据覆盖。适用场景与注意事项典型适用场景文档中心、帮助中心中直接预览使用手册 / 协议 PDF表单中上传合同、简历、报告后即时预览确认通过src绑定接口变量动态切换预览不同版本的文档。注意事项pdfjsWorkerSrc必须在渲染pdf-viewer之前通过setGlobalOptions配置完成否则组件只显示提示而不会渲染内容src与name同时存在时src优先生效若希望优先展示表单文件应确保不配置src跨域加载 PDF 时需保证目标站点允许跨域请求配合 amis 的 fetcher 配置或服务端 CORS 设置组件未开启文本层与注释层渲染源码中renderTextLayer{false}、renderAnnotationLayer{false}因此不支持文本选择与表单域交互属于纯阅读型预览如需文本搜索能力需自行扩展。总结pdf-viewer是 amis 中开箱即用的 PDF 预览组件静态场景下只需一个src即可完成加载与分页浏览动态场景下与input-file共享name即可实现上传即预览。其底层基于 pdf.js Worker 完成解析务必在初始化阶段通过setGlobalOptions({pdfjsWorkerSrc})配置好 Worker 地址。结合本文提供的属性表与源码级行为说明组件实现见 packages/amis/src/renderers/PdfViewer.tsx底层渲染见 packages/amis-ui/src/components/PdfViewer.tsx你可以快速在自己的 amis 页面中接入可靠、可交互的 PDF 预览能力。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 amis PDF Viewer 组件：JSON 配置 PDF 在线预览与文件上传联动实战指南
amis PDF Viewer 组件JSON 配置 PDF 在线预览与文件上传联动实战指南【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis导读pdf-viewer是 amis 前端低代码框架内置的 PDF 在线预览组件只需在 JSON Schema 中声明type: pdf-viewer并指定文档地址即可完成 PDF 的加载、分页浏览与缩放查看它还能与input-file表单组件通过相同的name联动实现上传 PDF 后立即预览的完整闭环。本文以 docs/zh-CN/components/pdf-viewer.md 为核心结合 amis 与 amis-ui 仓库中 PdfViewer.tsx 的源码实现讲解组件的配置属性、表单联动机制、底层渲染原理及 PDF.js Worker 的部署前提帮助你在页面中快速落地可靠的 PDF 预览能力。基本用法在页面 JSON 的body中直接声明pdf-viewer节点即可渲染 PDF 预览{ type: pdf-viewer, id: pdf-viewer, src: /examples/static/simple.pdf, width: 500 }其中type固定为pdf-viewersrcPDF 文档的地址示例仓库中examples/static/simple.pdf即为可用的真实测试文件width渲染宽度像素不传时会从容器宽度自动计算。组件加载后会在内部完成以下流程对应 PdfViewer.tsx 的实现通过 amis 的env.fetcher以responseType: arraybuffer请求src对应的 PDF 文件将二进制数据交给基于react-pdf封装的底层组件 amis-ui 的 PdfViewer 渲染渲染出工具栏支持上一页 / 下一页切换、页码跳转输入框以及按 1.2 倍放大、0.8 倍缩小的缩放操作对应源码中的handleChangePage、handleChangeScale。源码中的默认宽度逻辑从 render() 可以看到组件最终渲染宽度计算为Math.max(this.props.width || this.state.width, 300)即显式传入width时优先使用该值未传width时使用挂载时读取的容器宽度减去 100 像素见componentDidMount中的clientWidth - 100无论哪种情况最小宽度不低于 300 像素避免页面过窄时组件被挤压变形。配合文件上传实现预览功能pdf-viewer最常见的实战场景是与input-file配合给两者配置相同的name上传完成后即可在表单内直接预览所选 PDF。{ type: form, title: , wrapWithPanel: false, body: [ { type: input-file, name: file, label: File, asBlob: true, accept: .pdf }, { type: pdf-viewer, id: pdf-viewer, name: file, width: 500 } ] }联动要点如下input-file开启asBlob: true后选中的文件会以FileBlob对象写入表单数据pdf-viewer的name指向同一个字段名file从而读取到该文件对象当表单数据中file字段的值发生变化时组件会重新渲染 PDF见下方源码联动机制accept: .pdf用于限制上传文件类型仅允许 PDF 文档。源码中的联动机制在 PdfViewer.tsx 的componentDidUpdate中组件会监听两类数据变化当src对应的地址经resolveVariableAndFilter过滤后的结果变化时会先abortLoad()取消未完成的请求再重新fetchPdf()当表单数据中name字段对应的变量值变化时同样会取消旧加载并调用renderPdf()。而 renderPdf() 中明确体现了优先级src的优先级高于name——只要配置了src组件就优先按地址加载只有未配置src时才从表单数据中取name字段的文件。对于表单文件场景renderFormFile() 会通过FileReader.readAsArrayBuffer将File对象读取为ArrayBuffer后再交给渲染层。因此上传预览的完整链路是input-file产生File→ 表单数据更新 →pdf-viewer监听name变化 →FileReader转为二进制 →react-pdf渲染。属性表组件属性在 AMISPdfViewerSchema 接口中定义对应文档属性表如下属性名类型默认值说明srcApi文档地址widthnumber宽度heightnumber-高度backgroundstring#fffPDF 背景色补充说明依据源码实现src除了普通字符串地址源码fetchPdf还兼容包含value字段的对象形式如接口返回结构{value: ...}并支持在地址中嵌入变量经resolveVariableAndFilter解析后取| raw结果因此src可以是${pdfUrl}这类模板字符串width/height透传给底层react-pdf的Page组件见 amis-ui PdfViewer用于控制 PDF 页面渲染尺寸其中width还有上文提到的最小 300px 兜底逻辑background作为背景色传入底层渲染容器默认#fff可覆盖为深色主题下的阅读背景额外支持name文件取值一般配合表单使用与className自定义样式类后者由源码render()中透传。运行前提必须配置 pdfjsWorkerSrc这是使用pdf-viewer最关键的前提条件。组件底层基于pdf.js通过react-pdf接入需要加载 Worker 脚本来解析 PDF。在 PdfViewer.tsx 的render()中可以看到若全局未配置pdfjsWorkerSrc组件不会渲染 PDF而是显示提示文案pdfjsWorkerSrc is required, Please set thepdfjsWorkerSrcin setGlobalOptions function.只有在配置了该值后才会通过React.lazySuspense异步加载amis-ui/lib/components/PdfViewer并真正渲染。全局选项定义在 amis-core 的 factory.tsx 中IGlobalOptions声明了pdfjsWorkerSrc: string默认值为空字符串需要通过setGlobalOptions(options)在应用初始化时注入并通过getGlobalOptions()读取。配置方式参考以仓库 examples 中的实际用法为例见 examples/embed.tsx 与 examples/components/SchemaRender.jsximport {setGlobalOptions, supportsMjs} from amis-core; import {pdfUrlLoad} from ./loadPdfjsWorker; setGlobalOptions({ pdfjsWorkerSrc: supportsMjs() ? pdfUrlLoad() : });其中pdfUrlLoad()的实现位于 examples/loadPdfjsWorker.ts它会引用pdfjs-dist/build/pdf.worker.min.mjs的地址supportsMjs()用于判断当前运行环境是否支持 ES Modulemjs在非 mjs 环境下需要改为指向兼容版本的 worker 文件。在实际部署中你需要将pdfjsWorkerSrc指向自己站点上可访问的pdf.worker.min.mjs或其他与所使用 pdf.js 版本匹配的 worker 文件地址。加载状态与错误处理组件在 PdfViewerState 中维护了loading、inited、error三个状态整体交互反馈如下加载中底层 amis-ui 组件展示 Spinner 转圈效果见 amis-ui PdfViewer 的 renderLoading加载失败当fetchPdf请求报错时置error: true页面显示loadingFailed文案并附上请求的url见 renderError()便于快速定位地址错误或跨域问题空数据当既没有src也没有name时显示占位提示块 PDF viewer见 renderEmpty()请求取消fetchPdf通过cancelExecutor注册了取消回调组件卸载或数据变化时会调用abortLoad()中止未完成的请求与FileReader避免内存泄漏与过期数据覆盖。适用场景与注意事项典型适用场景文档中心、帮助中心中直接预览使用手册 / 协议 PDF表单中上传合同、简历、报告后即时预览确认通过src绑定接口变量动态切换预览不同版本的文档。注意事项pdfjsWorkerSrc必须在渲染pdf-viewer之前通过setGlobalOptions配置完成否则组件只显示提示而不会渲染内容src与name同时存在时src优先生效若希望优先展示表单文件应确保不配置src跨域加载 PDF 时需保证目标站点允许跨域请求配合 amis 的 fetcher 配置或服务端 CORS 设置组件未开启文本层与注释层渲染源码中renderTextLayer{false}、renderAnnotationLayer{false}因此不支持文本选择与表单域交互属于纯阅读型预览如需文本搜索能力需自行扩展。总结pdf-viewer是 amis 中开箱即用的 PDF 预览组件静态场景下只需一个src即可完成加载与分页浏览动态场景下与input-file共享name即可实现上传即预览。其底层基于 pdf.js Worker 完成解析务必在初始化阶段通过setGlobalOptions({pdfjsWorkerSrc})配置好 Worker 地址。结合本文提供的属性表与源码级行为说明组件实现见 packages/amis/src/renderers/PdfViewer.tsx底层渲染见 packages/amis-ui/src/components/PdfViewer.tsx你可以快速在自己的 amis 页面中接入可靠、可交互的 PDF 预览能力。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考