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

Question

我的代码如下：

    [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 文件。

Answer 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 代码下载它。希望这对其他人也有帮助。

Answer 2

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

您还可以通过使用 window.location.href 访问创建 ZIP 文件然后发送的单个操作 URL（例如 /downloadZipFile）将整个事情减少到单个 HTTP 请求立即下载为 FileResult。您甚至可以在不将其保存到磁盘的情况下在内存中创建它。那么你不需要单独的 AJAX 调用来获取文件的 URL。

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

How can i generate and download zip file from server in angularJs application?

javascript

asp.net-mvc

angularjs

system.io.compression