ExcelJS纯前端插入数据和图片在表格中

最新推荐文章于 2024-07-30 11:29:23 发布

永不松动的木筏

最新推荐文章于 2024-07-30 11:29:23 发布

阅读量8.4k

点赞数 2

文章标签： javascript vue.js es6

本文链接：https://blog.csdn.net/stanch_raft/article/details/113417043

版权

ExcelJS简介

ExcelJS可以读取，操作并写入电子表格数据和样式到 XLSX 和 JSON 文件

安装（本文以在vue框架中使用为例）

npm install exceljs file-saver -S
导入

import Excel from "exceljs";
import * as FileSaver from "file-saver";//用于客户端读写数据

使用示例
HTML标签

<button type="success" @click="exportStatics">导出</button>

js代码
添加工作表

methods：{
        async exportStatics() {
            const EXCEL_TYPE =
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
          // 创建工作簿
            let workbook = new Excel.Workbook();
          // 设置工作簿的属性
            workbook.creator = "Me";
            workbook.lastModifiedBy = "Her";
            workbook.created = new Date(1985, 8, 30);
            workbook.modified = new Date();
            workbook.lastPrinted = new Date();
            // 工作簿视图，工作簿视图控制在查看工作簿时 Excel 将打开多少个单独的窗口
            workbook.views = [
                {
                    x: 0,
                    y: 0,
                    width: 1000,
                    height: 2000,
                    firstSheet: 0,
                    activeTab: 1,
                    visibility: "visible",
                },
            ];
          // 
         let worksheet = workbook.addWorksheet("sheet1");
           const imgArr = [base64格式的图片1，base64格式的图片2]

            // 通过 base64  将图像添加到工作簿
            imgArr .forEach((item，index) => {
              // 通过 base64  将图像添加到工作簿
                const imageId1 = workbook.addImage({
                    base64: getFullCanvasDataURL(item),
                    extension: "png",// 图片扩展名，支持“jpeg”，“png”，“gif”
                });
               在一定范围内添加图片
                worksheet.addImage(
                    imageId1,
                    `${String.fromCharCode(65 + index * 6)}1:${String.fromCharCode(
                        70 + index * 6
                    )}16`
                );
            });
            const heard = {
                enterpriseName:'公司名称',
                applicationName: '应用名称',
               
            };
            const listHearder = Object.keys(heard);
           // 按行的格式插入表头
            worksheet.insertRow(
                17,// 行的位置
                listHearder.map((item) => heard[item])
            );
      
               //插入表格数据
                const tableData =  [{enterpriseName:"长亮科技",applicationName:"test"},{enterpriseName:"长亮科技1",applicationName:"test1"}];
                tableData.forEach((item, index) => {
                    worksheet.insertRow(
                        index + 18,
                        listHearder.map((ite) => item[ite])
                    );
                });
      //导出表格数据
            workbook.xlsx.writeBuffer().then((data) => {
                const blob = new Blob([data], { type: EXCEL_TYPE });
                console.log(blob.stream(), 6664744)
                FileSaver.saveAs(blob, "download.xlsx");
            });
        },

}

以表格方式添加工作表

const rows = []
tableData.forEach((item, index) => {
  rows.push(listHearder.map((ite) => item[ite]))
});

worksheet.addTable({
  name: 'MyTable',
  ref: 'A20',
  bold: true,
  headerRow: true,
  totalsRow: false,
  style: {
       theme: '',
       showRowStripes: false,
      },
  columns: listHearder.map((item) => {
                    return { name: heard[item]}
               }),
  rows
});
// 给表格添加边框
const renderTabBorder = (index, ind, obj) => {
  worksheet.getCell(`${String.fromCharCode(65 + index)}${ind + 20}`).border = { ...obj,
    top: { style: 'thin' },
    right: { style: 'thin' }, };
}

const len =  rows.length + 1
for (let ind = 0; ind < len; ind++){
   listHearder.forEach((item, index) => {
     if (index === 0 && ind !== rows.length) {
       renderTabBorder(index, ind, {
                 left: { style: 'thin' },
              })
      } else if (ind === rows.length  && index !== 0) {
        renderTabBorder(index, ind, {
                    bottom: { style: 'thin' }
        })
      } else {
        renderTabBorder(index, ind, {
                    left: { style: 'thin' },
          bottom: { style: 'thin' }
        })
      }
})
}
workbook.xlsx.writeBuffer().then((data) => {
                const blob = new Blob([data], { type: EXCEL_TYPE });
                console.log(blob.stream(), 6664744)
                FileSaver.saveAs(blob, "download.xlsx");
            });
        },

注意：将表格添加到工作表将通过放置表格的标题和行数据来修改工作表。结果就是表格覆盖的工作表上的所有数据（包括标题和所有的）都将被覆盖。

表格属性

表属性描述是否需要默认值
name 表格名称 Y
displayName 表格的显示名称 N name
ref 表格的左上方单元格 Y
headerRow 在表格顶部显示标题 N true
totalsRow 在表格底部显示总计 N false
style 额外的样式属性 N {}
columns 列定义 Y
rows 数据行 Y
表格样式属性

列属性描述是否需要默认值
name 列名，也用在标题中 Y
filterButton 切换标题中的过滤器控件 N false
totalsRowLabel 用于描述统计行的标签（第一列） N ‘Total’
totalsRowFunction 统计函数名称 N ‘none’
totalsRowFormula 自定义函数的可选公式 N
统计函数

下表列出了由列定义的 totalsRowFunction 属性的有效值。如果使用 ‘custom’ 以外的任何值，则无需包括关联的公式，因为该公式将被表格插入。

统计函数描述
none 此列没有统计函数
average 计算列的平均值
countNums 统计数字条目数
count 条目数
max 此列中的最大值
min 此列中的最小值
stdDev 该列的标准偏差
var 此列的方差
sum 此列的条目总数
custom 自定义公式。需要关联的 totalsRowFormula 值。
表格样式主题

有效的主题名称遵循以下模式：

“TableStyle[Shade][Number]”
Shades（阴影），Number（数字）可以是以下之一：

Light, 1-21
Medium, 1-28
Dark, 1-11
对于无主题，请使用值 null。

注意：exceljs 尚不支持自定义表格主题。

修改表格

表格支持一组操作函数，这些操作函数允许添加或删除数据以及更改某些属性。由于这些操作中的许多操作可能会对工作表产生副作用，因此更改必须在完成后立即提交。

表中的所有索引值均基于零，因此第一行号和第一列号为 0。

添加或删除标题和统计

const table = worksheet.getTable('MyTable');

// 关闭标题行
table.headerRow = false;

// 打开统计行
table.totalsRow = true;

// 将表更改提交到工作表中
table.commit();

添加和删除行

const table = worksheet.getTable('MyTable');

// 删除第二行
table.removeRows(1, 2);

// 在索引 2 处插入新行
table.addRow(["平安银行", "test", 'Mid'], 2);

// 在表格底部追加新行
table.addRow(["广发银行", "test3", 'End']);

// 将表更改提交到工作表中
table.commit();

添加和删除列

const table = worksheet.getTable('MyTable');

// 删除第二列
table.removeColumns(1, 1);

// 在索引 1 处插入新列（包含数据）
table.addColumn(
  {name: '公司名称'},
  ['招商银行', '邮政储蓄'],
  2
);

// 将表更改提交到工作表中
table.commit();