整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、背景
云文档转HTML邮件
基于公司内部的飞书办公套件，早在去年6月，我们就建设了将飞书云文档转译成HTML邮件的能力，方便同学们在编写邮件文档和发送邮件时，都能有较好的体验和较高的效率。
当下问题
要被邮件客户端识别，飞书云文档内容需要转译成HtmlEmail格式，该格式为了兼容各种版本的邮箱客户端（特别是Windows Outlook），对于现代HTML5和CSS3的很多特性是不支持的，飞书云文档的多种富文本块格式都需要转译，且部分格式完全不支持，造成编辑和预览发送不一致的情况。
因此，我们对转译工具做了一次大改版和升级，对大部分常用文档块做了高度还原。
实现效果
经过我们的不懈努力，最终实现了较为不错的还原效果：
二、系统架构改版
飞书云文档结构
在展开我们如何做升级之前，先要简单了解下飞书云文档的信息结构（详情可参考官方API），在此仅做简单阐述。
TypeScript简要定义，一个平铺的文档块数组，根据block_id和parent_id确定各块的父子关系，从而形成一个树：
{
/** 文档块唯一标识。*/
block_id: string;
/** 父块 ID。*/
parent_id: string;
/** 子块 ID 列表。*/
children: string[];
/** 文档块类型。*/
block_type: BlockType;
/** 页面块内容描述。*/
page?: { ... };
/** 文本块内容描述。*/
text?: { ... };
/** 标题 1 块内容描述。*/
heading1?: { ... };
/** 有序列表块内容描述。*/
ordered?: { ... };
/** 表格块内容描述。*/
table?: { ... };
// 总计 43 个块定义。
...
}[];我们用思维导图简单举例，整个文档块的树结构大致是这样的，有些块根据缩进递进，会形成父子关系，有些块天然就会成为父块（比如表格、引用等）：
旧版架构
那么我们初版转译工具是怎么做的呢，比较遗憾的是，由于当时需求的还原度诉求较低，我们的代码主要是复用现有部分实现，整体的架构设计可以用一个词概括，基本是面向过程编程：
上方的图：经过了一些抽取和封装，主流程核心代码仍有528行；下方的图：文档块核心转译渲染代码，基本没有写任何还原样式，通过Switch、Case来一个个渲染文档块。
新版架构设计
这次我们痛定思痛，势必要将转译工具的转译效果做到尽可能还原，也有了多位同学一起投入。因此首要思考和急需解决的问题来了：在老旧的架构下，如何才能做好代码扩展、多人协同、高效样式编写以及样式还原？
IoC 与DI
是的，几乎一刹那，凭借过往丰富的多人协同以及项目经验，很快我们就想到了，这个事需要基于IoC的设计原则，并通过DI的方式来实现。
那么什么是IoC和DI呢，根据维基百科的解释：控制反转（Inversion of Control，缩写为IoC），是面向对象编程中的一种设计原则，可以用来减低计算机代码之间的耦合度，其中最常见的方式叫做依赖注入（Dependency Injection，缩写为DI）。
这么说可能有点抽象，我们可以看下新版的架构设计，从中便能窥见其精妙：
可以看到，关键的文档块预处理和渲染器，在该架构中是反向依赖核心的createDocTranspiler了，与我们常识中的理解（文档转译渲染依赖各个块的预处理和渲染器）是相反的，这就是控制反转（IoC），通过这样的依赖倒置，我们能够把多人协同过程中，由各个同学负责开发的预处理器和渲染器的开发调试解耦出去，互不影响、互不依赖，且合码过程中基本没有代码冲突，大大提效了多人协同合作开发。同时由于实现的方式是依赖注入（DI），或者说注册，未来我们想要支持更加深水区的文档块，比如「画板」、「文档小组件」等，可以很方便地注册新的预处理器和渲染器，做增量且解耦的代码开发；如果想要取消对某一个文档块的渲染，直接unregister即可，由此也实现了文档块渲染的快速插拔和极高的可拓展性。
整个转译主干代码如下：
创建转译器，注册预处理器，注册渲染器
转译渲染，后处理，完成渲染。代码行数缩减到只有138行。
函数式编程
接下来我们将目光聚焦到核心函数createDocTranspiler中，这块是IoC架构的核心实现，根据维基百科描述，IoC是面向对象编程中的一种设计原则，那么我们真的是用面向对象的编程方式吗？
显然不是，我们是高标准的前端同学，在JavaScript编程中，面向对象编程显然不是社区推崇的设计原则，以React框架为例，早在React 16.8版本，就推出了函数组件和Hooks编程，以取代较为臃肿的类组件编程，这些都是前端老生常谈的理念了，大家可以去Google深入学习函数式编程理念，在此不再赘述。
这里说一下为什么核心代码createDocTranspiler我要用函数式编程，说一下我的理解：第一是非常优雅，用起来很舒服；第二是得益于JavaScript函数闭包，一些局部（想要private化）的变量或者方法，直接在函数内声明和定义即可，不用担心像类一样会暴露出去（尽管TS有private关键字，但只是约束，不代表你不能用）；第三是简单，无需维护类的实例，若有主动销毁场景，返回的结构中暴露销毁函数即可。
整个核心代码如下：
上方的图：内置的变量和函数，用于存储各种预处理器和渲染器，并实现文档树的递归渲染；下方的图：返回并暴露出去的函数，用于注册各种预处理器、渲染器，以及转译渲染。整个核心代码只有158行，非常精炼。
“CSS-in-JS”
然后再来说一下如此大量的样式还原工作，我们是如何实现的。由于我们要把文档树转译成最终的一个完整的HTML字符串，在模板字符串中写内联样式（style="width: 100px;..."）会非常痛苦，代码可读性会很差，开发调试的效率也会很低。
为了解决这个问题，我们立即想到了React CSSProperties的写法，并调研了一下它的源码实现，其实就是将CSSProperties中的驼峰属性名，转换成内联样式中连字符属性名，并额外处理了Webkit、ms、Moz、O等浏览器属性前缀，同时针对number 类型的部分属性的值，转换时自动加上了px后缀。详细代码如下：
// 样式处理工具函数库。
import { CSSProperties } from 'react';
/* 是否是，值可能是数字类型，且不需要指定 px 为单位的 CSSProperties 属性。*/
const isUnitlessNumber: Record<string, boolean> = {
// ...
fontWeight: true,
lineClamp: true,
lineHeight: true,
// ...
// SVG-related properties.
fillOpacity: true,
floodOpacity: true,
stopOpacity: true,
// ...
};
// 各浏览器 CSS 属性名前缀。
const cssPropertyPrefixes = ['Webkit', 'ms', 'Moz', 'O'];
// 针对 isUnitlessNumber，填充各浏览器 CSS 属性名前缀。
Object.keys(isUnitlessNumber).forEach(property => {
cssPropertyPrefixes.forEach(prefix => {
isUnitlessNumber[`${prefix}${property.charAt(0).toUpperCase()}${property.substring(1)}`] =
isUnitlessNumber[property];
});
});
export { isUnitlessNumber };
/** 针对 CSSProperties 属性值，可能添加单位 px，并返回合法的值。*/
export function addCSSPropertyUnit<T extends keyof CSSProperties>(property: T, value: CSSProperties[T]) {
if (typeof value === 'number' && !isUnitlessNumber[property]) {
// 值是数字类型，且需要添加单位 px，则添加单位 px。
return `${value}px`;
}
return value;
}然后再编写createInlineStyles方法，入参即为Record<string, CSSProperties> 大样式对象：
/* 将 CSSProperties 转为内联 style 字符串，e.g. { width: 100, flex: 1 } => style="width: 100px; flex: 1;"。*/
export function convertCSSPropertiesToInlineStyle(style: CSSProperties) {
const upperCaseReg = /[A-Z]/g;
const inlineStyle = Object.keys(style)
.map(
property =>
`${property.replace(
upperCaseReg,
matchLetter => `-${matchLetter.toLowerCase()}`,
)}: ${addCSSPropertyUnit(property as keyof CSSProperties, style[property])};`,
)
.join(' ');
if (inlineStyle) {
return `style="${inlineStyle}"`;
}
return '';
}
/** 根据输入的样式表（CSSProperties 格式），输出内联样式表（格式为 style="..." 的字符串），e.g. { container: { position: 'relative' }, title: { fontSize: 18 } } => { container: 'style="position: relative;"', title: 'style="font-size: 18px;"' }。*/
export function createInlineStyles<T extends string>(styles: { [P in T]: CSSProperties }) {
const inlineStyles = {} as { [P in T]: string };
Object.keys(styles).forEach(name => {
inlineStyles[name] = convertCSSPropertiesToInlineStyle(styles[name]);
});
return inlineStyles;
}至此架构优化的差不多了，整个项目组进入了高度协同、紧密沟通合作的开发中，整个开发过程其实并不是特别顺利，尤其是在对Windows Outlook邮箱客户端的支持上，各种样式兼容问题Case层出不穷，以至于我们的开发同学不得不去对邮箱HTML和CSS开发进行“考古”。
三、Outlook麻烦的兼容性问题
在改版系统架构后，我们先试着实现了一版有序列表和无序列表的解决方案，结果在测试中，我们得到了出乎所有人意料之外的结果：
原本文档的样子
网页版Outlook中的样子
Windows的Outlook中的样子
在网页版Outlook中，通过开发工具可以看到每一项的justify-content样式消失了，而在Windows Outlook中，基本没什么样式还留着了。
Outlook糟糕的兼容性
我们之前从未编写过HTML邮件，也就完全没考虑过各个邮件客户端对HTML的兼容性问题。在网上找到一些资料后，我们被Outlook对HTML的兼容性之差所震惊。
首先，Windows Outlook并没有一个自己的HTML渲染引擎，而是使用Word的渲染引擎去解析HTML。它不支持HTML5和CSS3，也就是说我们为了保证最大的兼容性，所有的飞书文档样式还原和文本解析都要用极为陈旧的技术去实现。
据官方文档所示，display、position、max-width、max-height等样式全都不兼容。
总的来说：
技术上的限制如此苛刻，就意味着在后面的开发中，我们还会遇到很多特定情况的兼容性问题。在这种情况下，为了最大限度地保证兼容性，我们决定及时止损，重新设计后面各个组件的实现方式，并将无序列表和有序列表的渲染方法推倒重来，再次编写。
四、各类型文档块的还原
首先，我们将转译工具原有的「一级标题」到「九级标题」美化为接近飞书文档的样子。我们需要梳理下将会获得的数据，来看看如何将它们转译为HTML。
标题块（heading 1-9）
标题组件应该是实现难度最低的一个，一个标题组件的数据结构如下：
原版实现方式
在原版的转译工具中，我们编写了通用方法来处理文本内容的下划线、删除线、斜体、粗体、高亮色等进行处理，生成行间元素，然后在外部框上<h1>-<h9>。最终在后面加上它的子节点渲染结果。
新版实现方式
由于默认的heading样式无法满足还原度，且并没有处理对齐方式。我们将使用 <div> 制作heading组件，自行添加样式来还原飞书文档：
case BlockType.HEADING1: {
const blockH1 = block as HeadingBlock;
const align = blockH1.heading1.style.align;
const styles = makeHeadingStyles({ type: block.block_type, align });
text += `<div ${styles.headingStyles}>${transpileTextElements(
blockH1.block_id,
blockH1.heading1.elements,
isPreview,
)}</div>`;
// renderChildBlocks 方法来渲染当前块的所有子节点。
text += renderChildBlocks(blockH1.block_id);
break;
}
其中makeHeadingStyles是我们生成样式的方法，这样可以将各个组件的样式写成配置项，方便后续修改。新的样式中，我们着重对行高、行距、下划线距文字距离、对齐方式进行了调整：
// makeHeadingStyles 方法的部分截取。
export function makeHeadingStyles(params: MakeHeadingStylesParams) {
const { type, align } = params;
const basicStyle: CSSProperties = {
lineHeight: 1.4,
letterSpacing: '-.02em',
fontWeight: 500,
color: '#1f2329',
textAlign: getTextAlignStyle(align || 1),
};
let headingStyles: CSSProperties = {};
switch (type) {
case BlockType.HEADING1:
headingStyles = {
fontSize: 26,
marginTop: 26,
marginBottom: 10,
...basicStyle,
};
break;
// 对Heading2-9的样式进行定义...
// ......
// 将样式对象转成行间样式字符串。
return createInlineStyles<'headingStyles'>({ headingStyles: headingStyles });
}最后发邮件，测试一下生成的HTML的效果：
改版之前
改版之后
无序列表（bullet）与有序列表（ordered）
原版实现方式
列表的数据结构与标题块大致相同，在此不再赘述。在原来的转译工具中，我们使用原生的<ul>和<li>来直接渲染无序列表，<ol><li>来渲染有序列表。我们顺序遍历兄弟节点的列表，为连续的bullet文档块的前后加上<ul></ul>，连续的ordered块前后加上<ol>和</ol>。列表中的每一项，则渲染成<li>。
由于原生<ul>和<ol>的marker样式较丑，我们无法使用伪类元素等手段改善它的样式，为了方便，我们这次改版将自己维护列表的层级关系。
新版实现方式
在飞书文档中，不同层级的列表，marker长得完全不同：
无序列表
有序列表
为了判断我们每个列表项要使用什么样的marker，首先我们需要对飞书给我们的数据进行预处理，为每个列表块标注它的层级和序号。
由于飞书API没有提供有序列表的序号，这个序号用户又可以随便更改，所以我们的思路是：如果有序列表中间被非空文档块以外的文本块截断，序号则重新开始计算。具体方法如下：
/** 判断文本块是否为空白文本类型的快。*/
export function isEmptyTextBlock(block: DocBlockText | undefined) {
if (文档块的类型为text且不为空 || 文档块类型不为text) {返回false；}
else {返回true;}
}
/** 为每个文本块计算它到文本树根节点的深度，为有序列表块找到它的序号。*/
export function processBlocks(blocks: DocBlock[]) {
const blockDepths = {}; // 记录各节点距根节点的深度。
const blockOrder = {}; // 记录各节点在同类兄弟节点中的顺序，被其他类型的块打断的时候将重新计数。
function calcBlockFields(block: DocBlock, depth: number) {
blockDepths[block.block_id] = depth;
// 为有序列表找到它的序号。
if (文本块类型为 ordered) {
1. 找到同级兄弟节点列表 brotherBlocks 与同类型同级兄弟节点列表 similarBrotherBlocks；
2. 找到当前节点在上述两个列表中的索引 brotherBlocksIndex，similarBrotherBlocksIndex；
3. 找到兄弟节点列表中的前一个节点 prevBrotherBlock。以及同类兄弟列表的前一个节点 prevSimilarBrotherBlock；
if (当前节点是兄弟节点列表中的第一个节点 || 当前节点是同类兄弟节点列表中的第一个节点 || 前一个兄弟节点不是同类兄弟节点，且前一个兄弟节点是非空的文本块) {
blockOrder[block.block_id] = 1;
} else {
blockOrder[block.block_id] = 上一个同类兄弟的编号 + 1
}
}
递归处理子节点。如果当前节点的类型为 grid_column、tabel_cell、callout、quoter_container 的时候，深度重置为 1(calcBlockFields(childrenBlock, 1))，其他情况 calcBlockFields(childrenBlock, depth + 1);
}
从根节点开始递归处理。calcBlockFields(rootBlock, 0);
将记录的序号和深度（blockOrder, blockDepths）添加到每个节点中（block.depth, block.order）;
}这样，每个列表项都知道了自己在文档中的层级，有序列表也知道了自己的序号。
由于原来的方法中完全没有处理过文本块的缩进，我们根据飞书缩进的规律，为普通的文本块（表格、栅格等以外的文本块）在渲染子节点时为子节点的容器添加25px的padding-left。
接下来我们使用一个通用的方法为有序列表和无序列表渲染它们的marker。
/** 渲染列表的标签。*/
export const listMarkRender = (type: ListType, block: DocBlock) => {
const { depth = 1, order = 1 } = block;
if (type === ListType.BULLET) {
const styles = makeMarkerStyles(ListType.BULLET);
let marker: string;
marker = 按照深度，每三个一循环，依次为 '•'、'◦'、'▪'；
return `<span ${styles.markContainerStyle}>${marker}</span>`;
} else {
const styles = makeMarkerStyles(ListType.ORDERED);
let markerGenerator: (num: number) => number | string;
markerGenerator = 按照深度，每三个一循环，依次为数字、数字转小写字母、数字转罗马数字；
return `<span ${styles.markContainerStyle}>${markerGenerator(order)}.</span>`;
}
};对于无序列表，标号每三层一循环，顺序为 '•'、'◦'、'▪'。对于有序列表，标号格式也是每三层一循环，顺序为阿拉伯数字、小写字母、罗马数字。
使用列表的标号渲染器渲染标号部分，然后简单的在<div>中将标号<span>和处理过样式的正文<span>组合。
const orderedRenderer: BlockRenderer = (block, isPreview, renderChildBlocks) => {
const orderedBlock = block as OrderedBlock;
const align = orderedBlock.ordered.style.align;
const styles = makeOrderedStyles(align);
let text = '';
text += `
<div ${styles.listWrapper}>
${listMarkRender(ListType.ORDERED, orderedBlock,)}
<span ${styles.listContent}>
${transpileTextElements(orderedBlock.block_id, orderedBlock.ordered.elements, isPreview,)}
</span>
</div>
`;
text += renderChildBlocks(orderedBlock.block_id, false);
return text;
};const bulletRenderer: BlockRenderer = (block, isPreview, renderChildBlocks) => {
const bulletBlock = block as BulletBlock;
const align = bulletBlock.bullet.style.align;
const styles = makeBulletStyles(align);
let text = '';
text += `
<div ${styles.listWrapper}>
${listMarkRender(ListType.BULLET, bulletBlock,)}
<span ${styles.listContent}>${transpileTextElements(
bulletBlock.block_id,
bulletBlock.bullet.elements,
isPreview,
)}</span>
</div>`;
text += renderChildBlocks(bulletBlock.block_id, false);
return text;
};可以看到，我们在满足使用的前提下以最高的兼容性比较完美的还原了飞书文档中的有序列表和无序列表。
待办事项
既然漂亮地还原了有序列表和无序列表，待办事项块就简单得多了。代办事项的具体的数据结构如下：
可以看到，待办事项的数据中包含了该条待办事项是否已完成的数据，从飞书文档的样式可以看出，已完成的条目会统一被划上删除线，并删除下划线样式。最终的渲染器和样式生成方法如下：
待办事项渲染器
const todoRenderer: BlockRenderer = (block, isPreview, renderChildBlocks, _blocks) => {
const todoBlock = block as TodoBlock;
const { align, done } = todoBlock.todo.style;
const originTodoElements = todoBlock.todo.elements;
const markerSrc = done ? '已完成标记图片地址' : '未完成标记图片地址';
const styles = makeTodoStyles(align || 1, done);
const checkedTodoElements = cloneDeep(originTodoElements);
checkedTodoElements.forEach(element => {
为所有文本元素去掉下划线，添加删除线
});
let text = '';
text += `
<div ${styles.todoWrapperStyles}>
<img width="18" height="18" ${styles.todoMarkerStyles} src="${markerSrc}" alt="todo_mark"/>
<span> </span>
<span ${styles.todoContentStyles}>${transpileTextElements(
todoBlock.block_id,
done ? checkedTodoElements : originTodoElements,
isPreview,
)}</span>
</div>`;
text += renderChildBlocks(todoBlock.block_id, false);
return text;
};最终呈现效果
表格（非电子表格）块
文档中另一个最重要的模块就是表格。表格是另一类比较特殊的文本块，他内部并不包含正文。整个表格实际上由三层文档块组合而成，它们的数据结构如下：
依据数据结构和我们的代码模式设计，我们需要使用嵌套的渲染器来实现表格的绘制。
表格渲染器（table块）
由于飞书API中清楚地提供了行数、列数以及列宽，我们可以较为轻松地绘制出大致的表格。这里的重点是要准确地处理合并单元格数据，将它们精准地使用在表格的每个 <td>标签上。表格渲染器的代码如下：
const tableRenderer: BlockRenderer = (block, renderSpecifyBlock) => {
const blockTable = block as TableBlock;
const children = blockTable.table.cells;
const tableStyles = makeTableStyles();
const { column_size, row_size, column_width, merge_info } = blockTable.table.property;
// 计算出整个表格的整体宽度。
const totalWidth = column_width.reduce((acc, cur) => acc + cur, 0);
let text = `
<div ${tableStyles.tableWrapperStyles}>
<table width="${totalWidth}" ${tableStyles.tableStyles}>
`;
// 初始化单元格处理标记数组，记录哪些单元格已被处理过数据。
const processed = Array.from({ length: row_size }, () => Array(column_size).fill(false));
let mergeIndex = 0; // 追踪当前 merge_info 索引。
for (let i = 0; i < row_size; i++) {
text += '<tr>';
for (let j = 0; j < column_size; ) {
从 merge_info[mergeIndex] 获取当前合并信息 col_span 与 row_span，确保 col_span 和 row_span 至少为 1；
// 如果当前单元格未处理过，则进行处理。
if (!processed[i][j]) {
const tDStyles = makeTDStyles(column_width[j]);
const colspanAttr = col_span > 1 ? `colspan="${col_span}"` : '';
const rowspanAttr = row_span > 1 ? `rowspan="${row_span}"` : '';
text += `
<td valign="top" width="${column_width[j]}" ${colspanAttr} ${rowspanAttr} ${
tDStyles.tDStyles
}>
// 与之前的文档块直接渲染所有的子节点不同，表格需要在单元格内精准的渲染对应的 table cell 块，所以此处使用 renderSpecifyBlock 方法。
${renderSpecifyBlock(children[i * column_size + j])}
</td>
`;
// 更新处理标记数组，标记当前单元格及其被合并的单元格为已处理，
for (let m = i; m < Math.min(i + row_span, row_size); m++) {
for (let n = j; n < Math.min(j + col_span, column_size); n++) {
processed[m][n] = true;
}
}
j += col_span; // 跳过被合并的单元格。
mergeIndex += col_span; // 跳过被合并的单元格对应的 merge_info。
} else {
j++;
mergeIndex++;
}
}
text += '</tr>';
}
text += '</table></div>';
return text;
};为了处理合并单元格数据，我们维护了一个已处理标记数组processed，处理完一个单元格后，我们将当前单元格与被它合并的单元格都标记为已处理，来跳过他们的处理与渲染。这里需要特别注意，飞书文档的接口偶尔会返回错误的合并单元格数据：{ row_span: 0, col_span: 0 }，这个现象已经反馈给飞书，我们在34-37行做了兼容处理。
为了最大限度的兼容性，我们坚持能用标签属性设置的样式，就不使用CSS来设置。与列表的渲染不同，在表格中我们没有像列表渲染一样先预处理数据再生成DOM字符串，而是使用了在遍历中边处理数据边生成DOM字符串的方法。
在表格的渲染中，我们没有像之前的代码一样使用renderChildBlocks把所有子文档块都渲染出来添加进HTML字符串中，而是使用了新的renderSpecifyBlock方法，给定block_id来渲染特定的子文档块。
单元格容器渲染器（table cell块）
单元格容器的渲染器则简单的多，他没有任何数据处理，只绘制一个容器用于承载内部的所有子节点，并在内部将单元格内的子节点渲染出来
const tableCellRenderer: BlockRenderer = (block, isPreview, renderChildBlocks, _blocks) => {
const styles = makeTableCellStyles();
return `
<div ${styles.tableCellWrapperStyle}>
${renderChildBlocks(block.block_id, true)}
</div>`;
};最终呈现效果
图片块
图片块理应也是一个很容易实现的文档块。但在实际处理过程中，由于飞书的API只提供图片源文件的宽高，并没有提供云文档中用户缩放过后的图片宽高，我们需要实现一个能满足绝大多数使用场景的图片缩放算法来尽可能还原文档中的图片样式。
图片块的数据结构如下：
限制图片大小
源文件的宽高一般都远大于图片在云文档中的实际宽高。我决定使用以下的方法来限制住图片在文档中的宽高：
上述算法的代码实现如下：
/** 根据 id 找到块。*/
function findNodeById(blocks: DocBlock[], id: string) {
return blocks.find(b => b.block_id === id);
}
/** 检查当前块的父节点中有没有表格或栅格块。*/
function checkIsInTable(blocks: DocBlock[], parentId: string) {
const parentNode = findNodeById(blocks, parentId);
if (parentNode) {
if (WRAPPERS_LIKE_TABLE.includes(parentNode.block_type)) {
return true;
}
return checkIsInTable(blocks, parentNode.parent_id);
}
return false;
}function restrictImageSize(
width: number,
height: number,
maxWidth: number = 820,
maxHeight: number = 780,
): [number, number] {
// 宽和高按照长边缩放（高度大于宽度 50px 视为长图），并为缩放后的宽高向上取整。
if (width >= height - 50) {
if (width > maxWidth) {
return [maxWidth, Math.ceil(height * divide(maxWidth, width))];
}
} else {
if (height > maxHeight) {
return [Math.ceil(width * divide(maxHeight, height)), maxHeight];
}
}
return [width, height];
}图片渲染器
const imageRenderer: BlockRenderer = (block, isPreview, _renderChildBlocks, blocks) => {
let text = '';
const blockImage = block as DocBlockImage;
const align = blockImage.image.align;
const src = `"${
isPreview ? blockImage.image.base64Url : `\$\{${blockImage.block_id}\}` // 实际发送时，用 ${block_id} 作为占位符，给到服务端填充图片附件地址。
}"`;
const [width] = restrictImageSize(blockImage.image.width, blockImage.image.height);
const isInTable = checkIsInTable(blocks, blockImage.parent_id);
const styles = makeImageStyles({ width, align, isInTable });
text += `
<div ${styles.imgWrapperStyle}>
<img width="${isInTable ? '100%' : width}" ${styles.imgStyle} src=${src}>
</div>
`;
return text;
};在预览的时候，我们将图片地址设为图片的base64，直接展示。最后传给后端的HTML字符串中，我们将图片地址设为一个占位符，供后端解析并转化为邮件附件地址。
使用表格来布局的几个文档块
由于Windows Outlook对CSS的支持程度很差，我们在对一些复杂文档块进行排版布局的时候不能使用flex、grid等。且display和position属性在大多情况下也不会像预期那样正常生效。我们为了最大的兼容性只能使用表格来解决一切排版问题。代码块、高亮块、栅格等几个文档块就都遵循了这个思路，使用表格来解决排版。我们以最复杂的代码块作为代表来进行介绍。
代码块
飞书云文档中免不了会出现代码，所以较好的进行代码块的还原也是个重要的工作。代码块还原的一个难点就是数据的处理，首先介绍下代码块的数据结构：
理想的话，我们希望element中每一项为一行代码，我们挨个进行渲染即可。但实际上，element的内容和普通文本类似，只要文本的样式不变（比如设为斜体、加粗等），这些文本就都会被塞到同一个element项中。
举例说明，对于下列文档中的代码块，实际飞书API返回的代码只有两项element：
其中，最后一个大括号被单独拆成一项令人费解，不过好在代码块中，只要一项element的后面出现了另一项，那就一定意味着换行。这减少了我们的处理难度。
我们的大体思路，是将代码拆分成一个二维数组。第一维中的每一维度为一行代码，每行代码中的每一维度为拆分后零碎的代码块。我们先将所有的element中的内容根据换行符\n拆分成一个个细小的子块，同时将与HTML有关的字符替换成HTML编码，避免这些字符混入HTML字符串中被当做标签解析：
elements.forEach(element => {
const textStyles = element.text_run?.text_element_style;
const elementSplit = (element.text_run?.content || '')
.replaceAll('&', '&')
.replaceAll('<', '<')
.replaceAll('>', '>')
.replaceAll('"', '"')
.replaceAll("'", ''')
.match(/(.*?\n|.+)/g);
elementSplit &&
elementSplit.forEach(line => {
codeList.push({
text_run: {
content: line,
text_element_style: textStyles as TextElementStyle,
},
});
});
});然后将这些子块按照换行符进行分组，变成我们需要的二维数组：
/** 将拆分好的代码块列表按行进行分组。*/
const groupingCodeList = (list: TextElement[] = []) => {
const result: TextElement[][] = [];
let currentGroup: TextElement[] = [];
list.forEach(item => {
// 将当前字符串添加到当前分组。
currentGroup.push(item);
// 如果字符串包含 '\n'，则结束当前分组，并准备开始新的分组。
if (item.text_run?.content.includes('\n')) {
result.push(currentGroup);
currentGroup = [];
}
});
// 最后将 currentGroup 中剩余的项目加入 result。
if (currentGroup.length > 0) {
result.push(currentGroup);
}
return result;
};至此，我们知道了代码行数n和每行代码中的小代码块有哪些。我们要做的就是将它们放进一个n行2列的表格中
最终，代码块渲染器的代码如下。为了保证最大的兼容性，我们使用空的表格行作为内边距，尽量避免CSS解析问题：
const codeRenderer: BlockRenderer = (block, isPreview, renderChildBlocks, _blocks) => {
const styles = makeCodeStyles();
const blockCode = block as DocBlockCode;
const codeLanguage = blockCode.code.style.language || 0;
// 将代码块中的正文将带 \n 的分割开。
const codeList: TextElement[] = [];
const elements = blockCode.code.elements;
// 分割的时候把 HTML 有关的字符换成 HTML 编码，避免这些正文直接被当成 HTML 渲染。
上文中提到的对elements的处理...
const groupedCodeLines = groupingCodeList(codeList);
// 将按行分类好的代码块填入 td。
const codeTr = groupedCodeLines
.map((line, index) => {
return `
<tr bgcolor="f5f6f7">
<td width="46" align="right" valign="top">
<pre ${styles.codeIndexStyles}>${index + 1}</pre>
</td>
<td>
<pre ${styles.codePreStyles}>${transpileTextElements(blockCode.block_id, line, isPreview,)}</pre>
</td>
</tr>
`;
})
.join('');
const emptyTr = `
<tr bgcolor="f5f6f7">
<td width="46" align="right"><span> </span></td>
<td><pre ${styles.codePreStyles}> </pre></td>
</tr>
`;
let text = `
<div ${styles.codeWrapperStyles}>
<table width="100%" ${styles.codeTableStyles}>
${emptyTr}
${codeTr}
${emptyTr}
</table>
</div>
`;
text += renderChildBlocks(blockCode.block_id, false);
return text;
};我们本次不会实现代码的高亮，只会显示同一种颜色的代码。对表格中的每个单元格，我们使用pre标签包裹来保留代码中的制表符、空格，并将fontFamily设置为'Courier New', Courier, monospace，使用等宽字体来呈现代码。
行间公式
飞书云文档除文本外支持多种行间元素的插入，比如@文档、内联文件、内联公式等，在此我们介绍下最为复杂的内联公式是怎么处理的。
行间公式的数据位于各个文档块的内联块中，以文本块为例，具体数据如下：
我们要做的，就是将公式转换为图片，然后在邮件中将公式作为图片附件来处理。
我们将使用MathJax来将公式表达式转换为svg，用于用户预览。在发送时，我们将MathJax生成的svg通过cavans转化为png图片，上传到CDN，并将CDN地址给到后端，进行邮件附件转换。
公式的预处理方法如下：
// 公式发送时，后端渲染完成的图片，其展示的高度的系数。
const equationCoefficient = 8.421;
const enrichEquationElements: BlockPreprocessor = async (blocks, isPreview) => {
if (!window.MathJax) {
await loadScript('https://cdn.dewu.com/node-common/bc7b5cfc-1c7c-e649-710a-929f109e505e.js');
}
const equationSVGList: SvgObj[] = []; // 待上传的公式列表。
const equationElementList: TextElement[] = []; // 带有公式的元素列表。
blocks.forEach(block => {
const elements = getBlockElements(block);
let equationIndex = 0;
elements.forEach(textEl => {
// 文本块内容中包含公式时，转译为 SVG HTML。
if (textEl.equation) {
equationElementList.push(textEl);
const equationId = `${block.block_id}_equation_${++equationIndex}`;
const svgEl = window.MathJax.tex2svg(textEl.equation.content).children[0];
// 由于生成的公式 svg 的高度使用 ex 单位，这里乘以一个参数来转成近似的 px 单位。
const svgHeight = svgEl的ex高度 * equationCoefficient;
const svgWidth = svgEl的ex宽度 * equationCoefficient;
textEl.equation.svgHTML = svgEl.outerHTML;
textEl.equation.imageHeight = svgHeight;
textEl.equation.imageWidth = svgWidth;
textEl.equation.id = equationId;
equationSVGList.push({
id: equationId,
svg: svgEl.outerHTML,
height: svgHeight,
width: svgWidth,
});
}
});
});
// 非本地预览的时候进行公式转图片并上传 CDN（本地环境由于跨域无法上传 CDN）。
if (!isPreview) {
OSS 上传配置...
// 公式 svg 转图片文件然后上传 OSS。
const res = await allSvgsToImgThenUpload(equationSVGList);
equationElementList.forEach(element => {
从res中找到当前公式元素对应的图片，放入element.equation.imageUrl中
});
}
};我们先找出所有文档块中的内联公式，将其转换为svg，存储到公式块中。如果当前是发送模式，不是预览模式，我们就做进一步处理，使用allSvgsToImgThenUpload 将svg再转化为图片的CDN地址，此处的allSvgsToImgThenUpload方法让我们并行处理所有的公式图片，具体如下：
function allSvgsToImgThenUpload(svgObjList: SvgObj[]) {
// 将每个 SVG 字符串映射到转换函数的调用上。
const conversionPromises = svgObjList.map(svgObj => svgToImgThenUpload(svgObj));
// 使用 Promise.all 等待所有图片完成转换和上传。
return Promise.all(conversionPromises);
}核心的svgToImgThenUpload方法如下，它负责将svg转化为图片，并上传CDN：
/** svg 转图片，并上传到 OSS。*/
function svgToImgThenUpload(svgObj: SvgObj): Promise<{ id: string; url: string }> {
return new Promise((resolve, reject) => {
const { width, height, id } = svgObj;
const svgString = svgObj.svg;
if (!width || !height) {
reject(`公式svg大小获取失败: ${id}`);
return;
}
// 生成 svg 的 base64 编码。
const encodedString = encodeURIComponent(svgString).replace(/'/g, '%27').replace(/"/g, '%22');
const dataUrl = 'data:image/svg+xml,' + encodedString;
// 使用 canvas 渲染 svg 并转为图片。
const image = new Image();
image.onload = () => {
const canvas = document.createElement('canvas');
// 为了保证图片清晰，渲染使用三倍宽高，实际大小使用两倍宽高。
canvas.width = width * 3;
canvas.height = height * 3;
canvas.style.width = `${width * 2}px`;
canvas.style.height = `${height * 2}px`;
const ctx = canvas.getContext('2d');
ctx && ctx.drawImage(image, 0, 0, width * 3, height * 3);
// 将 canvas 内容导出为 Blob。
canvas.toBlob(async blob => {
创建 File 对象并上传 CDN，返回 CDN 链接;
}, 'image/png');
};
image.onerror = reject;
image.src = dataUrl;
});
}为了保证图片清晰，渲染使用三倍宽高，实际大小使用两倍宽高。
至此，我们让公式块带上了图片CDN地址。在发送时交给后端，转为邮件附件，即可正常显示了。
五、向前一步
好在最终我们克服了重重困难，终于来到了转译工具升级的Showcase环节。之前有提到我们有fallbackRenderer，主要用于针对未识别或者未支持的文档块，渲染其默认提示，最初我们渲染的效果只是一个简单的提示，比如：【画板暂不支持解析】这样的文案提示。
但是我们很快发现：1. 这些提示并不明显，可以做一个类似Antd Alert的提示；2. 在发送时要过滤掉这些提示，因为是无效信息；3. 在预览时需要让用户能够看到实际的发送效果，需要有开关能隐藏这些提示；4. 发送时存在这些不支持的块时，需要拦截提示用户是否去调整文档内容，以达到信息更全效果更好的发送效果。往往是这些细枝末节的体验与引导，能够真正抓住用户的心，让用户觉得这个转译工具是真的贴心、好用。
因此，我们快速增加了这些具体的引导与提示优化，具体效果如下：
六、大功告成
经过这一番波折，我们最终成功地将飞书云文档转译为兼容大多数客户端的HTML邮件。这不仅仅是一项技术上的挑战，更是一次心态和耐心的考验。
在这个过程中，我们深刻体会到在前端开发中，面对各种浏览器和客户端的不一致性时，需要的不仅仅是技术能力，还需要灵活应变和坚持不懈的精神。希望本文能为同样遇到这些问题的开发者提供一些思路和帮助。
未来，我们还将继续优化我们的解决方案，并探索更多高效的方法，期待与大家分享更多经验。如果有任何问题或建议，欢迎在评论区留言讨论！
感谢阅读！
引用：
*文/ Nicolas、Asher
本文属得物技术原创，未经得物技术许可严禁转载，否则依法追究法律责任！
言：
本人也是股票投资爱好着，这段时间行情不是很好，就想着做些其他事情转移下注意力，突然想起之前写过的小项目代码，运行后会对你想要的时间日期进行数据的分析生成，然后保存到本地，数据库之前我用的是tushare的，不过太久没用现在不知道数据的接口有没有改变，要想运行成功还是得要去他们那里搞个账号，具体我就不细节展开了。下面我放出代码，供各位大佬们参考，有能力的应该可以改成精美的图形html展示形式。
import os
import docx
import time
import warnings
import pandas as pd
import tushare as ts
from docx.shared import Cm, Inches
from docx.enum.text import WD_ALIGN_PARAGRAPH
from docx.shared import RGBColor,Pt
warnings.filterwarnings('ignore')
#pd.set_option()就是pycharm输出控制显示的设置
pd.set_option('expand_frame_repr', False)#True就是可以换行显示。设置成False的时候不允许换行
pd.set_option('display.max_columns', None)# 显示所有列
#pd.set_option('display.max_rows', None)# 显示所有行
pd.set_option('colheader_justify', 'centre')# 显示居中
#os.chdir()用于改变当前工作目录到指定的路径
#此路径必须改为放数据的路径且中间的不能缺失任何一天数据，例如get_analysis_stockdata('20200101', '20200106')，
#那么你放数据文件夹内不能缺少任何一个这段时期内的交易数据文件，否则报错
os.chdir('D:/stock_data/') #保存的绝对路径，需要自己修改跟创建,就是切换默认的工作目录到你设置的路径
pro = ts.pro_api('要到tushare官网注册个账户然后将token复制到这里')
#df_basic = pro.stock_basic() 获取基础信息数据，包括股票代码、名称、上市日期、退市日期等
#df_daily = pro.daily() 获取所有股票日行情信息，或通过通用行情接口获取数据，包含了前后复权数据，停牌期间不提供数据
#df_daily_basic = pro.daily_basic(）获取全部股票每日重要的基本面指标，可用于选股分析、报表展示等。
def get_all_stockdata(st_date, ed_date):
trade_d = pro.trade_cal(exchange='SSE', is_open='1',start_date=st_date,end_date=ed_date,fields='cal_date')
for date in trade_d['cal_date'].values:
df_basic = pro.stock_basic(exchange='', list_status='L') #再获取所有股票的基本信息
df_daily = pro.daily(trade_date=date) # 先获得所有股票的行情数据，成交额单位是千元，成交量是手
df_daily_basic = pro.daily_basic(ts_code='', trade_date=date,fields='ts_code, turnover_rate, turnover_rate_f,'
' volume_ratio, pe, pe_ttm, pb, ps, ps_ttm,'
' dv_ratio, dv_ttm, total_share, float_share,'
' free_share, total_mv, circ_mv ') #获取每日指标，单位是万股，万元
#基本数据跟行情数据合并，再跟每日指标数据合并生成一个csv数据文件
df_first = pd.merge(left=df_basic, right=df_daily, on='ts_code', how='outer') #on='ts_code'以ts_code为索引，合并数据，how='outer'，取并集
df_all = pd.merge(left=df_first, right=df_daily_basic, on='ts_code', how='outer')
#数据清洗，删除symbol列数据，跟ts_code数据重复
df_all = df_all.drop('symbol', axis=1)
for w in ['name', 'area', 'industry', 'market']: #在'name', 'area', 'industry', 'market'列内循环填充NaN值
df_all[w].fillna('问题股', inplace=True)
df_all['ts_code'] = df_all['ts_code'].astype(str) #强制转换成str字符串格式
df_all['list_date'] = pd.to_datetime(df_all['list_date'])
df_all['trade_date'] = pd.to_datetime(df_all['trade_date'])
df_all.to_csv(str(date) + '_ts.csv', index=False, encoding='gbk') #保存数据，不保存索引，如果index=True，则保存索引会多出一列
print(df_all)
print('%s is downloaded.' % (str(date)))
return df_all
#分析数据并生成docx文档，存储至本地D盘D:/stock_analysis/
def get_analysis_stockdata(st_date, ed_date):
trade_d = pro.trade_cal(exchange='SSE', is_open='1',start_date=st_date,end_date=ed_date,fields='cal_date') #获取st_date,ed_date时间段内的交易日期
for date_now in trade_d['cal_date'].values: #将以上获取时间段的交易日期赋值给date_now
df = pd.read_csv('{}_ts.csv'.format(str(date_now)), encoding='gbk') #读取时间段内每日的股票数据
df.fillna(0, inplace=True) #fillna填充缺失数据,传入inplace=True直接修改原对象
#astype强制将涨幅，PE，总市值，流通市值转换成float格式,ts_code转化成str后，NAN也变成nan str格式
df[['change', 'pe', 'total_mv', 'circ_mv']] = df[['change', 'pe', 'total_mv', 'circ_mv']].astype(float)
df['list_date'] = pd.to_datetime(df['list_date'])
df['ts_code'] = df['ts_code'].astype(str)
# 添加交易所列
df.loc[df['ts_code'].str.startswith('3'), 'exchange'] = 'CY'
df.loc[df['ts_code'].str.startswith('6'), 'exchange'] = 'SH'
df.loc[df['ts_code'].str.startswith('0'), 'exchange'] = 'SZ'
df_up = df[df['change'] > 0.00] #找出上涨的股票
df_even = df[df['change'] == 0.00] #找出走平的股票
df_down = df[df['change'] < 0.00] #找出下跌的股票
# 找出涨停的股票
limit_up = df[df['change']/df['pre_close'] >= 0.097]
limit_down = df[df['change']/df['pre_close'] <= -0.0970]
# 涨停股数中的未封板股，上市日期小于15天
limit_up_new = limit_up[pd.to_datetime(date_now) - limit_up['list_date'] <= pd.Timedelta(days=15)]
# 涨停股数中次新股，上市日期小于1年
limit_up_fresh = limit_up[pd.to_datetime(date_now) - limit_up['list_date'] <= pd.Timedelta(days=365)]
# 涨停股数中的未封板股，上市日期小于15天
limit_down_new = limit_down[pd.to_datetime(date_now) - limit_down['list_date'] <= pd.Timedelta(days=15)]
# 涨停股数中次新股，上市日期小于1年
limit_down_fresh = limit_down[pd.to_datetime(date_now) - limit_down['list_date'] <= pd.Timedelta(days=365)]
#df_up.shape[0]获取上涨的行数
print('A股上涨个数： %d, A股下跌个数： %d, A股走平个数: %d。' % (df_up.shape[0], df_down.shape[0], df_even.shape[0]))
print('A股总成交额：%d, 总成交量：%d' % (df['amount'].sum(), df['vol'].sum()))
print('A股平均市盈率：%.2f， 平均流通市值 %.2f 亿, 平均总市值 %.2f 亿' % (df['pe'].mean(), df['circ_mv'].mean(), df['total_mv'].mean()))
print('涨停数量：%d 个, 涨停中上市日期小于15天的：%d, 涨停中上市日期小于1年的：%d' % (limit_up.shape[0], limit_up_new.shape[0], limit_up_fresh.shape[0]))
print('跌停数量：%d 个, 跌停中上市日期小于15天的：%d, 跌停中上市日期小于1年的：%d' % (limit_down.shape[0], limit_down_new.shape[0], limit_down_fresh.shape[0]))
file = docx.Document()
#设置总标题,居中
headb = file.add_heading('%s中国股市今日收盘分析报告' % (date_now), level=0).alignment = WD_ALIGN_PARAGRAPH.CENTER
head1 = file.add_heading('股市基本概况：',level=1) #设置一级标题
#添加段落内容
text1 = file.add_paragraph() #首先创建一个空的段落，然后再往里面加文字，这样方便设置文字格式字体等设置,另外一种写法，缺点不能单独设置字体属性
# text1 = file.add_paragraph('A股上涨个数： %d, A股下跌个数： %d, A股走平个数: %d。' % (df_up.shape[0], df_down.shape[0], df_even.shape[0]))
text1.add_run('A股上涨个数：').bold = True #添加文字并设置粗体
text1.add_run('{} '.format(str(df_up.shape[0]))).font.color.rgb = RGBColor(255, 0, 0) #添加变量
text1.add_run('A股下跌个数：').bold = True
text1.add_run('{} '.format(str(df_down.shape[0]))).font.color.rgb = RGBColor(0, 255, 0)
text1.add_run('A股走平个数：').bold = True
text1.add_run('{} '.format(str(df_even.shape[0]))).font.color.rgb = RGBColor(0, 0, 255)
text1.line_spacing = Pt(25) #设置段落行距
text1.style = 'List Bullet' # 设置项目符号列表
text2 = file.add_paragraph()
text2.add_run('A股总成交额：').bold = True
text2.add_run('{}'.format(str(round(df['amount'].sum(),2)))).font.color.rgb = RGBColor(128, 0, 128)
text2.add_run('千元 ')
text2.add_run('总成交量：').bold = True
text2.add_run('{}'.format(str(round(df['vol'].sum(),2)))).font.color.rgb = RGBColor(128, 0, 128)
text2.add_run('手 ')
text2.line_spacing = Pt(25)
text2.style = 'List Bullet'
text3 = file.add_paragraph()
text3.add_run('A股平均市盈率：').bold = True
text3.add_run('{} '.format(str(round(df['pe'].mean())))).font.color.rgb = RGBColor(128, 0, 128)
text3.add_run('平均流通市值：').bold = True
text3.add_run('{}'.format(str(round(df['circ_mv'].mean(),2)))).font.color.rgb = RGBColor(128, 0, 128)
text3.add_run('万元')
text3.add_run('\n')
text3.add_run('平均总市值：').bold = True
text3.add_run('{}'.format(str(round(df['total_mv'].mean(),2)))).font.color.rgb = RGBColor(128, 0, 128)
text3.add_run('万元 ')
text3.line_spacing = Pt(25)
text3.style = 'List Bullet'
text3.add_run('\n')
text4 = file.add_paragraph()
text4.add_run('涨停数量：').bold = True
text4.add_run('{}'.format(str(limit_up.shape[0]))).font.color.rgb = RGBColor(255, 0, 0)
text4.add_run('个 ')
text4.add_run('涨停中上市日期小于15天的：').bold = True
text4.add_run('{}'.format(str(limit_up_new.shape[0]))).font.color.rgb = RGBColor(255, 0, 0)
text4.add_run('个 ')
text4.add_run('\n')
text4.add_run('涨停中上市日期小于1年的：').bold = True
text4.add_run('{}'.format(str(limit_up_fresh.shape[0]))).font.color.rgb = RGBColor(255, 0, 0)
text4.add_run('个 ')
text4.line_spacing = Pt(25)
text4.style = 'List Bullet'
text5 = file.add_paragraph()
text5.add_run('跌停数量：').bold = True
text5.add_run('{}'.format(str(limit_down.shape[0]))).font.color.rgb = RGBColor(0, 255, 0)
text5.add_run('个 ')
text5.add_run('跌停中上市日期小于15天的：').bold = True
text5.add_run('{}'.format(str(limit_down_new.shape[0]))).font.color.rgb = RGBColor(0, 255, 0)
text5.add_run('个 ')
text5.add_run('\n')
text5.add_run('跌停中上市日期小于1年的：').bold = True
text5.add_run('{}'.format(str(limit_down_fresh.shape[0]))).font.color.rgb = RGBColor(0, 255, 0)
text5.add_run('个 ')
text5.line_spacing = Pt(25)
text5.style = 'List Bullet'
file.add_page_break() #添加分页符
def get_output(df, columns='_industry', name='_limit_up'):
# df.copy（deep= False）和df.copy()都是浅拷贝，是复制了旧对象的内容，然后重新生成一个新对象，改变旧对象不会影响新对象。
df = df.copy()
output = pd.DataFrame()
#df.groupby(columns)根据列值分组数据，并根据股票代码统计数据
output = pd.DataFrame(df.groupby(columns)['ts_code'].count())
output['平均市盈率'] = round(df.groupby(columns)['pe'].mean(),2)
output['平均流通市值(万)'] = round(df.groupby(columns)['circ_mv'].mean(),2)
output['平均总市值(万)'] = round(df.groupby(columns)['total_mv'].mean(),2)
output['平均成交量(手)'] = round(df.groupby(columns)['vol'].mean(),2)
output['平均成交额(千)'] = round(df.groupby(columns)['amount'].mean(),2)
#依据ts_code进行降序，排序后的数据集替换原来的数据
output.sort_values('ts_code', ascending=False, inplace=True)
#改列值名字，将ts_code改成name+‘_count’的形式
output.rename(columns={'ts_code': name + '合计'}, inplace=True)
return output
for i in ['industry', 'exchange', 'area']:
# 对涨停的股票分析
output_limit_up = get_output(limit_up, columns=i, name='涨停').reset_index()
# 对跌停的股票分析
output_limit_down = get_output(limit_down, columns=i, name='跌停').reset_index()
# 对全量的股票分析
output_total = get_output(df, columns=i, name='全部').reset_index()
#添加表格开头类别说明
tabletext = file.add_paragraph()
tabletext.add_run('类别：').bold = True
tabletext.add_run('{} '.format(str(i))).font.color.rgb = RGBColor(222, 125, 44)
print(output_limit_up)
print(output_limit_down)
print(output_total)
for j in [output_limit_up, output_limit_down, output_total]: #, output_total
tb = file.add_table(rows=len(j.index)+1, cols=len(j.columns),style='Medium Grid 3 Accent 1')
tb.autofit = True #关闭表格行宽自适应
for x in range(len(j.columns)):
tb.cell(0, x).text = j.columns[x] #添加表列头
#tb.cell(0, x).width = Inches(1.2) #设置行宽
tb.cell(0, x).paragraphs[0].alignment = WD_ALIGN_PARAGRAPH.CENTER #文字居中
for row in range(len(j.index)):
for col in range(len(j.columns)):
tb.cell(row+1, col).text = str(j.iloc[row, col]) #设置行宽
tb.cell(row+1, col).paragraphs[0].alignment = WD_ALIGN_PARAGRAPH.CENTER #文字居中
file.add_paragraph('\n') #表格换行
file.add_page_break() #每制成一个类别表格分一次页面
#之所以生成文件慢是因为output_total这个统计需要长时间计算，如果需要速度快你可以试着把output_total去掉
#生成一个docx文件我的电脑需要3到4分钟左右
file.save('D:\stock_analysis\{}_分析报告.docx'.format(str(date_now)))
print('{}_分析报告分析完成'.format(str(date_now)))
if __name__=="__main__":
get_all_stockdata('20200611', '20200611')
get_analysis_stockdata('20200611', '20200611')
家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
今天给大家带来的主题是富文本编辑器中的Tiptap Editor。话不多说，直接进入正题！
Tiptap 编辑器是一个无头、与框架无关的富文本编辑器，可以通过扩展程序进行自定义和扩展。 无头性质意味着 Tiptap 没有固定的用户界面，提供完全的设计自由，同时 Tiptap 基于高度可靠的 ProseMirror 库。
ProseMirror 是一个基于 contentEditable 的功能良好的富语义内容编辑器，支持协作编辑和自定义文档模式。ProseMirror 库由许多独立的模块组成，该存储库仅充当中央问题跟踪器，并包含一个脚本以帮助轻松检查所有核心模块以进行开发。
Tiptap Editor 得到协作开源后端 Hocuspocus 的补充， Editor 和 Hocuspocus 构成了 Tiptap Suite 的基础。
Tiptap 编辑器的工作原理可以概括为：
当然，Tiptap 编辑器还提供了专业版的扩展（Editor Pro Extensions），可增强 Tiptap 编辑器的功能，其是可以集成到基本编辑器中以提供更复杂的编辑选项的附加功能。
Editor Pro Extensions 主要功能包括：协作编辑（允许多个用户同时编辑文档）、拖放文件管理（以便更轻松地处理文档和媒体）以及唯一的节点 ID 分配。但是，缺点就是申请 Tiptap 帐户。
目前 Tiptap Editor 在 Github 通过 MIT 协议开源，有超过 22.8k 的 star、1.9k 的 fork、项目依赖量 4.5k、代码贡献者 300+、妥妥的前端优质开源项目。
Tiptap Editor 可以借助 Yarn 或者 NPM 来安装：
npm install --save tiptap
yarn add tiptap
安装了 tiptap 后就可以直接开始使用，但是还可以预先安装特定的扩展，而 Tiptap（或者说 Prosemirror）的强大之处就在于扩展，即想要的任何功能都可以编写为扩展并插入 Tiptap 的运行实例中，从而拥有一个具有自定义功能的编辑器。
Tiptap 团队在 NPM 包 Tiptap-extensions 中有一组很好的扩展，并且积极维护，这使得其可以始终和 Tiptap 一起工作，包括： Blockquote、CodeBlock、HardBreak、标题、OrderedList、BulletList、ListItem、TodoItem、TodoList、粗体、代码、斜体、链接、删除线、下划线、历史记录。
可以通过下面方式安装扩展：
npm install --save tiptap-extensions
yarn add tiptap-extensions接下来将仅使用基本扩展，例如：粗体、斜体、下划线、标题、历史扩展。 在项目中，可以创建一个新的特定文件夹来保存为编辑器编写的所有 JS 文件和 VueJS 组件。接下来使用 Babel 和 ESLint 创建了一个 VueJS 2 项目，并在 src 文件夹中创建了一个名为 editor 的目录，如下所示。
然后安装 tiptap 和 tiptap-extensions。在这里，使用 NPM 一次性安装两个包。
npm install --save tiptap tiptap-extensions安装后，可以继续查看上面屏幕截图中显示的 tiptap.js 文件并开始使用 Tiptap。
import {Editor} from "tiptap";
import {Bold, Italic, Underline, Heading, History} from "tiptap-extensions";
export const ourEditor = new Editor({
// 导入相应的插件
extensions: [
new Bold(),
new Italic(),
new Underline(),
new Heading({levels: [1, 2, 3] }),
new History()
]
});在此文件中，使用想要使用的扩展来初始化 Tiptap Editor 的实例，接下来是在 Vue 中使用 Tiptap Editor：
<template>
<div class="tiptap-editor">
<EditorMenuBar
class="editor-menubar"
:editor="editor"
v-slot="{commands, isActive}"
>
<div>
<button
:class="{'is-active': isActive.bold() }"
@click="commands.bold"
>
B
</button>
<button
:class="{'is-active': isActive.italic() }"
@click="commands.italic"
>
I
</button>
<button
:class="{'is-active': isActive.underline() }"
@click="commands.underline"
>
U
</button>
<button
v-for="level in [1, 2, 3]"
:key="level"
:class="{'is-active': isActive.heading({ level}) }"
@click="commands.heading({level: level})"
>
H{{level}}
</button>
</div>
</EditorMenuBar>
<EditorContent class="editor-content" :editor="editor" />
</div>
</template>
<script>
import {EditorContent, EditorMenuBar} from "tiptap";
import {ourEditor} from "./tiptap";
export default {
name: "Tiptap",
components: {
EditorContent,
EditorMenuBar
},
data() {
return {
editor: ourEditor
};
},
beforeDestroy() {
ourEditor.destroy();
}
};
</script>
<style>
.tiptap-editor {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.editor-menubar {
margin: 0 0 20px 0;
}
.editor-content {
max-width: 35em;
min-width: 35rem;
display: block;
text-align: unset;
border-radius: 20px;
padding: 1rem;
border: 1px solid rgba(0, 0, 0, 0.363);
}
.ProseMirror {
min-height: 30vh;
padding: 2px;
outline: none;
}
button {
padding: 20px;
margin: 0 5px;
background: white;
outline: none;
border: 1px solid grey;
border-radius: 10px;
font-size: 1.3rem;
transition: 0.2s all;
}
button:hover {
cursor: pointer;
background: rgba(0, 0, 0, 0.1);
transition: none;
}
button.is-active {
background: rgba(0, 128, 0, 0.2);
}
</style>以上所写的只是 Tiptap 提供的很小部分功能，其在 GitHub 存储库上提供了对该技术的更深入的说明。同时，不仅是维护者，社区也提供了很好的扩展，非常多的扩展，例如：
如果使用 VueJS 组件框架（例如 ElementUI 或 VuetifyJS），甚至还有像 element-tiptap 和 Tiptap-vuetify 这样的包，提供了大量的抽象，并允许开发者非常快速地将 Tiptap 与项目集成。
本文主要和大家介绍 Tiptap 编辑器，其是一个无头、与框架无关的富文本编辑器，可以通过扩展程序进行自定义和扩展。 无头性质意味着 Tiptap 没有固定的用户界面，提供完全的设计自由。因为篇幅问题，关于 Tiptap 主题只是做了一个简短的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。
https://github.com/ueberdosis/tiptap
https://github.com/ProseMirror/prosemirror
https://dev.to/sereneinserenade/next-gen-text-editing-in-browser-with-tiptap-2943
https://www.youtube.com/watch?v=VcnROkRhJ34
*请认真填写需求信息，我们会在24小时内与您取得联系。
