我想设置一个 React hook(或功能组件)来从 gzip 压缩文件中读取数据,使用
pako
库提取其数据,然后在浏览器中呈现它。
编辑:压缩的二进制文件位于项目本地。它没有托管在其他地方的网络服务器上。
我想到的一个简单测试看起来与此类似:
import { memo } from 'react';
import compressedFile from "./data.json.gz";
import './App.css';
const pako = require('pako');
const App = memo(({}) => {
try {
const compressedBytes = new Uint8Array(compressedFile);
const uncompressedStr = pako.inflate(compressedBytes, { to: 'string' });
return (
<div>
Data: <pre>{uncompressedStr}</pre>
</div>
);
} catch (err) {
return (
<div>
Error: <pre>{err}</pre>
</div>
);
}
});
export default App
但是,由于以下错误,这不起作用:
Uncaught SyntaxError: Invalid or unexpected token (at data.json.gz?import:1:1)
文件
data.json.gz
与App
位于同一目录中,只是一个gzip压缩的测试文件,例如:
$ echo -e '{"a":123,"b":456}' | gzip -c > data.json.gz
import
可以用来读取二进制数据吗?是否有另一种方法可以直接或间接将二进制文件读入我可以使用 pako
处理的字节数组?
请注意,我正在寻找专门关于直接使用二进制文件而不是 Base-64 或其他重新编码的字符串文件的答案。
据我所知,模块系统需要一个可以解析为 JavaScript 可以理解和执行的格式的文件结构。默认情况下,二进制文件不属于该类别。
我可以想到两种方法来处理这个问题:
从 Webpack 配置文件加载器。
或者简单地使用 fetch:
const response = await fetch("/data.json.gz");
const compressedBytes = await response.arrayBuffer();