使用 AngularJS + FileSaver.js + .Net MVC 下载文件

Posted 2023-03-15

【中文标题】使用 AngularJS + FileSaver.js + .Net MVC 下载文件

【英文标题】：Download a file with AngularJS + FileSaver.js + .Net MVC

【发布时间】：2017-07-11 15:12:51

【问题描述】：

我正在尝试下载可以是 pdf、cvs、word、jpg 或 png 的文件。为此，我使用了 angularjs + filesaver.js。不知道为什么，我的下载总是损坏。

有人可以帮助我吗？

注意： midia.Nome - 我的文件的名称。 midia.Tipo - 文件的类型。 midia.Path - 项目的物理路径。 midia.MidiaBytesString - 字节 在 Base64 上转换为 blob。

<a href="midia.path" target="_blank" ng-click="Download(midia.MidiaBytesString, midia.Nome, midia.Tipo)">Download</a> <br />

我的文件下载方法：

$scope.Download = function(bytes,nome,tipo)
var file = new File([bytes], nome , type: "application/octet-stream");
saveAs(file);
;

我的视图模型

公共类 MidiaViewModel 公共 int MidiaId 获取；放;

    public string MidiaDescricao  get; set; 

    //public string MidiaPath  get; set; 

    public byte[] MidiaBytes  get; set; 

    public string MidiaBytesString  get; set; 

    public int OsId  get; set; 

    public virtual OsViewModel Os  get; set; 

    public string MidiaNome  get; set; 

    public string MidiaType  get; set; 

    public string MidiaPath  get; set; 

    public long MidiaSize  get; set; 

我的注册媒体：

[HttpPost]
public JsonResult AtualizarMidias(IEnumerable<HttpPostedFileBase> arquivos, IEnumerable<string> descricoes, int osId)

    var ordermDeServico = _osService.ObterPorIdLazyLoad(osId);

    foreach (var file in arquivos)
    

        string targetFolder = HttpContext.Server.MapPath("~/Content/uploads/");
        string targetPath = Path.Combine(targetFolder, file.FileName);


        if (file != null && file.ContentLength > 0)
        

            var itens = arquivos.ToList();
            var des = descricoes.ToList();
            var index = itens.FindIndex(c => c.FileName == file.FileName);
            var midiaViewModel = new MidiaViewModel
            
                MidiaType = file.ContentType,
                MidiaNome = file.FileName,
                MidiaPath = targetPath,
                MidiaSize = file.ContentLength,
                MidiaDescricao = des[index].ToString(),
                MidiaBytes = converterArquivo(file)
            ;

            var midia = Mapper.Map<MidiaViewModel, Midia>(midiaViewModel);
            midia.OsId = ordermDeServico.OSId;
            file.SaveAs(targetPath);
            _midiaService.Salvar(midia);
        
    

    return Json(new  resultado = true , JsonRequestBehavior.AllowGet);

我在哪里调用我的角度 $scope：

[HttpPost]
public string getMidiasOS(int idOS)

    var getMidias = _midiaService.ObterMidiaPorIdOs(idOS);
    List<MidiaAngularViewModel> midiaNova = new List<MidiaAngularViewModel>();


    foreach (var midia in getMidias)
    

        midiaNova.Add(new MidiaAngularViewModel
        
            Id = midia.MidiaId,
            Path = midia.MidiaPath,
            Tipo = midia.MidiaType,
            Descricao = midia.MidiaDescricao,
            MidiaBytesString = Convert.ToBase64String(midia.MidiaBytes),
            Nome = midia.MidiaNome
        );
    

    return JsonConvert.SerializeObject(midiaNova);

编辑

伙计们，我使用以下链接中的 Ameni 主题解决了我的问题：download file using angularJS and asp.net mvc

我需要做的就是创建类似于 Ameni 主题的 Post 方法和按路径下载功能。

【参考方案1】：

只需添加/使用download 属性就可以了。更多关于下载属性可以在w3c download documentation找到。

<a href="midia.path" download="filename">Download</a>

【讨论】：

这种方法在下载文件时会出现网络错误。

@FábioCarvalho 看起来后端文件流中存在错误。下载属性运行良好。您应该能够通过将文件链接直接粘贴到浏览器中来访问它。

我更新了我的问题，你能看看吗？我不知道我做错了什么。 :(

@FábioCarvalho 您必须返回文件流，而不是 Json 对象。请参考：***.com/questions/9541351/… 如果您在 URL 上返回一个不错的文件，下载将非常有效。

谢谢林，我解决了我看这个话题的问题：***.com/questions/40003050/…^^