当前位置：首页 > news >正文

Blazor组件自做十四 : Blazor FileViewer 文件预览组件

news 来源：原创 2024/11/16 10:54:22

Blazor FileViewer 文件预览组件

目前支支持 Excel(.docx) 和 Word(.xlsx) 格式

示例:

https://www.blazor.zone/fileViewers

https://blazor.app1.es/fileViewers

使用方法:

1.nuget包

BootstrapBlazor.FileViewer

2._Imports.razor 文件或者页面添加添加组件库引用

@using BootstrapBlazor.Components

3.razor页面

<FileViewer Filename="c:/DemoShared/sample.xlsx" />

<FileViewer Filename="c:/DemoShared/sample.docx" />

<FileViewer Filename="https://localhost:5011/_content/DemoShared/sample.xlsx" />

<FileViewer Filename="https://localhost:5011/_content/DemoShared/sample.docx" />

<FileViewer @ref="fileViewer" Filename=@Url />

@code{
    private string Url { get; set; } = ("c:/sample.docx");

    private async Task Apply()
    {
        await fileViewer.Reload(Url);
    }
}

4.参数说明

参数	说明	默认值
Filename	Excel/Word 文件路径或者URL
Width	宽度	100%
Height	高度	700px
StyleString	组件外观 Css Style
Html	设置 Html 直接渲染
Stream	用于渲染的文件流,为空则用Filename参数读取文件	null
IsExcel	文件流模式需要指定是否 Excel. 默认为 false
Reload(string filename)	重新载入文件方法
Refresh()	刷新方法

Blazor 组件

条码扫描 ZXingBlazor
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pLmJ3MJD-1671758541927)(null)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mz6gu9yU-1671758542315)(null)]

图片浏览器 Viewer

条码扫描 BarcodeScanner

手写签名 Handwritten

手写签名 SignaturePad

定位/持续定位 Geolocation

屏幕键盘 OnScreenKeyboard

百度地图 BaiduMap

谷歌地图 GoogleMap

蓝牙和打印 Bluetooth

PDF阅读器 PdfReader

文件系统访问 FileSystem

光学字符识别 OCR