把我的悲惨故事说给大家乐呵乐呵:老板让运营把一些数据以json格式给我,当我看到运营在石墨文档上编辑的时候我人都傻了,我理解运营的艰难,可我也是真的难啊,在石墨文档编辑的眼花缭乱的,很多属性都错乱了(诸如把名字赋值给了爱好)。挨个调整半天,这种经历我可不想再来一次,考虑到后续还会使用,我决定写个工具给运营。
知识点:利用xlsx 对文件做格式转换
- 在 React 中将 JSON 转换为 Excel 可以使用类似 js-xlsx 的库。
- js-xlsx 是一个功能强大的 JavaScript 库,可以读写各种类型的表格,包括 Excel。
将XLSX转换成JSON格式
import * as XLSX from 'xlsx/xlsx.mjs';
import FileSaver from 'file-saver';
function change_XLSX_TO_JSON(e) {
// 获取上传的文件对象
const { files } = e.target;
// 通过FileReader对象读取文件
const fileReader = new FileReader();
fileReader.onload = (event) => {
try {
const { result } = event.target;
// 以二进制流方式读取得到整份excel表格对象
const workbook = XLSX.read(result, { type: "binary" });
let data = []; // 存储获取到的数据
// 遍历每张工作表进行读取(这里默认只读取第一张表)
for (const sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
// 利用 sheet_to_json 方法将 excel 转成 json 数据
data = data.concat(
XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
);
// break; // 如果只取第一张表,就取消注释这行
}
}
console.log(data);
//将json转成blob,存入本地
const blob = new Blob([JSON.stringify(data)], {
type: "text/xlsx;charset=utf-8",
});
FileSaver.saveAs(blob, "data.js");
} catch (e) {
// 这里可以抛出文件类型错误不正确的相关提示
console.log("文件类型不正确");
return;
}
};
// 以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
//清空input的值
e.target.value = "";
}
将JSON转换成XLSX格式
//读取upload 的 json 文件的内容
function change_JSON_XLSX(e) {
const { files } = e.target;
const fileReader = new FileReader();
fileReader.readAsText(files[0], "UTF-8"); //读取文件
fileReader.onload = function (evt) {
//读取完文件之后会回来这里
var fileString = evt.target.result; // 读取文件内容
const ws = XLSX.utils.json_to_sheet(JSON.parse(fileString));
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, "data.xlsx");
};
//情况input的值
e.target.value = "";
}