javascript - 使用 jszip 损坏了存档内容

标签 javascript jszip

我正在做一些网络应用程序的本地开发,需要从客户端的一些文件创建一个 zip 存档。我有一个非常简单的测试页面,带有按钮和下载链接。单击该按钮会使用 jszip library 生成一个 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";

}

最佳答案

遇到了同样的问题,我通过将选项 binary : true 添加到 zip.file 函数来修复它。

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

默认情况下,jsZip 使用STORE(无压缩),因此您可能还需要添加压缩:“DEFLATE”。请看这里的描述。 http://stuk.github.io/jszip/documentation/api_jszip/file_data.html

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

关于javascript - 使用 jszip 损坏了存档内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21995329/

相关文章:

javascript - JSZip 循环?

javascript - 如何将从 SVG 元素和 csv 文件生成的 PNG 图像导出到可下载的 ZIP 文件中

javascript - 将 JSZip 对象转换为 ArrayBuffer 的最佳方法是什么?

javascript - 如何在 react.js 中实现 jszip

javascript - 更改默认文本 Material 表

javascript - Angular 1.2.24 : Testing directive throws undefined in scope. $摘要();

javascript - 如何解决错误: Document not attached to a Window?

javascript - koa.js 中的 JSZip 具有流式输入/输出

javascript - 循环遍历 X 类的 div 来查找与 Y 类的 div 的相关性

javascript - MVC 4 仅刷新 PartialView