如何在angularJs应用程序中从服务器生成和下载zip文件?

时间:2018-04-18 08:33:51

标签: javascript angularjs asp.net-mvc system.io.compression

我的代码如下:

    [System.Web.Mvc.HttpPost]
    public ActionResult DownloaZipFile([FromBody] int id)
    {
        var result = _service.GetDocuments(id);
        var downloadFileName = $"Report{id}.zip";
        var downloadFilePath = Server.MapPath($"~/Uploads/TempZipDownload/{downloadFileName}");

        if (System.IO.File.Exists(downloadFilePath))
        {
            System.IO.File.Delete(downloadFilePath);
        }

        var zip = ZipFile.Open(downloadFilePath, ZipArchiveMode.Create);

        foreach (var file in result)
        {
            zip.CreateEntryFromFile(Server.MapPath(Path.Combine("~/Uploads/TempImageDownload/" + file.Filename)), file.Filename);
        }

        zip.Dispose();
        return File(downloadFilePath, "application/zip", downloadFileName);
    }

来自组件的AngularJs代码:

vm.downloadReport = function(id) {
            service.DownloadReport(id).then(function(response) {

                var file = new Blob([response.data],
                {
                    type: 'application/zip'
                });

                if (navigator.msSaveBlob) {
                    navigator.msSaveBlob(file);
                } else {
                    var fileUrl = URL.createObjectURL(file);
                    console.log(fileUrl);
                    var a = document.createElement('a');
                    a.href = fileUrl;
                    a.download = 'ReportDownload' + id + '.zip';
                    document.body.appendChild(a);
                    a.click();
                }
            });
        }

在所有代码下载zip文件但是当我试图打开zip文件时它给我错误。无效的zip文件。

请注意我已使用System.IO.Compression库生成并下载zip文件。

2 个答案:

答案 0 :(得分:1)

我通过以下方式解决了这个问题:

    [System.Web.Mvc.HttpPost]
    public ActionResult DownloaZipFile([FromBody] int id)
    {
        var result = _service.GetDocuments(id);
        var downloadFileName = $"Report{id}.zip";
        var downloadFilePath = Server.MapPath($"~/Uploads/TempZipDownload/{downloadFileName}");

        if (System.IO.File.Exists(downloadFilePath))
        {
            System.IO.File.Delete(downloadFilePath);
        }

        var zip = ZipFile.Open(downloadFilePath, ZipArchiveMode.Create);

        foreach (var file in result)
        {
            zip.CreateEntryFromFile(Server.MapPath(Path.Combine("~/Uploads/TempImageDownload/" + file.Filename)), file.Filename);
        }

        zip.Dispose();
        return Json($"/Uploads/TempZipDownload/{downloadFileName}");
    }

在AngularJs代码中:

vm.downloadReport = function(id) {
            service.DownloadReport(id).then(function(response) {
                var a = document.createElement('a');
                a.href = response.data;
                a.download = 'ReportDownload';
                document.body.appendChild(a);
                a.click();
            });
        }

这将在response.data中捕获压缩文件URL并通过javascript代码下载。希望这对其他人也有帮助。

答案 1 :(得分:0)

我认为您可以只执行 window.location.href = response.data 而不是创建虚拟超链接。有关文档,请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Location

您还可以通过使用 window.location.href 访问单个操作 URL(例如 /downloadZipFile)来将整个过程简化为单个 HTTP 请求,该 URL 创建 ZIP 文件,然后将其作为 { {1}} 立即。您甚至可以在不将其保存到磁盘的情况下在内存中创建它。然后你不需要单独的 AJAX 调用来获取文件的 URL。