当前位置：首页 > news >正文

【前端/js】使用js读取本地文件(xml、二进制)内容

news 来源：原创 2024/9/20 11:53:10

说在前面

浏览器版本：Microsoft Edge 126.0.2 (正式版本) (64 位)

FileReader

MDN
FileReader 接口允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

DOMParser

MDN
DOMParser 可以将存储在字符串中的 XML 或 HTML 源代码解析为一个 DOM Document。

文本文件

以xml文件为例

vue

<script setup>function btnClick() {document.getElementById("file1").click()
}function openFile(e) {var file = e.target.files[0]var reader = new FileReader()reader.onload = function(e) {var content = e.target.resultvar parser = new DOMParser()var xmlDoc = parser.parseFromString(content, "text/xml")console.log(xmlDoc)}reader.readAsText(file)
}
</script><template><button @click="btnClick">Open</button><input id="file1" type="file" style="display:none" @change="openFile">
</template>

结果

二进制文件

以navmesh为例

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import {init as initRecastNavigation,NavMeshQuery,
} from '@recast-navigation/core';
import { generateSoloNavMesh } from '@recast-navigation/generators';
import { DebugDrawer, getPositionsAndIndices } from '@recast-navigation/three';
import { exportNavMesh, importNavMesh } from 'recast-navigation';// initialise recast-navigation
initRecastNavigation();// setup scene
const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera();
camera.position.set(10, 10, -10);const orbitControls = new OrbitControls(camera, renderer.domElement);// handle resizing
const onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);
};
onWindowResize();window.addEventListener('resize', onWindowResize);// animate
const animate = () => {requestAnimationFrame(animate);renderer.render(scene, camera);
};animate();function btnClick() {document.getElementById('file1').click();
}function openBinFile(e) {var file = e.target.files[0];var reader = new FileReader();reader.onload = function (e) {var content = new Uint8Array(e.target.result);const { navMesh } = importNavMesh(content);const debugDrawer = new DebugDrawer();debugDrawer.drawNavMesh(navMesh);scene.add(debugDrawer);console.log(content);};reader.readAsArrayBuffer(file);
}
</script><template><button @click="btnClick">Open</button><input id="file1" type="file" style="display: none" @change="openBinFile" />
</template>