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



图片浏览器 Viewer

条码扫描 BarcodeScanner

手写签名 Handwritten

手写签名 SignaturePad

定位/持续定位 Geolocation

屏幕键盘 OnScreenKeyboard

百度地图 BaiduMap

谷歌地图 GoogleMap

蓝牙和打印 Bluetooth

PDF阅读器 PdfReader

文件系统访问 FileSystem

光学字符识别 OCR

电池信息/网络信息 WebAPI

视频播放器 VideoPlayer

文件预览 FileViewer

AlexChow

今日头条 | 博客园 | 知乎 | Gitee | GitHub

Blazor组件自做十四 : Blazor FileViewer 文件预览 组件的更多相关文章

  1. 风炫安全web安全学习第三十四节课 文件包含漏洞防御

    风炫安全web安全学习第三十四节课 文件包含漏洞防御 文件包含防御 在功能设计上不要把文件包含的对应文件放到前台去操作 过滤各种../,https://, http:// 配置php.ini文件 al ...

  2. [js开源组件开发]-手机端照片预览组件

    手机端照片预览组件 可怜的我用着华为3C手机,用别人现成的组件都好卡,为了适应我这种屌丝,于是自己简化写了一版的照片预览效果,暂时无缩放功能,以后可能有空再加吧,你也可以自己加下,这是个github上 ...

  3. 图片预览组件PhotoView

    图片预览组件PhotoView PhotoView是一款图片预览组件,广泛应用于大图的查看.该组件支持图片手势缩放.旋转等功能.它可以很好的和ViewPager.Picasso等组件结合,实现各种复杂 ...

  4. Spring学习(十四)----- Spring Auto Scanning Components —— 自动扫描组件

    一.      Spring Auto Scanning Components —— 自动扫描组件 1.      Declares Components Manually——手动配置componen ...

  5. 移动端Vue图片获取,压缩,预览组件-upload-img(H5+获取照片,压缩,预览)

    组件示例图 组件代码 upload_img.vue <div id="uploadImg"> <div class="upload_image_box& ...

  6. Android笔记(十四) Android中的基本组件——按钮

    Android中的按钮主要包括Button和ImageButton两种,Button继承自TextView,而ImageButton继承自ImageView.Button生成的按钮上显示文字,而Ima ...

  7. scrapy 基础组件专题(十四):scrapy CookiesMiddleware源码

    一 Scrapy框架--cookie的获取/传递/本地保存 1. 完成模拟登陆2. 登陆成功后提取出cookie,然后保存到本地cookie.txt文件中3. 再次使用时从本地的cookie.txt中 ...

  8. 攻城狮在路上(叁)Linux(十四)--- 查阅文件内容

    常用命令:cat.tac.nl.more.less.head.tail.od... 一.直接查看文件内容:cat.tac.nl <==一次性全部读取 1.cat [-AbEnTv] 文件名 参数 ...

  9. [Doctrine Migrations] 数据库迁移组件的深入解析四:集成diff方式迁移组件

    场景及优势 熟悉Symfony框架之后,深刻感受到框架集成的ORM组件Doctrine2的强大之处,其中附带的数据迁移也十分方便.Doctrine2是使用Doctrine DBAL组件把代码里面的表结 ...

  10. Spring Boot2(十四):单文件上传/下载,文件批量上传

    文件上传和下载在项目中经常用到,这里主要学习SpringBoot完成单个文件上传/下载,批量文件上传的场景应用.结合mysql数据库.jpa数据层操作.thymeleaf页面模板. 一.准备 添加ma ...

随机推荐

  1. 对循环神经网络参数的理解|LSTM RNN Input_size Batch Sequence

    在很多博客和知乎中我看到了许多对于pytorch框架中RNN接口的一些解析,但都较为浅显甚至出现一些不准确的理解,在这里我想阐述下我对于pytorch中RNN接口的参数的理解. 我们经常看到的RNN网 ...

  2. java中的自动拆装箱与缓存(Java核心技术阅读笔记)

    最近在读<深入理解java核心技术>,对于里面比较重要的知识点做一个记录! 众所周知,Java是一个面向对象的语言,而java中的基本数据类型却不是面向对象的!为了解决这个问题,Java为 ...

  3. 【高并发】ScheduledThreadPoolExecutor与Timer的区别和简单示例

    JDK 1.5开始提供ScheduledThreadPoolExecutor类,ScheduledThreadPoolExecutor类继承ThreadPoolExecutor类重用线程池实现了任务的 ...

  4. Docker | 制作tomcat镜像并部署项目

    本文讲解如何制作自己的tomcat镜像,并使用tomcat部署项目 原料准备: tomcat.jdk安装包,dockerfile文件 步骤 1.准备压缩包 jdk-8u301-linux-x64.ta ...

  5. MISC 网刃杯2022

    ​ MISC 玩坏的winxp 难度系数:4.0 题目描述:小敏的电脑Windows XP Professional不小心被玩坏了,里边有重要的东西,你能帮帮她吗? 利用whihex挂载 查看分区1 ...

  6. java集合框架复习----(4)Map、List、set

    文章目录 五.Map集合[重要] 1.hashMap 六.Collections工具类 总结 集合的概念 List集合 set集合: Map集合 Collection 五.Map集合[重要] 特点: ...

  7. 11.-ORM-基本操作-创建数据

    一.ORM-操作 基本操作包括增删改查,即(CRUD)操作 CRUD是指在做计算处理时增加(create).读取查询(read).更新(update).删除(delete) ORM CRUD 核心 - ...

  8. webRTC demo

    准备: 信令服务 前端页面用于视频通话 demo github 地址. 前端页面 为了使 demo 尽量简单,功能页面如下,即包含登录.通过对方手机号拨打电话的功能.在实际生成过程中,未必使用的手机号 ...

  9. nginx+keepalived实现主从模式双机热备份

    主从模式就是一台机器提供服务,另一台机器作为备份机,当主机的服务停止时,备份机立刻接替主机的服务. 安装 安装nginx wget http://nginx.org/download/nginx-1. ...

  10. Pandas常用方法

    数据处理很多需要用到pandas,有两个基本类型:Series表示一维数据,DataFrame表示多维.以下是一些常用方法的整理: pandas.Series 创建 Series pandas.Ser ...