如何使用 client-sided javascript 下载从字符串生成的 gzip 压缩文件

Question

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

我有 receiving/decompressing 部分使用 zlib 和 drag-and-drop-files 与 browserify 一起工作，但是当我压缩文件并下载它时，它无法解压缩，因为它显然有一个“无效 header".

工作 receiving/decompressing 部分：

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

不工作 compressing/downloading 部分：

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()

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

Answer 1

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

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

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

如何使用 client-sided javascript 下载从字符串生成的 gzip 压缩文件

How to download gzip compressed file generated from string with client-sided javascript

javascript

zlib

browserify