您现在的位置是:首页 > Javascript
当前栏目
Blazor组件自做十一 : File System Access 文件系统访问 组件
2023-04-18 15:03:21 时间
Blazor File System Access 文件系统访问 组件
Web 应用程序与用户本地设备上的文件进行交互
File System Access API(以前称为 Native File System API,在此之前称为 Writeable Files API)使开发人员能够构建强大的 Web 应用程序,与用户本地设备上的文件进行交互,例如 IDE、照片和视频编辑器、文本编辑器等。用户授予 Web 应用访问权限后,此 API 允许他们直接读取或保存对用户设备上文件和文件夹的更改。除了读取和写入文件之外,文件系统访问 API 还提供打开目录和枚举其内容的能力。
浏览器支持:
chrome 86 | firfox × | edge 86 | safari ×
Windows、macOS、ChromeOS 和 Linux 上的大多数 Chromium 浏览器目前都支持文件系统访问 API
示例:
https://blazor.app1.es/FileSystem
使用方法:
1.nuget包
BootstrapBlazor.FileSystem
2._Imports.razor 文件 或者页面添加 添加组件库引用
@using BootstrapBlazor.Components
3.razor页面
<FileSystem OnFileText="OnFileText"
OnFileStream="OnFileStream"
OnDirectory="OnDirectory"
/>
<pre>@contents</pre>
@code{
private string contents;
private Task OnFileText(string contents)
{
this.contents = contents;
StateHasChanged();
return Task.CompletedTask;
}
private Task OnFileStream(Stream stream)
{
//using MiniExcelLibs
//private string contentsExcel;
//var rows = stream.Query().ToList();
//rows.ForEach(a=> contentsExcel += Environment.NewLine + string.Join(" | " , a ));
StateHasChanged();
return Task.CompletedTask;
}
private Task OnDirectory(List<string> dirs)
{
if (dirs == null || !dirs.Any()) return Task.CompletedTask;
contents += "Dir:" + Environment.NewLine;
contents += dirs.First() + Environment.NewLine;
foreach (var item in dirs.Skip(1).OrderByDescending(a => a.StartsWith("+")).ThenBy(a => a))
{
contents += item + Environment.NewLine;
}
StateHasChanged();
return Task.CompletedTask;
}
}
演示地址 https://blazor.app1.es/filesystems
例: 打开文件读取为内存流用 MiniExcel 打开
使用方法
-
新建/打开文本文件
-
打开目录浏览
相关文章
- 前端面试 【JavaScript】— typeof 是否能正确判断类型?
- 前端面试 【JavaScript】— instanceof 能否判断基本数据类型?
- 前端面试 【JavaScript】— 能不能手动实现一下 instanceof 的功能?
- 前端面试 【JavaScript】— Object.is和=== 有什么区别?
- 前端面试 【JavaScript】— JS中类型转换有哪几种?
- 前端面试 【JavaScript】— == 和 ===有什么区别?
- 前端面试 【JavaScript】— 对象转原始类型是根据什么流程运行的?
- JavaScript 的 parseInt() 函数
- javascript实现两个数字进行组合
- JS监听键盘按键
- 大前端开发中的路由管理之五:Flutter篇
- Javascript的DOM操作
- 在Vue项目中使用WebSocket技术
- 新手向:前端程序员必学基本技能——调试JS代码
- React 毁了 Web 开发!
- 「JS 逆向百例」cnki 学术翻译 AES 加密分析
- 商标注册域名后缀用什么?商标和域名有哪些区别?
- 网站建设流程是怎样的?需要看重哪些细节?
- 网站域名商标注册流程是什么?网站域名商标有什么用?
- 如何建设一个实用性强的网站 网站上线后如何运营