vue使用xlsx库和xlsx-style库

xlsx(xlsx.js)

npm install xlsx
xlsx是由SheetJS开发的一个处理excel文件的npm库

适用于前端开发者实现导入导出excel文件的经典需求

为了区别于xlsx文件，突出其应用语言，该库通常又被称为js-xlsx

js数据导出为excel文件

<script setup>
import * as XLSX from "xlsx/xlsx.mjs";
const download = () => {
  const data = [
    ["姓名", "年龄", "性别"],
    ["张三", 18, "男"],
    ["李四", 22, "女"],
    ["王五", 25, "男"],
  ];
  //创建工作簿对象  该对象包含一个或多个工作表（worksheet）
  const workbook = XLSX.utils.book_new(); 
  //创建工作表  通过 xlsx 库的 utils.json_to_sheet() 方法创建一个工作表，并将准备好的数据作为参数传入该方法。如果需要创建多个工作表，可以多次调用该方法，并将它们添加到工作簿对象中
  const worksheet = XLSX.utils.json_to_sheet(data); 
  //将工作表添加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  //导出数据 通过 xlsx 库的 writeFile() 方法将工作簿对象导出为 Excel 文件。你可以指定导出的文件名和文件格式，比如 .xlsx 或 .csv
  XLSX.writeFile(workbook, "data.xlsx");
};
</script>
<template>
  <button @click="download">导出</button>
</template>

excel文件生成js数据

<template>
  <article>
    <p>导入xlsx文件</p>
    <input type="file" ref="upload" accept=".xls,.xlsx" />
  </article>
</template>
<script>
import XLSX from "xlsx"
export default {
  mounted() {
    // 监听表格导入事件
    this.$refs.upload.addEventListener("change", e => {
      this.readExcel(e)
    })
  },
  methods: {
    readExcel(e) {
      //表格导入
      const files = e.target.files
      //如果没有文件名，不往下执行
      if (files.length <= 0) return
      // 上传文件格式不正确,非xls或者xlsx格式文件，不往下执行
      if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) return
      const fileReader = new FileReader()
      // readAsBinaryString将文件读取为二进制编码
      fileReader.readAsBinaryString(files[0])
      // 读取完成
      fileReader.onload = ev => {
        try {
          // 二进制数据
          const data = ev.target.result
          // xlsx处理二进制数据
          const workbook = XLSX.read(data, {
            type: "binary"
          })
          //取第一张表
          const wsname = workbook.SheetNames[0] 
          // 根据表格内容生成json数据
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) 
          const outputs = [] //清空接收数据
          for (let i = 0; i < ws.length; i++) {
            const sheetData = {
              value: ws[i].adcode,
              label: ws[i].中文名
            }
            outputs.push(sheetData)
          }
        } catch (e) {
          console.log(e)
        }
      }
    }
  }
}
</script>

xlsx-js-style库

调节背景色、字体样式、border

<script setup>
import XLSX from "xlsx-js-style";
const download = () => {
  const wb = XLSX.utils.book_new();
  const ws = XLSX.utils.aoa_to_sheet([
    ["name", "age"],
    ["xxx", 21],
  ]);
  // 在单元格对象中添加 `s` 属性来设置该单元格的样式
  ws["A1"].s = {
    font: { bold: true },
    alignment: { horizontal: "center" },
    fill: { fgColor: { rgb: "FFFF0000" } },
  };
  ws["B2"].s = {
    alignment: { horizontal: "center" },
    font: { bold: true },
    fill: { fgColor: { rgb: "FFFF0000" } },
  };
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  XLSX.writeFile(wb, "example.xlsx");
};
</script>

去掉标题头

XLSX.utils.json_to_sheet默认使用Object.keys生成头部

所以如下数据格式不加上skipHeader: true,会出现0 1 2的索引头部

<script setup>
import XLSX from "xlsx-js-style";
const download = () => {
  const data = [
    ["姓名", "年龄", "性别"],
    ["张三", 18, "男"],
  ];
  const wb = XLSX.utils.book_new();
  const ws = XLSX.utils.json_to_sheet(data, {
    skipHeader: true,
  });
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  XLSX.writeFile(wb, "example.xlsx");
};
</script>
<template>
  <button @click="download">导出</button>
</template>

设置列宽

<script setup>
import XLSX from "xlsx-js-style";
const download = () => {
  const data = [
    { 姓名: "张三", 年龄: 18, 性别: "男" },
    { 姓名: "李四", 年龄: 20, 性别: "女" },
  ];
  const wb = XLSX.utils.book_new();
  const ws = XLSX.utils.json_to_sheet(data);
  ws["!cols"] = [
    {
      wpx: 150,
    },
    {
      wpx: 500,
    }
  ];
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  XLSX.writeFile(wb, "example.xlsx");
};
</script>
<template>
  <button @click="download">导出</button>
</template>

合并单元格

<script setup>
import XLSX from "xlsx-js-style";
const download = () => {
  const data = [
    { 姓名: "张三", 年龄: 18, 性别: "男" },
    { 姓名: "李四", 年龄: 20, 性别: "女" },
    { 姓名: "王五", 年龄: 12, 性别: "女" },
  ];
  const wb = XLSX.utils.book_new();
  const ws = XLSX.utils.json_to_sheet(data);
  // s 表示要合并的单元格范围的左上角单元格，r 表示该单元格的行号，c 表示该单元格的列号，行列号从 0 开始计数。所以 { r: 0, c: 0 } 表示第 1 行第 1 列的单元格，即 A1 单元格。
  // e 表示要合并的单元格范围的右下角单元格，其含义与 s 相同。所以 { r: 0, c: 1 } 表示第 1 行第 2 列的单元格，即 B1 单元格。
  // 因此，{ s: { r: 0, c: 0 }, e: { r: 0, c: 1 } } 表示要合并第 1 行第 1 列和第 1 行第 3 列之间的元格。
  // 注意，合并会以开始位置单元格中的内容为准，所以合并后的单元格中的内容为 A1 单元格中的内容。
  ws["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }];
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  XLSX.writeFile(wb, "example.xlsx");
};
</script>
<template>
  <button @click="download">导出</button>
</template>