纯js实现json文件读取处理下载

需求分析 用户上传 json 文件，客户端进行处理解析后，返回进行下载 技术选型 基于本身的项目采用了 vue + elementUI 的前端框架开发，使用 FileReader 和 file-saver 进行数据的读取和写入 具体实现 1.模板部分 2.上传后 input 状态修改监听 写在 mounted 中，直接初始化 mounted() { const input = document.querySelector('input[type=file]'); input.addEventListener( 'change', () => { if (input.files && input.files.length) { const reader = new FileReader(); reader.readAsText(input.files[0], 'utf8'); // input.files[0]为第一个文件 reader.onload = () => { // reader.result 就是文件内容 console.log(JSON.stringify(JSON.parse(reader.result))) }; } }, false ); }, 3.处理后的 json 数据，进行下载保存 采用插件 file-saver 进行保存 import FileSaver from 'file-saver'; ... saveAs() { let name = `transJson_${new Date().getTime()}.json`; var file = new File([JSON.stringify(JSON.parse(reader.result))], name, { type: 'text/plain;charset=utf-8', }); FileSaver.saveAs(file); },

本文章由javascript技术分享原创和收集