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

biliPS

已于 2023-01-11 11:39:05 修改

阅读量3.8k

点赞数 1

分类专栏：导出excel文档文章标签：前端 javascript 前端框架 html css

于 2022-07-26 17:56:42 首次发布

本文链接：https://blog.csdn.net/biliPS/article/details/125999214

版权

使用exceljs插件，前端可以自定义导出HTML为Excel文件，包括设置文件名、行列宽高、样式和图片。详细步骤涵盖下载插件、配置内容以及图片导出。对于复杂表格和含图片的导出，可能需要更多时间处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用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

最低0.47元/天解锁文章