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. 洛谷P1950 长方形(单调栈)

    一道单调栈的好题啊...... 思路是很奇妙的,对于每个点(i,j),我们可以算它对答案的贡献(即包含它的矩形数量),包含该点的矩形,点的高度为h[j],点右边的高度一定大于等于h[j],左边的高度一 ...

  2. leetcode刷题记录之25(集合实现)

    题目描述: 给你链表的头节点 head ,每 k 个节点一组进行翻转,请你返回修改后的链表. k 是一个正整数,它的值小于或等于链表的长度.如果节点总数不是 k 的整数倍,那么请将最后剩余的节点保持原 ...

  3. 巧用VBA实现:基于多个关键词模糊匹配Excel多行数据

    在用Excel处理实际业务中,我们会碰到如下场景: 1.从一堆人名中找到包含某些关键字的名字: 2.从银行流水文件中根据[备注]字段找到包含某些关键字的,统一识别为[手续费业务]等. 这本质说的都是一 ...

  4. CentOS6/7开机启动配置

    最近在配置Linux系统的ntp校时,涉及到开机启动问题,总结一下 两个环境: CentOS release 6.5 (Final) CentOS Linux release 7.9.2009 (Co ...

  5. 堆内存动态分配情况和jvm调优方向

    由上图可以看出: 堆中分为新生代(占堆1/3内存)和老年代(占堆2/3内存), 新生代又分为Eden区(占新生代内存的8/10)和survivor区(占新生代内存的2/10), survivor区又分 ...

  6. linux 自动备份mysql数据库

    今天一早打开服务器.13W个木马.被爆破成功2次,漏洞3个.数据库被删.这是个悲伤的经历 还好之前有备份,服务器也升级了安全机制,只是备份是上个月的备份.所以想写个脚本,试试自动备份数据库. 1. 先 ...

  7. 插入排序算法(Java代码实现)

    其它经典排序算法:https://blog.csdn.net/weixin_43304253/article/details/121209905 插入排序算法: 思路:将数据分为已经排序好的数据和未排 ...

  8. 为了讲明白继承和super、this关键字,群主发了20块钱群红包

    摘要:以群主发红包为例,带你深入了解继承和super.this关键字. 本文分享自华为云社区<群主发红包带你深入了解继承和super.this关键字>,作者:共饮一杯无 . 需求 群主发随 ...

  9. 一篇文章带你了解服务器操作系统——Linux简单入门

    一篇文章带你了解服务器操作系统--Linux简单入门 Linux作为服务器的常用操作系统,身为工作人员自然是要有所了解的 在本篇中我们会简单介绍Linux的特点,安装,相关指令使用以及内部程序的安装等 ...

  10. SpringCloud(六) - RabbitMQ安装,三种消息发送模式,消息发送确认,消息消费确认(自动,手动)

    1.安装erlang语言环境 1.1 创建 erlang安装目录 mkdir erlang 1.2 上传解压压缩包 上传到: /root/ 解压缩# tar -zxvf otp_src_22.0.ta ...