Question

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

然而，我不能正确地将数据转换为字节数组，随后通过＆＃34;无效的代码长度设置＆＃34;来完成通知。

这是我的获取方法：

$.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中的gzipping是否真的对您的目标是必要的。如果服务器配置为支持gzipping文件并且浏览器支持gzipping，则应自动压缩文件（甚至是通过javascript请求的文件）。

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

只需调用loadFile，传递要加载的文件的名称即可。一旦数据加载完成，就会调用onFileLoaded。

<强> fileLoader.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 
        });
    }
  }
}

JQuery $ .get和inflate数据

1 个答案: