时间戳

首页 > 解决方案 > 将 ZIP 转换为 Blob

download - 将 ZIP 转换为 Blob

问题描述

在我们的 Ruby on Rails 应用程序中，我们有一个发送 ZIP 的控制器操作：

send_data File.read(zip_pathname), filename: zip_filename, type: 'application/zip'

我们使用链接上的下载属性使其可下载，如下所示：

<%= link_to zip_download_path(@object), download: zip_filename do %>
  <i class="fas fa-download fa-fw"></i> Download ZIP
<% end %>

效果很好，但可能需要 5-6 秒才能发生任何事情（由于 ZIP 大小）

为了防止用户再次单击链接并显示正在发生的事情，我们尝试使用 AJAX 检索下载，然后将其转换为 Blob 并使用 FileReader 下载它：

const reader = new FileReader();
reader.onload = function(e) {
    const anchor = document.createElement('a');
    anchor.style.display = 'none';
    anchor.href = e.target.result;
    anchor.download = 'download';
    anchor.click();
    hideLoading();
}

$('[download]').on('click', function (e) {
    e.preventDefault();
    showLoading();
    var download = $(this);
    $.get(download.attr('href'), function (data) {
        const blob = new Blob([data], { name: download.attr('download'), type: 'application/zip' });
        reader.readAsDataURL(blob);
    });
});

这成功显示了加载屏幕，然后下载 ZIP 并再次隐藏加载屏幕，除了 ZIP 作为下载错误返回，而不是像以前那样实际的 ZIP ......看起来 ZIP 到 Blob 的转换是它失败的地方......

是否可以将 ZIP 转换为 Blob？上面的代码有什么问题吗？

在看：e.target.result内容是：

data:application/zip;base64,...

所以看起来它已经成功创建了数据......但是当我尝试在浏览器窗口中打开它时，它没有显示任何内容......

标签： downloadblobfilereader

解决方案

如果您通过 ajax 下载非文本文件（如 zip 文件），则必须指定一个 responseType，一个二进制文件，在下面的示例中，我将其设置为 blob，以便您在 ajax 响应中收到的数据将是一个斑点。
在锚点中创建并使用 blob url，而不是庞大的数据 uri。

    $.ajax({
        url:download.attr('href'),
        cache:false,
        xhrFields:{
            responseType: 'blob'
        },
        success: function(data){
            var blobUrl = window.URL.createObjectURL(data);
            const anchor = document.createElement('a');
            anchor.style.display = 'none';
            anchor.href = blobUrl;
            anchor.download = 'download.zip';
            anchor.click();
            hideLoading();
        },
        error:function(){

        }
    });

jQuery 3+ 需要这个才能工作。

推荐阅读