JQuery $.get 并膨胀数据

Question

我被移交了一个小型浏览器应用程序，该应用程序获取二进制文件，解压缩它，然后在浏览器中显示它的内容。

但是，我无法将数据正确转换为字节数组，随后通货膨胀失败，"代码长度设置无效"。

这是我的获取方法：

$.get("metafile.hsm", function (metaFile) {
readCellFile(metaFile);
});

这是膨胀文件的方法：

function readCellFile(file) {
var reader = new FileReader(); 
//      var file = document.getElementById('cell_file_input').files[0];
reader.onload = function() { 
var compressedData = new Uint8Array(reader.result);
var data        = pako.inflate(compressedData); // Error "Invalid code length set"
var buf = new flatbuffers.ByteBuffer(data);
var cell = hdm.storage.hsg.Cell.getRootAsCell(buf);
var features = parseCell(cell);
// ...
}
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code);
};
var blob = new Blob([file], {type: "application/octet-stream"});
reader.readAsArrayBuffer(blob);
}

我转换错了吗？我可以排除文件已损坏，正如您在注释掉的行中看到的那样，我正在测试上传文件并且它起作用了。

Answer 1

首先，你应该检查Javascript中的gziping对于你的目标是否真的有必要。如果服务器配置为支持 gzip 文件并且浏览器支持 gzipping，则文件(即使是通过 javascript 请求的文件)也应该自动压缩。

如果您需要使用这种方法(例如，因为您无法控制服务器)，那么最好从 Web worker 中获取文件并在那里进行解压缩。以下代码(使用 gzip 文本文件在 chrome 上测试)假设您在主脚本和工作线程所在的目录中有 pako_inflate.min.js。另请注意，如果在本地测试，出于安全原因，您的浏览器可能会阻止从本地文件加载 Web Worker 。

只需调用 loadFile，传递要加载的文件的名称。 onFileLoaded将在完成加载后与数据一起调用。

文件加载器.js

/*
* If you are running this locally your browser may block you from 
* loading web worker from a local file. For testing you may want to run 
* a simple local web server like so: 'python -m http.server 8000'
*/
var gzippedFileLoaderWorker = new Worker("gzippedFileLoaderWorker.js");
gzippedFileLoaderWorker.onmessage = function (event) {
var message = event.data;
if (message.type == "START") {  
console.log(message.data);
} else if (message.type == "END") {
onFileLoaded(message.data);         
} else if (message.type == "ERROR") { 
console.log(message.data); 
}
};
function loadFile(fileName) {
gzippedFileLoaderWorker.postMessage({ 
type: 'loadFile', 
fileName: fileName 
}); 
}
function onFileLoaded(uncompressedFileData) {
console.log("Data Loaded:" + uncompressedFileData);
}

gzippedFileLoaderWorker.js

importScripts('pako_inflate.min.js');
onmessage = function(event) {
var message = event.data;
if (message.type === "loadFile") {
postMessage({ 
'type' : 'START', 
'data' : "Started Downloading: " + message.fileName 
});
try {
/* 
* Fetch is not supported on ie yet. If this is a requirement 
* find a polyfill like whatwg-fetch 
*/
fetch(message.fileName).then(function(response) {
if (!response["ok"]) { 
postMessage({ 
'type' : 'ERROR', 
'data' : "Error loading: " + message.fileName 
})       
}
return response["arrayBuffer"](); 
}).then(function(zipped) { 
return pako.ungzip(new Uint8Array(zipped));
}).then(function(binary) { 
/* 
*  Do any processing on the binary data here so you don't
*  block the main thread! Then pass that data back as an
*  object instead of the binary in the post message
*/
postMessage({ 
'type' : 'END', 
'data' : binary 
});
}); 
} catch(err) {
postMessage({ 
'type' : 'ERROR', 
'data' : err.message 
});
}
}
}