只涉及前端，将html页面导出成excel文档

用exceljs插件，前端实现html导出excel文档

（1）可自定义导出文件名；

（2）可自定义不同行/列宽高、合并指定行/列；

（3）可设置文字大小、family和排列方向（横/纵）等样式；

（4）可导出图片；

导出例子：

一、下载插件并引入

// 照着名字npm/yarn，导入就行
import Excel from 'exceljs';
import * as FileSaver from 'file-saver';

中文文档地址：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md

二、主要内容

        具体内容与要点都放代码里了，导出的具体表见文章开头（这里我用的是vue框架，其它框架也行）

// 这几个变量定义在外面（也可直接写在data里）
const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
let workbook;
let worksheet;
exportSeaExcel() {
      // 创建工作簿
      workbook = new Excel.Workbook();
      // 设置工作簿的属性
      workbook.creator = 'test';
      workbook.lastModifiedBy = 'test';
      workbook.created = new Date();
      workbook.modified = new Date();
      workbook.lastPrinted = new Date();
      worksheet = workbook.addWorksheet('sheet1');

      // 按行的格式插入表头
      worksheet.getRow(1).values = ['海域使用疑点疑区监测核查情况统计表']; //设置第一行内容
      worksheet.getRow(2).values = ['填报单位xxxx, 填表日期']; //设置第二行内容
      // 有合并情况的行，单独处理
      let sheetRow3 = ['序号', '省（市、区）', '市', '县', '遥感监测情况'];
      sheetRow3[11] = '现场核查情况';
      sheetRow3[26] = '立案查处情况';
      worksheet.getRow(3).values = sheetRow3;
      let sheetRow4 = [
        null,
        null,
        null,
        null,
        '疑点疑区编号',
        '所在海洋功能区划名称',
        '疑似违法违规类型',
        '疑似用海方式',
        '疑似用海动态',
        '遥感监测面积（公顷）',
        '遥感影像比对时间',
        '是否违法违规用海',
        '违法违规类型',
        '违法违规用海行为起止时间',
        '项目名称',
        '用海主体',
        '用海类型',
        '用海方式',
        '用海动态',
        '实测面积（公顷）',
        '是否纳入土地管理',
        '土地证编号',
        '土地所有者',
        '不属于违法违规用海判定依据',
        '核查日期',
        '核查单位',
        '是否立案',
        '立案机关',
        '案件编号',
        '立案日期',
        '是否罚款',
        '应缴罚款金额',
        '实缴罚款金额',
        '是否缴纳完毕',
        '是否要求恢复原状',
        '是否已恢复海域原状',
        '是否结案',
        '未立案原因',
        '备注',
      ];
      worksheet.getRow(4).values = sheetRow4;
      // 合并单元格（合并逻辑很简单，若想深入了解，可查看官方文档）
      worksheet.mergeCells(1, 1, 1, 39);
      worksheet.mergeCells(2, 1, 2, 39);

      worksheet.mergeCells(3, 1, 4, 1);
      worksheet.mergeCells(3, 2, 4, 2);
      worksheet.mergeCells(3, 3, 4, 3);
      worksheet.mergeCells(3, 4, 4, 4);

      worksheet.mergeCells(3, 5, 3, 11);
      worksheet.mergeCells(3, 12, 3, 26);
      worksheet.mergeCells(3, 27, 3, 39);

      // 设置样式 i为行,j为列
      for (let i = 1; i <= this.exportList.length + 4; i++) {
        if (i == 1) {
          worksheet.getRow(i).height = 30;
          worksheet.getRow(i).font = {
            family: 4,
            size: 16,
          };
        }
        worksheet.getRow(2).height = 30;
        worksheet.getRow(3).height = 30;
        worksheet.getRow(4).height = 180;
        // 设置样式
        for (let j = 1; j <= 39; j++) {
          worksheet.getColumn(j).width = 4;
          worksheet.getRow(i).getCell(j).alignment = {
            vertical: 'middle',
            horizontal: 'center',
          };
          worksheet.getRow(i).getCell(j).border = {
            top: { style: 'thin' },
            left: { style: 'thin' },
            right: { style: 'thin' },
            bottom: { style: 'thin' },
          };
          //   worksheet.getRow(i).getCell(j).font = {
          //     size: 14,
          //     family: 2,
          //   };
          if (i >= 4) {
            worksheet.getRow(i).getCell(j).alignment = {
              textRotation: 'vertical',
              vertical: 'middle',
              horizontal: 'center',
            };
          }
        }

        if (i >= 5) {
          worksheet.getRow(i).height = 200;
          // 配对数据
          this.dealSeaData(i);
        }
      }

      workbook.xlsx.writeBuffer().then((data) => {
        const blob = new Blob([data], { type: EXCEL_TYPE });
        FileSaver.saveAs(blob, `附件1.${this.name}期海域使用疑点疑区核查情况统计表.xlsx`); //表单名字
        workbook = '';
        worksheet = '';
      });
    },

// 内容太多，只写其中一部分例子
dealSeaData(i) {
    worksheet.getRow(i).getCell(1).value = i - 4;
      worksheet.getRow(i).getCell(2).value = this.exportList[i - 5].base_prop.province;
      worksheet.getRow(i).getCell(3).value = this.exportList[i - 5].base_prop.city;
      worksheet.getRow(i).getCell(4).value = this.exportList[i - 5].base_prop.county;
      worksheet.getRow(i).getCell(5).value = this.exportList[i - 5].sn;
      worksheet.getRow(i).getCell(6).value = this.exportList[i - 5].base_prop.func_zone_name;
      worksheet.getRow(i).getCell(7).value = this.exportList[i - 5].base_prop.suspect_illegal_type.toString();
      worksheet.getRow(i).getCell(8).value = suspect_sea_type_str;
      worksheet.getRow(i).getCell(9).value = this.exportList[i - 5].base_prop.suspect_use_sea_status;
}

三、导出图片

let image = new Image();
image.src = 'xxx'; //图片的地址
let number = '4'; //图片将放在excel中的位置
image.onload = async () => {
    let base64Img = await this.getBase64Img(image); //将图片转成base64的方法
    // 通过 base64  将图像添加到工作簿
    const imageId = workbook.addImage({
        base64: base64Img,
        extension: "jpg", // 图片扩展名，支持“jpeg”，“png”，“gif”
    });
    worksheet.addImage(imageId, `${number}:${number}`); //位置单元格左上角到单元格右下角
};

getBase64Img(img) { //将图片转成base64格式
    img.setAttribute("crossOrigin", "Anonymous");
    let canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    let ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
    let dataURL = canvas.toDataURL("image/" + ext);
    return dataURL;
},

四、总结

1、如果表格内容比较多或者需操作（合并、手动设置宽高等）的地方比较多，可能要花一些时间，毕竟这是个细活；

2、如果有图片或图片较多，导出会比较慢，因为编码问题图片变得比较大；

有错误欢迎指正，最后更新2023.1.11