使用 Javascript version_hint.toFixed 从浏览器读取 HDF5 不是函数答案

【问题标题】：Read HDF5 from Browser with Javascript version_hint.toFixed is not a function使用 Javascript version_hint.toFixed 从浏览器读取 HDF5 不是函数
【发布时间】：2022-08-10 14:16:24
【问题描述】：

所以我有一些来自 Matlab 的 HDF5 文件，格式为 .mat（更改为 .hdf5 没有任何区别）在带有 h5py 的 Python 中，我可以毫无问题地提取我想要的数据，我运行一个 Flask 应用程序，所以我想做这个前端。

在网站上有一个表单/文件上传和一个读取文件的按钮，当文件上传时，我想从文件中获取密钥并显示密钥。

我尝试过使用 jsfive 和 h5wasm，但它们都给我在 python 上工作的文件相同的错误： Uncaught TypeError: version_hint.toFixed is not a function

iv\'e 尝试的代码是针对 jsfive 的：

从 HTML 导入： <script src=\"https://cdn.jsdelivr.net/npm/jsfive@0.3.10/dist/browser/hdf5.js\"></script>

function signalsSearch() {
    var file_input = document.getElementById(\'signal-file\');
    var file = file_input.files[0];
    let datafilename = file.name;
    let reader = new FileReader();
    reader.addEventListener(\"loadend\", function(evt) {
        let barr = evt.target.result;
        var f = new hdf5.File(barr, datafilename);
        let signals = f.keys();
        console.log(signals);
    });
    reader.readAsArrayBuffer(file);
}

这是引发错误的var f = new hdf5.File(barr, datafilename);

这对于 h5wasm：

import * as hdf5 from \"https://cdn.jsdelivr.net/npm/h5wasm@latest/dist/esm/hdf5_hl.js\";

await hdf5.ready;

async function loadData() {
    var signals = [];
    let file = $(\"#signal-file\")[0].files[0];
    let data_filename = file.name;
    let ab = await file.arrayBuffer();
    // hdf5.FS.writeFile(data_filename, new Uint8Array(ab));
    let f = new hdf5.File(ab, \"r\");
    // do somthing with f
    signals = f.keys();
    f.close();
    return signals
}

这是let f = new hdf5.File(ab, \"r\");，它给出了一个错误，在示例中它通过data_filename而不是ab，但这只会给出错误TypeError: First argument to DataView constructor must be an ArrayBuffer

所以从我发现的错误可能是toFixed() 得到一个字符串值而不是一个int 或float，我不知道为什么以及它是否可以修复。难道hdf5的格式化方式不是两个库都可以读取的，而是在h5py上吗？

在那种情况下我能做什么，iv\'e尝试制作一个提交按钮并在python中进行读取并将结果传递回网站，但这会使网站重新加载并滚动回顶部，这有点烦人是一个巨大的形式的一部分。

标签： javascript python flask hdf5

【解决方案1】：

我通过制作一个将文件发送到的 api 并从中获取答案来解决此问题，该列表来自在 python 后端处理的文件中的列表。我不知道这是否是做这样的事情的正确方法，但至少它有效。

这是javascript中的函数：

/**
 * Async read a hdf5 file by posting to backend and waiting for the return value containing the signals in a list
 * @param {string} fileInputName Name of the input with the file to read from
 * @param {*} sectionNumber The section of the input to read the file from
 * @returns A list of the signals availible in the Hdf5 file
 */
async function getSignalsFromHdf5(fileInputName, sectionNumber=1) {
    // Create a new form for sending the file
    let formData =  new FormData();
    // Append the file
    formData.append("file", $('input[name="' + fileInputName + '"]')[sectionNumber - 1].files[0]);
    // Send file and get response
    if ($('input[name="' + fileInputName + '"]')[sectionNumber - 1].files.length > 0) {
        var keys = await fetch('http://urlofmysite:5005/api/get-keys-from-hdf5', {
            method: 'POST',
            body: formData
    }).then((response) => {
            return response.json();
        }).then((myJson) => {
            return myJson['keys'];
        });
    }
    else {
        return []
    }
    return keys
}

这是后端python代码：

# Download HDF5 file, return the keys and delete the file again
@app.route('/api/get-keys-from-hdf5', methods=['GET', 'POST'])
def get_keys_from_hdf5():
    if request.method == 'POST':
        file = request.files['file']
        keys = read_hdf5_file_keys(file)
        response = jsonify({"keys": keys})
        response.headers.add('Access-Control-Allow-Origin', '*')
        return response

我从来没有找到一种在不修改现有库或制作新库的情况下用 javascript 读取它们的方法。

【讨论】：