经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » 浏览器 » 查看文章
Blazor 拖放上传文件转换格式并推送到浏览器下载
来源：cnblogs　　作者：AlexChow　　时间：2023/2/17 10:01:11　　对本文有异议

前言

昨天有个小伙伴发了一个老外java编写的小工具给我,功能是转换西班牙邮局快递Coreeos express的单据格式成Amazon格式,他的需求是改一下程序为匹配转换另一个快递公司MRW格式到Amazon格式,然而我堂堂一个Blazor发烧友,怎么可能去反编译人家的java修改呢?必须直接撸一个Blazor的啊.

实现目标

拖放多文件上传, 不落地(无中间保存临时文件)直接内存流转换格式, 直接推送弹出下载文件.

分析需求

原始MRW文件.txt

  1. "Abonado","Depto.","Fecha","N. Envio","N. Lote","Tipo de Cobro","Bultos","Kg.","Imp Reemb.","Referencia","Destinatario","Direccion","C.P.","Poblacion","Pais","Servicio","Retorno Alb.",""
  2. "xxx  SL ","N/A","15/02/2023","0263608650029","02636xxx20230214204409","Pagados","1","1","","403-6273741-3115504","Antonia xxx FERNANDEZ","C/MENDEZ NU?EZ 222","06420","CASTUERA","ESPA?A","U19E--Urgente 19 Expedición","SinRetorno",""
  3. "xxx  SL ","N/A","15/02/2023","0263608650028","02636xxx20230214204409","Pagados","1","1","","406-8908494-9500324","Baris xxx","Parque Erreniega Parkea,","31180","CIZUR MAYOR","ESPA?A","U19E--Urgente 19 Expedición","SinRetorno",""

实体类

来源

  1.   public class MrwTicket
  2.     {
  3.         public string Abonado { get; set; }
  5.         [DisplayName("Depto.")]
  6.         public string Depto { get; set; }
  8.         public DateTime Fecha { get; set; }
  10.         [DisplayName("N. Envio")]
  11.         public string N_Envio { get; set; }
  13.         [DisplayName("N. Lote")]
  14.         public string N_Lote { get; set; }
  16.         [DisplayName("Tipo de Cobro")]
  17.         public string TipoDeCobro { get; set; }
  19.         public string Bultos { get; set; }
  21.         [DisplayName("Kg.")]
  22.         public string Kg { get; set; }
  24.         [DisplayName("Imp Reemb.")]
  25.         public string ImpReemb { get; set; }
  28.         public string Referencia { get; set; }
  31.         public string Destinatario { get; set; }
  34.         public string Direccion { get; set; }
  36.         [DisplayName("C.P.")]
  37.         public string CP { get; set; }
  39.         public string Poblacion { get; set; }
  41.         public string Pais { get; set; }
  43.         public string Servicio { get; set; }
  45.         [DisplayName("Retorno Alb.")]
  46.         public string RetornoAlb { get; set; }
  47.     }

转换目标

  1.     public class AmazonTicket
  2.     {
  4.         [DisplayName("order-id")]
  5.         public string Order_id { get; set; }
  7.         [DisplayName("order-item-id")]
  8.         public string Order_item_id { get; set; }
  10.         [DisplayName("quantity")]
  11.         public string Quantity { get; set; }
  13.         [DisplayName("ship-date")]
  14.         public string Ship_date { get; set; }
  16.         [DisplayName("carrier-code")]
  17.         public string Carrier_code { get; set; }
  19.         [DisplayName("carrier-name")]
  20.         public string Carrier_name { get; set; }
  22.         [DisplayName("tracking-number")]
  23.         public string Tracking_number { get; set; }
  25.         [DisplayName("ship-method")]
  26.         public string Ship_method { get; set; }
  28.     }

建立Blazor页面 Mrw2Amazon.razor

拖放上传可以参考往期文章 https://www.cnblogs.com/densen2014/p/16128246.html

组件UI

  1. @page "/Mrw2Amazon"
  2. @inherits PublicComponentsBase
  3. @namespace AmeBlazor.Components
  5. <h4>MRW txt 转 Amazon txt</h4>
  7. <PageTitle>MRW txt 转 Amazon txt</PageTitle>
  9. <div @ref="UploadElement" style="padding: 20px; width: 200px; height: 200px; background-color: cornflowerblue; border: 2px dashed #0087F7; border-radius: 5px; ">
  10.     <p>拖放上传文件</p>
  11.     <InputFile OnChange="OnChange" class="form-control" multiple @ref="inputFile" />
  12. </div>
  14. <pre>
  15. <code>
  16.         @uploadstatus
  17. </code>
  18. </pre>

拖放上传js文件 wwwroot/drag.js

  1. export function init(wrapper, element, inputFile) {
  3.     //阻止浏览器默认行为
  4.     document.addEventListener("dragleave", function (e) {
  5.         e.preventDefault();
  6.     }, false);
  7.     document.addEventListener("drop", function (e) {
  8.         e.preventDefault();
  9.     }, false);
  10.     document.addEventListener("dragenter", function (e) {
  11.         e.preventDefault();
  12.     }, false);
  13.     document.addEventListener("dragover", function (e) {
  14.         e.preventDefault();
  15.     }, false); 
  17.     element.addEventListener("drop", function (e) {
  19.         try {
  20.             var fileList = e.dataTransfer.files; //获取文件对象
  21.             //检测是否是拖拽文件到页面的操作
  22.             if (fileList.length == 0) {
  23.                 return false;
  24.             }
  26.             inputFile.files = e.dataTransfer.files;
  27.             const event = new Event('change', { bubbles: true });
  28.             inputFile.dispatchEvent(event);
  29.         }
  30.         catch (e) {
  31.             wrapper.invokeMethodAsync('DropAlert', e);
  32.         }
  33.     }, false);
  35.     element.addEventListener('paste', function (e) {
  36.     
  37.         inputFile.files = e.clipboardData.files;
  38.         const event = new Event('change', { bubbles: true });
  39.         inputFile.dispatchEvent(event);
  40.     }, false);
  42.     return {
  43.         dispose: () => {
  44.             element.removeEventListener('dragleave', onDragLeave);
  45.             element.removeEventListener("drop", onDrop);
  46.             element.removeEventListener('dragenter', onDragHover);
  47.             element.removeEventListener('dragover', onDragHover);
  48.             element.removeEventListener('paste', handler);
  49.         }
  50.     }
  51. }

下载功能

Pages\_Layout.cshtml < /body >之前添加js代码

  1.     <script>
  2.         window.downloadFileFromStream = async (fileName, contentStreamReference) => {
  3.             const arrayBuffer = await contentStreamReference.arrayBuffer();
  4.             const blob = new Blob([arrayBuffer]);
  5.             const url = URL.createObjectURL(blob);
  6.             const anchorElement = document.createElement('a');
  7.             anchorElement.href = url;
  8.             anchorElement.download = fileName ?? '';
  9.             anchorElement.click();
  10.             anchorElement.remove();
  11.             URL.revokeObjectURL(url);
  12.         }
  13.     </script>

组件代码Mrw2Amazon.razor.cs

先拉个库MiniExcel

<PackageReference Include="MiniExcel" Version="1.*" />

  1. 动态加载 drag.js 文件.(参考往期文章,js隔离 https://www.cnblogs.com/densen2014/p/16027851.html)
  2. 使用拖放读取到 IBrowserFile 文件流
  3. 转换为 MemoryStream 供给 MiniExcel 读取. (PS:不能直接使用 IBrowserFile 的 stream , 当作课后作业自己了解一下.)
  4. MiniExcel 读取格式: var mrwTicket = MiniExcel.Query(fs, excelType: ExcelType.CSV).ToList();
  5. 转换格式
  6. 另存为目标格式csv
  7. 直接弹出目标文件下载到浏览器
  8. 全程不落地
  1. using Microsoft.AspNetCore.Components;
  2. using Microsoft.AspNetCore.Components.Forms;
  3. using Microsoft.JSInterop;
  4. using MiniExcelLibs;
  5. using MiniExcelLibs.Csv;
  7.     public partial class Mrw2Amazon : IAsyncDisposable
  8.     {
  10.         [Inject]
  11.         IJSRuntime JS { get; set; }
  12.         
  13.         //既然不落地,那就不需要这些了
  14.         //[Inject] 
  15.         //protected Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostEnvironment { get; set; }
  17.         protected ElementReference UploadElement { get; set; }
  18.         protected InputFile? inputFile { get; set; }
  20.         private DotNetObjectReference<Mrw2Amazon>? wrapper;
  22.         private IJSObjectReference? module;
  23.         private IJSObjectReference? dropInstance;
  25.         //既然不落地,那就不需要这些了
  26.         //protected string UploadPath = "";
  27.         
  28.         protected string? uploadstatus;
  29.         long maxFileSize = 1024 * 1024 * 15;
  31.         //既然不落地,那就不需要这些了
  32.         //protected override void OnAfterRender(bool firstRender)
  33.         //{
  34.             //if (!firstRender) return;
  35.             //UploadPath = Path.Combine(HostEnvironment!.WebRootPath, "uploads", "temp"); //初始化上传路径
  36.             //if (!Directory.Exists(UploadPath)) Directory.CreateDirectory(UploadPath); //不存在则新建目录
  37.         //}
  39.         protected async Task OnChange(InputFileChangeEventArgs e)
  40.         {
  41.             int i = 0;
  42.             var selectedFiles = e.GetMultipleFiles(100);
  43.             foreach (var item in selectedFiles)
  44.             {
  45.                 i++;
  46.                 await OnSubmit(item);
  47.                 uploadstatus += Environment.NewLine + $"[{i}]: " + item.Name;
  48.             }
  49.         }
  51.         protected async Task OnSubmit(IBrowserFile efile)
  52.         {
  53.             try
  54.             {
  56.             if (efile == null) return;
  57.             if (efile.ContentType != "text/plain")
  58.             {
  59.                 uploadstatus += Environment.NewLine + $"只接受txt文件.{efile.Name}为{efile.ContentType}";
  60.                 return;
  61.             }
  62.             await using var fs = new MemoryStream();
  63.             using var stream = efile.OpenReadStream(maxFileSize);
  65.             await stream.CopyToAsync(fs);
  67.             var mrwTicket = MiniExcel.Query<MrwTicket>(fs, excelType: ExcelType.CSV).ToList();
  68.             var amazonTicket = new List<AmazonTicket>();
  69.             foreach (var item2 in mrwTicket)
  70.             {
  71.                 amazonTicket.Add(new AmazonTicket()
  72.                 {
  73.                     Order_id = item2.Referencia,
  74.                     Ship_date = item2.Fecha.ToString("MM-dd-yyyy"),
  75.                     Carrier_code = "MRW",
  76.                     Tracking_number = item2.N_Envio.Remove(5, 1),
  77.                     Ship_method = "Urgente 19",
  78.                 });
  79.             }
  81.             var memoryStream = new MemoryStream();
  82.             memoryStream.SaveAs(amazonTicket, excelType: ExcelType.CSV, configuration: new CsvConfiguration() { Seperator = '\t' });
  83.             memoryStream.Seek(0, SeekOrigin.Begin);
  84.             using var streamRef = new DotNetStreamReference(stream: memoryStream);
  86.             await JS.InvokeVoidAsync("downloadFileFromStream", Path.GetFileNameWithoutExtension(efile.Name) + "_amazon.txt", streamRef);
  88.             uploadstatus += Environment.NewLine + $"{efile.Name} 转换OK";
  90.             }
  91.             catch (Exception e)
  92.             {
  93.                 uploadstatus += Environment.NewLine + $"转换出错 {e.Message}";
  94.             }
  95.             StateHasChanged();
  96.         }
  99.         protected override async Task OnAfterRenderAsync(bool firstRender)
  100.         {
  101.             if (!firstRender) return;
  103.             module = await JS.InvokeAsync<IJSObjectReference>("import", "./drag.js");
  104.             wrapper = DotNetObjectReference.Create(this);
  105.             dropInstance = await module.InvokeAsync<IJSObjectReference>("init", wrapper, UploadElement, inputFile!.Element);
  106.         }
  108.         [JSInvokable]
  109.         public void DropAlert(string msg)
  110.         {
  111.             uploadstatus += Environment.NewLine + $"[!Alert!]: " + msg;
  112.             StateHasChanged();
  113.         }
  116.         async ValueTask IAsyncDisposable.DisposeAsync()
  117.         {
  118.             if (dropInstance != null)
  119.             {
  120.                 await dropInstance.InvokeVoidAsync("dispose");
  121.                 await dropInstance.DisposeAsync();
  122.             }
  124.             if (wrapper != null)
  125.             {
  126.                 wrapper.Dispose();
  127.             }
  129.             if (module != null)
  130.             {
  131.                 await module.DisposeAsync();
  132.             }
  133.         }
  135.     }

运行

可接受多文件拖放同时转换

完整代码来的,直接cv应该可以用了.

原文链接：https://www.cnblogs.com/densen2014/p/17125416.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

浏览器热门文章

  • 浏览器安装Tampermonkey(俗称油猴子插件)，实现免费观看Vip视频、免费下载付费资源等…… - 进阶-之路
  • vue多次打包后出现浏览器缓存的问题及解决
  • 详解window.open被浏览器拦截的解决方案
  • nodejs读取图片返回给浏览器显示
  • 360浏览器兼容模式下IE内核版本
  • 浏览器报：net::ERR_EMPTY_RESPONSE解决方案
  • java request.getHeader("user-agent")获取浏览器信息的方法
  • selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
  • 《最新出炉》系列入门篇-Python+Playwright自动化测试-15-playwright处理浏览器多窗口切换 - 北京-宏哥
  • Selenium Webdriver 中的 executeScript 使用方法

    • 浏览器推荐文章

  • 优化 GitHub 体验的浏览器插件「GitHub 热点速览」
  • 安装量终于破千了！聊聊浏览器扩展开发的相关问题与解决方案
  • 将传统应用带入浏览器的开源先锋「GitHub 热点速览」
  • GitHub 创始人资助的开源浏览器「GitHub 热点速览」
  • 物联网浏览器(IoTBrowser)-MQTT协议集成和测试
  • 定制你的清爽Mac版Edge浏览器
  • 物联网浏览器(IoTBrowser)-Modbus协议集成和测试
  • 物联网浏览器(IoTBrowser)-顶尖OS2电子秤协议实现
  • 踩坑ffmpeg录制的mp4无法在浏览器上播放
  • 【Azure APIM】APIM 策略语句如何来设置多个Cookie值让浏览器保存

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号