2017-02-21 8 views
1

pdf、cvs、word、jpg、pngのいずれかのファイルをダウンロードしようとしています。これを行うには、私はangularjs + filesaver.jsを使用しています。理由は分かりませんが、私のダウンロードは常に破損しています。AngularJS + FileSaver.js + .Net MVCでファイルをダウンロード

誰かが私を助けることができますか?

注: midia.Nome - ファイルの名前です。 midia.Tipo - ファイルのタイプ。 midia.Path - プロジェクトの物理パス。 midia.MidiaBytesString - Blobに変換するBase64のバイト 。

<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; } 
} 

はMidiaを登録マイ:

[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); 
} 

と私は私の角度$スコープに呼び出します

[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); 
} 

EDIT私は私を解決し

男を、次のリンクのAmeniトピックを使用している問題:download file using angularJS and asp.net mvc

私がする必要があるのは、AmeniトピックのPostメソッドとパスごとのダウンロード機能のように作成するだけでした。

答えて

1

download属性を単に追加/使用すれば問題ありません。ダウンロード属性の詳細はw3c download documentationにあります。

<a href="{{midia.path}}" download="filename">Download</a> 
+0

この方法では、ファイルをダウンロードするときにネットワークエラーが発生します。 –

+0

@FábioCarvalhoバックエンド側のファイルストリームにエラーがあるようです。ダウンロード属性が正常に機能しています。ファイルリンクをブラウザの直前に置くと、ファイルリンクにアクセスできるはずです。 – lin

+0

私の質問を更新しますか?私は何が間違っているのか分かりません。 :( –

関連する問題