PdfPreview

用浏览器内置查看器预览 PDF 的卡片组件，外层附重新加载 / 新窗口打开 / 下载 / 全屏工具条。

最后更新 2026-10-25 19:27:08

说明

以 iframe 承载 Chrome / Edge / Firefox 自带的 PDF 查看器，页面导航、缩放、查找等交给原生查看器，组件不引入第三方 PDF.js，只补整卡全屏与常用操作。Src 指定文档地址，Title 显示在工具条，Height 设定预览区高度（全屏时自动撑满视口）。Page、Zoom、Toolbar、Navpanes 通过 URL 片段向查看器传初始参数（各浏览器支持程度不一，以 Chrome / Edge 最稳）。允许不被框架化（X-Frame-Options / CSP）的跨域文档才能内嵌，否则可用“新窗口打开”；跨域文档的下载也受同源策略限制。Src 为空显示占位，加载过程覆盖加载动画。

常见能力：

复用浏览器内置 PDF 查看器，零第三方依赖
重新加载 / 新窗口打开 / 下载 / 整卡全屏工具条
Page / Zoom / Toolbar / Navpanes 初始参数（URL 片段）
高度可调，全屏自适应视口
空地址占位与加载态动画
隐藏原生工具条时由组件工具条接管

用法

<PdfPreview Src="/files/spec.pdf" Title="需求说明书" Height="600px" />

@* 定位到第 3 页、按页宽缩放、隐藏原生工具条与侧栏 *@
<PdfPreview Src="@docUrl" Page="3" Zoom="page-width" Toolbar="false" Navpanes="false" />

API 参数

参数	类型	默认值	说明
`AllowFullscreen`	`bool`	`true`	是否启用整卡全屏按钮。
`FallbackText`	`string`	`"PDF 预览不可用"`	无地址 / 不可用时的占位文案。
`Height`	`string`	`"600px"`	预览区高度（CSS 长度，默认 600px）；全屏时自动撑满视口。
`Navpanes`	`Nullable<bool>`	`null`	是否显示侧边缩略栏（对应 #navpanes）；为空表示不干预。
`Page`	`Nullable<int>`	`null`	初始页码（对应查看器 #page），从 1 开始；为空表示不指定。
`Src`	`string`	`null`	PDF 地址（同源或允许内嵌的跨域 URL）。
`Title`	`string`	`null`	工具条标题（通常为文档名，属数据不做本地化）；为空时显示占位标题。
`Toolbar`	`Nullable<bool>`	`null`	是否显示查看器自带工具条（对应 #toolbar）；为空表示不干预。
`Visible`	`bool`	`true`	取得或设置组件是否可见，默认为false。
`VisibleChanged`	`EventCallback<bool>`	—	事件取得或设置组件可见性变化时的回调事件。
`Zoom`	`string`	`null`	初始缩放（对应查看器 #zoom），如 150、page-fit、page-width；为空表示不指定。
`Class`	`string`	`null`	取得或设置组件的CSS类名，用于自定义样式。
`Disabled`	`bool`	`false`	取得或设置组件是否禁用，默认为false。
`Style`	`string`	`null`	取得或设置组件的内联样式，用于自定义样式。

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。