如何优雅的获取excel内容，做项目国际化

首先，我们项目是通过vben admin搭建的基本框架，然后它内部集成了vue-i18n等国际化库，我们可以直接使用。但是国际化内容是产品将一些翻译输出到excel发给我，这样我就需要将excel内容一个一个的粘贴复制到项目国际化语言包文件中，这样就很恶心了。

国际化实现以前写过一篇文章

然后就想着通过excel解析库，去解析内容并输出到对应的文件中，这样就可以很快完成这种枯燥的功能了。

由于我们的文件是加密的，所以需要先解密

js 复制代码

// 上传文件，获取解密code
const uploadChange = async (e) => {
  const file = e.target.files[0];
  const fd = new FormData();
  fd.append("file", file);
  console.log("fd", fd.get("file"));
  const res = await fetch("解密url", {
    method: "post",
    body: fd,
    headers: {
      "Content-Type": "multipart/form-data",
    },
  }).then((res) => res.json());
  // 获取解密code
  getData(res.data.code);
};

获取完 code 进行解密，并对文件进行分析处理。

js 复制代码

const getData = (code) => {
  fetch(`解密url?id=${code}`, {
    method: "get",
    responseType: "blob",
  })
    .then((res) => {
      return res.blob();
    })
    .then((blob) => {
      let bl = new Blob([blob], { type: "Application/vnd.ms-excel" });
      let fileName = Date.parse(new Date()) + ".xlsx";
      var link = document.createElement("a");
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      window.URL.revokeObjectURL(link.href);
      // 直接传递给xlsx处理
      transformData(blob);
    });
};

不需要解密我们可以直接获取上传的文件对象，进行解析就可以了。

js 复制代码

const uploadChange = async (e) => {
  const file = e.target.files[0];
  // 直接解析文件对象
  transformData(file);
};

数据解析，借助xmls库。这里我们生成中英文两个 json 文件，方便我们后续操作。

js 复制代码

// xlsx处理数据
function transformData(file) {
  // 通过FileReader对象读取文件
  const fileReader = new FileReader();
  // readAsArrayBuffer之后才会启动onload事件
  fileReader.onload = (event) => {
    const data = new Uint8Array(event.target.result);
    const { SheetNames, Sheets } = XLSX.read(data, { type: "array" });
    // 这里只取第一个sheet
    const workSheets = Sheets[SheetNames[0]];
    const sheetRows = XLSX.utils.sheet_to_json(workSheets);
    console.log(sheetRows, "转换的excel");
    // 中文
    const obj = {};
    // 英文
    const enObj = {};

    sheetRows.forEach((item) => {
      // 对英文进行转换，输出属性字段。小驼峰
      const en =
        (item.en + "").replace(/\s/g, "").slice(0, 1).toLowerCase() +
        (item.en + "").replace(/\s/g, "").slice(1);
      obj[en] = item.zh;
      enObj[en] = item.en;
    });
    exportRaw(JSON.stringify(obj), "./zh.json");
    exportRaw(JSON.stringify(enObj), "./en.json");
    // console.log("obj", obj, enObj);
  };
  // uploadFile是上传文件的文件流
  fileReader.readAsArrayBuffer(file);
}

输出并下载文件。

js 复制代码

// 下载转化后的文件
function exportRaw(data, name) {
  let urlObject = window.URL || window.webkitURL || window;
  let export_blob = new Blob([data]);
  let save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
  save_link.href = urlObject.createObjectURL(export_blob);
  save_link.download = name;
  save_link.click();
}

这样一顿操作下来，解放了我的双手，又可以来两把 QQ Fly Car了。

往期文章

专栏文章

最近也在学习nestjs，有一起小伙伴的@我哦。

已辞职，先玩他个把月，舒服。结束了，一切都结束了。 🎇🎉✨

接上篇总结，近三个月的排错，原来的憧憬消失喽