1

我正在对 Web 应用程序进行一些本地开发，并且需要从客户端的某些文件中创建一个 zip 存档。我有一个非常简单的测试页面，带有一个按钮和下载链接。单击该按钮会使用jszip 库生成一个 zip 文件，其中包括使用 XMLHttpRequest 加载的 png 图像。当您单击下载链接时，会下载一个存档，其中包含一个 png 图像文件，但该 png 图像已损坏。Windows 告诉我：

“WinZip Viewer 无法显示图像，因为图像文件丢失或无效；图像被跳过。”

我尝试遵循“常规”将高字节固定为 0xff 的解决方案，但我得到了相同的结果。（这是我的 GetZip2() 函数。）

任何人都可以提供关于为什么 zip 内容被破坏的想法吗？

提前致谢

HTML 代码：

<html>  
    <head>  
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">
        <title>Zip Get Test</title>
        <script  src="ZipTest.js" type='text/javascript'></script>
        <script  src="jszip.js" type='text/javascript'></script>

    </head>
<body>
    <input type="Button" id='btnBlob' value="Get image zip" onclick="GetZip2();">
    <a id="download_link" href="url">Download</a>
</body>

js代码：

function GetZip(){
var filename = "BlueRefresh.png";

var xhr=new XMLHttpRequest();
xhr.open("GET", filename, false);
xhr.overrideMimeType('text/plain; charset=x-user-defined');   
xhr.send();

var data = xhr.responseText;

var zip = new JSZip();
zip.file(filename, data);

//make a blob out of the image string
var blob = zip.generate({type:"blob"});
var myLink = document.getElementById("download_link")
myLink.href = window.URL.createObjectURL(blob);
myLink.download = "Archive.zip";

}

function GetZip2(){
var filename = "BlueRefresh.png";

var xhr=new XMLHttpRequest();
xhr.open("GET", filename, false);
xhr.overrideMimeType('text/plain; charset=x-user-defined');   
xhr.send();

var data = xhr.responseText;

var s2 = "";
for (x = 0; x<data.length; ++x) {
  code = data.charCodeAt(x) & 0xff;
  s2 += String.fromCharCode(code);
}
data = s2;


var zip = new JSZip();
zip.file(filename, data);

//make a blob out of the image string
var blob = zip.generate({type:"blob"});
var myLink = document.getElementById("download_link")
myLink.href = window.URL.createObjectURL(blob);
myLink.download = "Archive.zip";

}
4

1 回答 1

2

有同样的问题，我通过向函数添加选项binary : true来修复它。zip.file

zip.file(filename, data, {binary : true});

此外，默认情况下 jsZip 使用STORE（无压缩），因此您可能也需要添加compression : "DEFLATE"。看这里的描述。http://stuk.github.io/jszip/documentation/api_jszip/file_data.html

zip.file(filename, data, {binary : true, compression : "DEFLATE"});
于 2014-05-03T16:40:45.233 回答