feat: office-view 支持内嵌字体；数学公式；初步支持 textbox；修复 highlight 和加粗渲染不正确问题 (b…

…aidu#6459)

* 初步支持 textbox

* 开始实现内嵌字体

* 支持内嵌字体

* 避免 style 导致可能的 xss

* 支持公式渲染

* 修复 highlight 和加粗渲染不正确问题

* 删掉不用的文件

* 修复编译报错

.dockerignore

@@ -5,3 +5,4 @@ npm/
 .git/
 .github/
 .vscode/
+.rollup.cache

docs/zh-CN/components/office-viewer.md

@@ -18,14 +18,10 @@ order: 23
 - 列表
 - 注音
 - 链接
+- 文本框
+- 数学公式（依赖 MathML，需要比较新的浏览器，或者试试 [polyfill](https://github.com/w3c/mathml-polyfills)）
 
-不支持的功能：
-
-- 分页符
-- 形状
-- 艺术字
-- 域
-- 对象
+不支持的功能：分页符、形状、艺术字、域、对象、目录
 
 ## 基本用法
 
@@ -34,7 +30,8 @@ order: 23
   "type": "office-viewer",
   "src": "/examples/static/simple.docx",
   "wordOptions": {
-    "padding": "8px"
+    "padding": "8px",
+    "ignoreWidth": false
   }
 }
 ```
@@ -50,25 +47,37 @@ order: 23
   "type": "office-viewer",
   "wordOptions": {
     "padding": "8px",
-    "classPrefix": "docx"
+    "ignoreWidth": false
   }
 }
 ```
 
-| 属性名            | 类型      | 默认值        | 说明                                       |
-| ----------------- | --------- | ------------- | ------------------------------------------ |
-| classPrefix       | `string`  | 'docx-viewer' | 渲染的 class 类前缀                        |
-| bulletUseFont     | `boolean` | true          | 列表使用字体渲染，请参考下面的乱码说明     |
-| fontMapping       | `object`  |               | 字体映射，是个键值对，用于替换文档中的字体 |
-| forceLineHeight   | `string`  |               | 设置段落行高，忽略文档中的设置             |
-| padding           | `string`  |               | 设置页面间距，忽略文档中的设置             |
-| enableReplaceText | `boolean` | true          | 是否开启变量替换功能                       |
+| 属性名            | 类型      | 默认值        | 说明                                                       |
+| ----------------- | --------- | ------------- | ---------------------------------------------------------- |
+| classPrefix       | `string`  | 'docx-viewer' | 渲染的 class 类前缀                                        |
+| ignoreWidth       | `boolean` | false         | 忽略文档里的宽度设置，用于更好嵌入到页面里，但会减低还原度 |
+| padding           | `string`  |               | 设置页面间距，忽略文档中的设置                             |
+| bulletUseFont     | `boolean` | true          | 列表使用字体渲染，请参考下面的乱码说明                     |
+| fontMapping       | `object`  |               | 字体映射，是个键值对，用于替换文档中的字体                 |
+| forceLineHeight   | `string`  |               | 设置段落行高，忽略文档中的设置                             |
+| enableReplaceText | `boolean` | true          | 是否开启变量替换功能                                       |
+
+### 关于渲染效果差异
+
+目前的实现难以保证和本地 Word 渲染完全一致，会遇到以下问题：
+
+1. 字体大小不一致
+1. 单元格宽度不一致，表格完全依赖浏览器渲染
+1. 分页显示，目前的渲染不会分页，而是内容有多长就有多高
+1. 分栏显示，这个是因为没有分页导致的，不限制高度没法分栏
+
+如果追求完整效果打印，目前只能使用下载文件的方式用本地 Word 进行打印。
 
 ## 列表符号出现乱码问题
 
 默认情况下列表左侧的符号使用字体渲染，这样能做到最接近 Word 渲染效果，但如果用户的系统中没有这些字体就会显示乱码，为了解决这个问题需要手动在 amis 渲染的页面里导入对应的字体，比如
 
-```
+```html
 <style>
   @font-face {
     font-family: Wingdings;

packages/office-viewer/README.md

@@ -6,8 +6,13 @@ docx 渲染器，原理是将 docx 里的 xml 格式转成 html
 
 相对于 Canvas 渲染，这个实现方案比较简单，最终页面也可以很方便复制，但无法保证和原始 docx 文件展现一致，因为有部分功能难以在 HTML 中实现，比如图文环绕效果。
 
-## 还不支持的功能
+## 已知不支持的功能
 
+- 分页符
+- 形状
+- 艺术字
+- 域
+- 对象
 - wmf，需要使用 https://github.com/SheetJS/js-wmf
 
 ## 参考资料

packages/office-viewer/__tests__/OpenXML.test.ts

@@ -1,6 +1,6 @@
 import {createWord} from './EmptyWord';
 import {mergeRun} from '../src/util/mergeRun';
-import {parseXML, buildXML} from '../src/util/xml';
+import {parseXML} from '../src/util/xml';
 
 test('proofErr', async () => {
   const xmlDoc = parseXML(

packages/office-viewer/__tests__/docx/dedocx/README.md

@@ -0,0 +1,3 @@
+来自 https://github.com/science-periodicals/dedocx
+
+似乎很关注公式及引用相关的