vue中使用excelJs导出excel

最新推荐文章于 2024-02-25 14:17:25 发布

鸣拙

最新推荐文章于 2024-02-25 14:17:25 发布

阅读量1.5k

点赞数 5

分类专栏： excelJs 文章标签： excel vue.js 前端

本文链接：https://blog.csdn.net/weixin_45939191/article/details/128006492

版权

excelJs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

excelJs

exceljJs文档：https://github.com/exceljs/exceljs/blob/master/README_zh.md

创建工作表

导入依赖

import ExcelJS from "exceljs";
import saveAs from "file-saver";

const workbook = new ExcelJS.Workbook();
  // 添加工作表，可以添加多个工作表
  const worksheet = workbook.addWorksheet("第一个工作表");
  const worksheet2 = workbook.addWorksheet("第二个工作表");

导出excel

workbook.xlsx.writeBuffer().then((buffer) => {
    saveAs(
      new Blob([buffer], { type: "application/octet-stream" }),
      "第一个excel.xlsx"
    );
  });

操作工作表（常用的方法）

使用坐标转化为对应的单元格位置可查看
坐标转数组

1. 在单元格添加数据

worksheet.getCell("A1").value = "我是A1";

2. 设置行高和列宽

// 设置行高
  worksheet.getRow(1).height = 20;
  // 设置列宽
  worksheet.getColumn(1).width = 20;

3.插入行

// 插入行
  worksheet.insertRow(1, ["我是插入行"]);

4.合并单元格

// 合并单元格
  worksheet.mergeCells("A3:D3");
  worksheet.getCell("A3").value = '合并的单元格';

5.设置单元格样式

文字对齐

// 文字垂直居中
worksheet.getCell("A3").alignment = {
    wrapText: true,
    vertical: "middle",
    horizontal: "center",
  };

设置背景色

// fgColor,bgColor 同时设置，背景色正常
worksheet.getCell("A3").fill = {
    type: "pattern",
    pattern: "mediumGray",
    fgColor: {
      argb: "ffff00"
    },
    bgColor: {
      argb: "ffff00"
    },
  };

设置边框

// style 可选择边框粗细
worksheet.getCell("A3").border = {
    top: {
      style: "thin",
    },
    right: {
      style: "thin",
    },
    left: {
      style: "thin",
    },
    bottom: {
      style: "thin",
    },
  };

文字样式

worksheet.getCell("A3").font = {
    name: '微软雅黑',
    size: 15,
    bold: true,
    color: {
      argb: 'ff1100'
    }
  }

6 为单元格添加公式

// 公式
  worksheet.getCell('A6').value = 12
  worksheet.getCell('B6').value = 13
  const sum_cell = '=(A6+B6)'
  worksheet.getCell('C6').value = {
    formula: sum_cell
  }