wangEditor 5 富文本内容(HTML)导入 Excel 富文本格式
最近接触到一个有点意思的开发需求, 需要在前端富文本编写后, 能在后端导出原样的 Excel 文本, 当然这个 Excel 包含富文本和图片. 前端减少造轮子的过程用了 wangEditor5, 后端里导出 Excel 用了 exceljs
流程
- 设置一下 wangEditor5 的菜单, 只设置需要的格式, 保存 HTML 格式文件到后端. 当然, 如果不需要别的地方显示, 也可以保存 json 格式.
- 后端调用保存的 HTML 格式数据, 对它进行转化, 转化成 exceljs 支持的富本本
- 转化后的数据写入 excel 表格
一、wangEditor5 的菜单
这里前端 wangEditor5 就不在这里写了, 不是重点, 直接给出我的 toolbarKeys
js
复制代码
toolbarKeys: [ // 一些常用的菜单 key "blockquote", "bold", // 加粗 "italic", // 斜体 "through", // 删除线 "underline", // 下划线 "bulletedList", // 无序列表 "numberedList", // 有序列表 "color", // 文字颜色 "fontSize", // 字体大小 "uploadImage", // 上传图片 "deleteImage", //删除图片 "divider", // 分割线 "code", // 行内代码 "codeBlock", // 代码块 "undo", // 撤销 "redo", // 重做 ],
二、后端调用保存的 HTML 格式数据, 对它进行转化, 转化成 exceljs 支持的富本本
这个是重点了, exceljs 是支持输出富文本到 Excel 文档的, 但是格式要按它的来, 所以要做格式的转换才行. 详情可以看看官方文档 github.com/exceljs/exc…
Enum: Excel.ValueType.RichText
样式丰富的文本。
例如：
js
复制代码
worksheet.getCell('A1').value = { richText: [ { text: 'This is '}, {font: {italic: true}, text: 'italic'}, ] };
但是官方文档也没有说明要怎么转换, 后面我实验所得, 可以去看格式, 字休那里, 按它的格式来设置参数. 当然还有对齐方式等等, 我没有去搞.
下面是我写的一个转换的类, 各位可以参考一下, 去修改成自己相应的格式, 这里面并不全, 思路在这里了, 另外, 我这里转换的格式, 是把图片单独抽到一个单元格去计算宽高, 把文字分隔开来. 各位也可以按实际需求去调整.
思路是先解释出 DOM, 然后转成 JSON, 在把 JSON 转成 exceljs 的富文本格式.
js
复制代码
import { JSDOM } from 'jsdom'; import { DOMWindow } from 'jsdom'; import * as ExcelJS from 'exceljs'; export default class HtmlToExcelJS { // 定义一个 Node 类型 private Node: DOMWindow['Node']; /** * HTML 转 ExcelJS 富文本格式数组 * @param html HTML 字符串 * @returns ExcelJS 富文本格式数组 */ public toExcelJS(html): ExcelJS.RichText[] { const dom = new JSDOM(html); this.Node = dom.window.Node; const json = this.htmlToJson(dom.window.document.body); const richTexts = this.jsonToRichText(json); // richTexts 数组里, 只要 img, 分割出数组, 前面一组, 图片一组, 后面一样 const richTextsArr = []; let richTextsTemp = []; for (let i = 0; i < richTexts.length; i++) { if (richTexts[i].img) { richTextsArr.push(richTextsTemp); richTextsTemp = []; richTextsArr.push([richTexts[i]]); } else { richTextsTemp.pu