如何使用客户端javascript下载从字符串生成的gzip压缩文件答案

【问题标题】：How to download gzip compressed file generated from string with client-sided javascript如何使用客户端javascript下载从字符串生成的gzip压缩文件
【发布时间】：2021-04-03 23:45:47
【问题描述】：

我基本上有一个网站，我想完全在客户端工作，它需要能够接收 gziped xml 文件，解压缩它，修改一些东西，然后压缩它并提示用户下载它。

我的接收/解压缩部分使用 zlib 和 browserify 拖放文件，但是当我压缩文件并下载它时，它无法解压缩，因为它显然有一个“无效的标题”。

工作接收/解压部分：

const zlib = require('zlib')
const drop = require('drag-and-drop-files')
const fileReaderStream = require('filereader-stream')
const concat = require('concat-stream')
const $ = require('jquery')

drop(document.getElementById('drop'), function (files) {
    var file = files[0]


    fileReaderStream(file).pipe(
        concat(function (contents) {
            var output = zlib.gunzipSync(contents).toString('utf-8')
            console.log('File loaded successfully')
            var xmlData = $.parseXML(output)
            doSomething(xmlData)
        })
    )
})

压缩/下载部分不工作：

var string = $(this).prop('outerHTML')

var output = zlib.gzipSync(string).toString('utf-8')

var a = document.createElement('a')
a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(output)
a.download = `${name}.gz`
a.click()

文件已正确下载，但似乎已损坏。当我跳过压缩并提示用户将原始 xml 作为文本文件下载时，一切正常。

如果有人能告诉我如何解决这个问题，我将不胜感激。

编辑 1 - 尝试使用 blob：

var output = zlib.gzipSync(string).toString('utf-8')

var blob = new Blob([output], { type: 'application/gzip' })
var blobUrl = URL.createObjectURL(blob)

var a = document.createElement('a')
a.href = blobUrl
a.download = `${name}.gz`
a.click()

不幸的是，结果是一样的。

【问题讨论】：

如果您使用类型化数组然后使用 blob 保存内容会更好...
您能否尝试提供正确的 MIME 类型：'data:application/x-gzip;...？
刚刚尝试更改 MIME 类型，结果还是一样。
查看 createObjectURL 和 blob（正如有人已经建议的那样），认为这是以编程方式触发下载的更好方法。 Blob 允许您设置 mime 类型，gzip 必须有一个。

标签： javascript browserify zlib

【解决方案1】：

我设法使 blob 版本工作，似乎在创建 blob 之前转换为字符串会导致问题。

var output = zlib.gzipSync(string)
var blob = new Blob([output.buffer], { type: 'application/gzip' })

感谢所有建议使用 blob 的人。

【讨论】：