feat: 提升 word 文档渲染还原度，支持 tooltip、shadow、覆盖顺序等 (#6496)

* chore: office viewer 增加 snapshot 测试用例

* 简单示例都改成 xml 格式

* 部分文字垂直显示

* 支持链接 tooltip

* 支持 shadown

* 支持旋转属性

* 修复 behideDoc 导致遮挡问题

* 修复部分 textbox 背景色错误问题

* 修复 textbox 覆盖顺序不正确问题

.vscode/settings.json

@@ -27,5 +27,8 @@
     "public/**": true,
     "examples/docs.json": true,
     "examples/components/EChartsEditor/option-parts/**/*": true
+  },
+  "[xml]": {
+    "editor.defaultFormatter": "redhat.vscode-xml"
   }
 }

packages/office-viewer/__tests__/docx/dedocx/fake-test-docx.ds3.docx

@@ -1 +0,0 @@
-text inline

packages/office-viewer/__tests__/simple/__snapshots__/bold.test.ts.snap

@@ -0,0 +1,552 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`bold 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: "Times New Roman", var(--docx-theme-font-minorEastAsia);
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-classname-0 {
+        margin-left: 48.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-classname-1 {
+        margin-bottom: 10.67px;
+line-height: 1.08;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-classname-1 &gt; .docx-viewer-0-r {
+        font-family: var(--docx-theme-font-minorHAnsi);
+font-size: 14.67px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        margin-bottom: 10.67px;
+text-align: justify;
+vertical-align: bottom;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Normal &gt; .docx-viewer-0-r {
+        font-family: Georgia, SimSun;
+color: #000000;
+font-size: 16.00px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading1 {
+        margin-top: 32.00px;
+text-align: left;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Heading1 &gt; .docx-viewer-0-r {
+        font-family: var(--docx-theme-font-majorEastAsia);
+font-weight: bold;
+font-size: 18.67px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading2 {
+        margin-top: 13.33px;
+text-align: left;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Heading2 &gt; .docx-viewer-0-r {
+        font-family: var(--docx-theme-font-majorEastAsia);
+font-weight: bold;
+font-size: 17.33px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading3 {
+        margin-top: 13.33px;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Heading3 &gt; .docx-viewer-0-r {
+        font-family: var(--docx-theme-font-majorHAnsi), var(--docx-theme-font-majorEastAsia);
+font-weight: bold;
+color: black;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-TOC3 {
+        margin-left: 56.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-BalloonText {
+        line-height: 1.00;
+text-align: left;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-BalloonText &gt; .docx-viewer-0-r {
+        font-family: Tahoma, var(--docx-theme-font-minorEastAsia);
+color: black;
+font-size: 10.67px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Footer {
+        text-align: left;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Footer &gt; .docx-viewer-0-r {
+        font-size: 12.00px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Header {
+        border-bottom: 1.00px solid black;
+text-align: center;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Header &gt; .docx-viewer-0-r {
+        font-size: 12.00px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-TOC1 {
+        margin-bottom: 6.67px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-TOC2 {
+        margin-bottom: 6.67px;
+margin-left: 16.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-NormalWeb {
+        margin-top: 6.67px;
+margin-bottom: 6.67px;
+line-height: 1.00;
+text-align: left;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-NormalWeb &gt; .docx-viewer-0-r {
+        font-family: SimSun;
+color: black;
+font-size: 16.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableGrid {
+  border-collapse: collapse;
+  border-top: 0.67px solid black;
+border-left: 0.67px solid black;
+border-bottom: 0.67px solid black;
+border-right: 0.67px solid black;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableGrid &gt; tbody &gt; tr &gt; td {
+  
+ }
+ 
+      .docx-viewer-0 .docx-viewer-0-TableGrid &gt; tbody &gt; tr &gt; td {
+        border-top: 0.67px solid black;
+      }
+      .docx-viewer-0 .docx-viewer-0-TableGrid &gt; tbody &gt; tr &gt; td {
+        border-left: 0.67px solid black;
+      }
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Strong &gt; .docx-viewer-0-r {
+        font-weight: bold;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Emphasis &gt; .docx-viewer-0-r {
+        font-style: italic;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Hyperlink &gt; .docx-viewer-0-r {
+        color: #0000FF;
+text-decoration: underline;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading3Char &gt; .docx-viewer-0-r {
+        font-family: var(--docx-theme-font-majorHAnsi), var(--docx-theme-font-majorEastAsia);
+font-weight: bold;
+font-size: 16.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading2Char &gt; .docx-viewer-0-r {
+        font-family: Georgia, var(--docx-theme-font-majorEastAsia);
+font-weight: bold;
+color: #000000;
+font-size: 17.33px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Char &gt; .docx-viewer-0-r {
+        
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-BalloonTextChar &gt; .docx-viewer-0-r {
+        font-family: Tahoma;
+font-size: 10.67px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading1Char &gt; .docx-viewer-0-r {
+        font-family: Georgia, var(--docx-theme-font-majorEastAsia);
+font-weight: bold;
+color: #000000;
+font-size: 18.67px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-a {
+        text-indent: 22.67px;
+margin-left: 32.00px;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-a &gt; .docx-viewer-0-r {
+        font-size: 14.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-HeaderChar &gt; .docx-viewer-0-r {
+        font-family: Times, SimSun, "Times New Roman";
+color: #000000;
+font-size: 12.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-FooterChar &gt; .docx-viewer-0-r {
+        font-family: Times, SimSun, "Times New Roman";
+color: #000000;
+font-size: 12.00px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-ListParagraph1 {
+        text-indent: 28.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-ListParagraph {
+        margin-left: 48.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-TOC10 {
+        margin-top: 16.00px;
+margin-bottom: 0.00px;
+line-height: 1.08;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-TOC10 &gt; .docx-viewer-0-r {
+        font-weight: normal;
+font-size: 21.33px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-TOCHeading1 {
+        margin-top: 16.00px;
+margin-bottom: 0.00px;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-TOCHeading1 &gt; .docx-viewer-0-r {
+        font-weight: normal;
+font-size: 21.33px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-classname-2 {
+        margin-bottom: 16.00px;
+line-height: 1.50;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-classname-2 &gt; .docx-viewer-0-r {
+        font-family: SimSun;
+color: black;
+font-size: 16.00px;
+
+      }
+      
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 120.00px 96.00px 120.00px;"
+    >
+      <p
+        class="docx-viewer-0-p docx-viewer-0-Normal docx-viewer-0-Heading1"
+      >
+        <a
+          id="_Toc535930148"
+          name="_Toc535930148"
+        />
+        <a
+          id="_Toc121782745"
+          name="_Toc121782745"
+        />
+        <span
+          class="docx-viewer-0-r"
+        >
+          立项
+        </span>
+        <span
+          class="docx-viewer-0-r"
+        >
+          依据
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p docx-viewer-0-Normal docx-viewer-0-Heading2"
+      >
+        <a
+          id="_Toc535930149"
+          name="_Toc535930149"
+        />
+        <a
+          id="_Toc121782746"
+          name="_Toc121782746"
+        />
+        <span
+          class="docx-viewer-0-r"
+        >
+          项目背景
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/br.test.ts.snap

@@ -0,0 +1,123 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`br 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        text-align: justify;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Normal &gt; .docx-viewer-0-r {
+        
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+        style="margin-top: 6.67px; margin-bottom: 6.67px; text-align: left;"
+      >
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: SimSun; font-size: 16.00px;"
+        >
+          换行
+        </span>
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: SimSun; font-size: 16.00px;"
+        >
+          <br />
+          <span>
+            工具 
+          </span>
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/drop-cap.test.ts.snap

@@ -0,0 +1,119 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`drop-cap 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        text-align: justify;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+        style="float: left; margin-top: 0.93px; min-height: 44.7pt; line-height: 44.7pt; vertical-align: baseline;"
+      >
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: var(--docx-theme-font-minorEastAsia); vertical-align: 3.33px; font-size: 52.67px;"
+        >
+          首
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+        >
+          字下沉
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/em.test.ts.snap

@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`em 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        text-align: justify;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: SimSun; font-size: 16.00px; text-emphasis: filled; text-emphasis-position: under right;"
+        >
+          一边
+        </span>
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: SimSun; font-size: 16.00px;"
+        >
+          欣
+        </span>
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: SimSun; font-size: 16.00px; text-emphasis: filled sesame;"
+        >
+          一边
+        </span>
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: SimSun; font-size: 16.00px;"
+        >
+          欣
+        </span>
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: SimSun; font-size: 16.00px; text-emphasis: open;"
+        >
+          一边
+        </span>
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: SimSun; font-size: 16.00px;"
+        >
+          欣
+        </span>
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: SimSun; font-size: 16.00px; text-emphasis: filled; text-emphasis-position: under right;"
+        >
+          一边
+        </span>
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: SimSun; font-size: 16.00px;"
+        >
+          欣
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/embed-font.test.ts.snap

@@ -0,0 +1,114 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`embed-font 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        text-align: justify;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+      @font-face {
+        font-family: 'Algerian';
+        src: url('blob:http://localhost/mock');
+      }
+      
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: Algerian;"
+        >
+          Embed font
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/hideMark.test.ts.snap

@@ -0,0 +1,238 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`hideMark 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+ .docx-viewer-0 .docx-classname-0 {
+  border-collapse: collapse;
+  width: auto;
+
+ }
+
+ .docx-viewer-0 .docx-classname-0 &gt; tbody &gt; tr &gt; td {
+  
+ }
+ 
+  </style>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        text-align: justify;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableGrid {
+  border-collapse: collapse;
+  border-top: 0.67px solid black;
+border-left: 0.67px solid black;
+border-bottom: 0.67px solid black;
+border-right: 0.67px solid black;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableGrid &gt; tbody &gt; tr &gt; td {
+  
+ }
+ 
+      .docx-viewer-0 .docx-viewer-0-TableGrid &gt; tbody &gt; tr &gt; td {
+        border-top: 0.67px solid black;
+      }
+      .docx-viewer-0 .docx-viewer-0-TableGrid &gt; tbody &gt; tr &gt; td {
+        border-left: 0.67px solid black;
+      }
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <table
+        class="enable-firstRow enable-firstColumn enable-hBand docx-viewer-0-TableNormal docx-viewer-0-TableGrid docx-classname-0"
+        style="width: auto;"
+      >
+        <tbody>
+          <tr>
+            <td
+              class="nwCell firstRow firstCol band2Horz band2Vert"
+              style="width: 207.73px;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                 
+              </p>
+            </td>
+            <td
+              class="firstRow band2Horz band1Vert"
+              style="width: 207.79px;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                 
+              </p>
+            </td>
+            <td
+              class="neCell firstRow lastCol band2Horz band2Vert"
+              style="width: 207.79px;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                 
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="firstCol band1Horz band2Vert"
+              style="width: 207.73px;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              />
+            </td>
+            <td
+              class="band1Horz band1Vert"
+              style="width: 207.79px;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              />
+            </td>
+            <td
+              class="lastCol band1Horz band2Vert"
+              style="width: 207.79px;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="swCell lastRow firstCol band2Horz band2Vert"
+              style="width: 207.73px;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                 
+              </p>
+            </td>
+            <td
+              class="lastRow band2Horz band1Vert"
+              style="width: 207.79px;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                 
+              </p>
+            </td>
+            <td
+              class="seCell lastRow lastCol band2Horz band2Vert"
+              style="width: 207.79px;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                 
+              </p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <p
+        class="docx-viewer-0-p"
+      >
+         
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/highlight.test.ts.snap

@@ -0,0 +1,189 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`highlight 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        text-align: justify;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: Georgia, SimSun; font-weight: bold; color: rgb(0, 0, 0); font-size: 18.67px; background-color: yellow;"
+        >
+          聚
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: Georgia, SimSun; font-weight: bold; color: rgb(0, 0, 0); font-size: 18.67px; background-color: rgb(0, 0, 139);"
+        >
+          聚
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: Georgia, SimSun; font-weight: bold; color: rgb(0, 0, 0); font-size: 18.67px; background-color: rgb(0, 139, 139);"
+        >
+          聚
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: Georgia, SimSun; font-weight: bold; color: rgb(0, 0, 0); font-size: 18.67px; background-color: rgb(169, 169, 169);"
+        >
+          聚
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: Georgia, SimSun; font-weight: bold; color: rgb(0, 0, 0); font-size: 18.67px; background-color: rgb(0, 100, 0);"
+        >
+          聚
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: Georgia, SimSun; font-weight: bold; color: rgb(0, 0, 0); font-size: 18.67px; background-color: rgb(128, 0, 128);"
+        >
+          聚
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: Georgia, SimSun; font-weight: bold; color: rgb(0, 0, 0); font-size: 18.67px; background-color: rgb(139, 0, 0);"
+        >
+          聚
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: Georgia, SimSun; font-weight: bold; color: rgb(0, 0, 0); font-size: 18.67px; background-color: rgb(128, 128, 0);"
+        >
+          聚
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: Georgia, SimSun; font-weight: bold; color: rgb(0, 0, 0); font-size: 18.67px; background-color: rgb(211, 211, 211);"
+        >
+          聚
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/image.test.ts.snap

@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`image 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+        >
+          <div
+            style="display: inline-block; width: 189.33px; height: 58.67px;"
+          >
+            <img
+              src="blob:http://localhost/mock"
+              style="position: relative; left: 0.00px; top: 0.00px; width: 189.33px; height: 58.67px; transform: rotate(49.310066666666664deg);"
+            />
+          </div>
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/info.test.ts.snap

@@ -0,0 +1,642 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`info 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+ .docx-viewer-0 .docx-classname-0 {
+  border-collapse: collapse;
+  width: auto;
+margin-left: 7.20px;
+border-top: 2.00px solid black;
+border-left: 2.00px solid black;
+border-bottom: 2.00px solid black;
+border-right: 2.00px solid black;
+table-layout: fixed;
+
+ }
+
+ .docx-viewer-0 .docx-classname-0 &gt; tbody &gt; tr &gt; td {
+  
+ }
+ 
+      .docx-viewer-0 .docx-classname-0 &gt; tbody &gt; tr &gt; td {
+        border-top: 1.00px solid black;
+      }
+      .docx-viewer-0 .docx-classname-0 &gt; tbody &gt; tr &gt; td {
+        border-left: 1.00px solid black;
+      }
+  </style>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        text-align: justify;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Normal &gt; .docx-viewer-0-r {
+        font-family: "Times New Roman", SimSun;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+        style="text-align: center;"
+      >
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: SimHei; font-size: 18.67px; text-decoration: underline;"
+        >
+          员工人事资料卡
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+        >
+          日期
+        </span>
+        <span
+          class="docx-viewer-0-r"
+        >
+                                                                               
+        </span>
+        <span
+          class="docx-viewer-0-r"
+        >
+          编号
+        </span>
+      </p>
+      <table
+        class="enable-hBand enable-vBand docx-classname-0"
+        style="width: auto; margin-left: 7.20px; border-top: 2.00px solid black; border-left: 2.00px solid black; border-bottom: 2.00px solid black; border-right: 2.00px solid black; table-layout: fixed;"
+      >
+        <tbody>
+          <tr>
+            <td
+              class="nwCell firstRow firstCol band2Horz band2Vert"
+              rowspan="2"
+              style="width: 60.00px; border-top: 2.00px solid black; border-left: 2.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  姓
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                    
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  名
+                </span>
+              </p>
+            </td>
+            <td
+              class="firstRow band2Horz band2Vert"
+              colspan="2"
+              rowspan="2"
+              style="width: 111.40px; border-top: 2.00px solid black; border-left: 1.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  {
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  {name}}
+                </span>
+              </p>
+            </td>
+            <td
+              class="neCell firstRow lastCol band2Horz band2Vert"
+              style="width: 68.60px; border-top: 2.00px solid black; border-left: 1.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+                style="text-align: center;"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  性
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                   
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  别
+                </span>
+              </p>
+            </td>
+            <td
+              class="firstRow band2Horz band1Vert"
+              style="width: 227.99px; border-top: 2.00px solid black; border-left: 1.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+                style="text-align: center;"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  出
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                     
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  生
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                     
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  日
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                     
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  期
+                </span>
+              </p>
+            </td>
+            <td
+              class="firstRow band2Horz band2Vert"
+              rowspan="7"
+              style="width: 120.00px; border-top: 2.00px solid black; border-left: 1.00px solid black; border-bottom: 1.00px solid black; border-right: 2.00px solid black; vertical-align: middle;"
+            >
+              <p
+                class="docx-viewer-0-p"
+                style="text-align: center;"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  相
+                </span>
+              </p>
+              <p
+                class="docx-viewer-0-p"
+                style="text-align: center;"
+              >
+                 
+              </p>
+              <p
+                class="docx-viewer-0-p"
+                style="text-align: center;"
+              >
+                 
+              </p>
+              <p
+                class="docx-viewer-0-p"
+                style="text-align: center;"
+              >
+                 
+              </p>
+              <p
+                class="docx-viewer-0-p"
+                style="text-align: center;"
+              >
+                 
+              </p>
+              <p
+                class="docx-viewer-0-p"
+                style="text-align: center;"
+              >
+                 
+              </p>
+              <p
+                class="docx-viewer-0-p"
+                style="text-align: center;"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  片
+                </span>
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="firstCol band1Horz band2Vert"
+              style="width: 68.60px; border-top: 1.00px solid black; border-left: 1.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                 
+              </p>
+            </td>
+            <td
+              class="lastCol band1Horz band1Vert"
+              style="width: 227.99px; border-top: 1.00px solid black; border-left: 1.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black; vertical-align: bottom;"
+            >
+              <p
+                class="docx-viewer-0-p"
+                style="text-align: right;"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                >
+                               
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  年
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                      
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  月
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                       
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  日
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                    
+                </span>
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="firstCol band2Horz band2Vert"
+              style="width: 60.00px; border-top: 1.00px solid black; border-left: 2.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  籍
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                    
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  贯
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                                      
+                </span>
+              </p>
+            </td>
+            <td
+              class="lastCol band2Horz band1Vert"
+              colspan="4"
+              style="width: 407.99px; border-top: 1.00px solid black; border-left: 1.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+                style="text-align: left;"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                >
+                                                   
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  省
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                                    
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  市
+                </span>
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="firstCol band1Horz band2Vert"
+              style="width: 60.00px; border-top: 1.00px solid black; border-left: 2.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  现住址
+                </span>
+              </p>
+            </td>
+            <td
+              class="lastCol band1Horz band1Vert"
+              colspan="4"
+              style="width: 407.99px; border-top: 1.00px solid black; border-left: 1.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+                style="text-align: left;"
+              >
+                 
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="firstCol band2Horz band2Vert"
+              colspan="2"
+              style="width: 96.00px; border-top: 1.00px solid black; border-left: 2.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  身份证号码
+                </span>
+              </p>
+            </td>
+            <td
+              class="lastCol band2Horz band1Vert"
+              colspan="3"
+              style="width: 371.99px; border-top: 1.00px solid black; border-left: 1.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                 
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="firstCol band1Horz band2Vert"
+              colspan="2"
+              style="width: 96.00px; border-top: 1.00px solid black; border-left: 2.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  手机号
+                </span>
+              </p>
+            </td>
+            <td
+              class="lastCol band1Horz band1Vert"
+              colspan="3"
+              style="width: 371.99px; border-top: 1.00px solid black; border-left: 1.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  {
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  {phone}}
+                </span>
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="firstCol band2Horz band2Vert"
+              colspan="2"
+              style="width: 96.00px; border-top: 1.00px solid black; border-left: 2.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  邮箱
+                </span>
+              </p>
+            </td>
+            <td
+              class="lastCol band2Horz band1Vert"
+              colspan="3"
+              style="width: 371.99px; border-top: 1.00px solid black; border-left: 1.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  {
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  {email}}
+                </span>
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="swCell lastRow firstCol band1Horz band2Vert"
+              colspan="2"
+              style="width: 96.00px; border-top: 1.00px solid black; border-left: 2.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                >
+                  日期
+                </span>
+              </p>
+            </td>
+            <td
+              class="lastRow band1Horz band1Vert"
+              colspan="3"
+              style="width: 371.99px; border-top: 1.00px solid black; border-left: 1.00px solid black; border-bottom: 1.00px solid black; border-right: 1.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r variable"
+                  data-origin-text="{{DATETOSTR(TODAY(), 'YYYY-MM-DD')}}"
+                >
+                  {{DATETOSTR(TODAY(), 'YYYY-MM-DD')}}
+                </span>
+              </p>
+            </td>
+            <td
+              class="seCell lastRow lastCol band1Horz band2Vert"
+              style="width: 120.00px; border-top: 1.00px solid black; border-left: 1.00px solid black; border-bottom: 1.00px solid black; border-right: 2.00px solid black;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                 
+              </p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <p
+        class="docx-viewer-0-p"
+      >
+         
+      </p>
+      <p
+        class="docx-viewer-0-p"
+      >
+         
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/link.test.ts.snap

@@ -0,0 +1,140 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`link 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        text-align: justify;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Hyperlink &gt; .docx-viewer-0-r {
+        color: #0563C1;
+text-decoration: underline;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-UnresolvedMention &gt; .docx-viewer-0-r {
+        color: #605E5C;
+background-color: #E1DFDD;
+
+      }
+      
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+      >
+        <a
+          href="https://github.com/baidu/amis"
+          target="_blank"
+        >
+          <span
+            class="docx-viewer-0-r docx-viewer-0-DefaultParagraphFont docx-viewer-0-Hyperlink"
+          >
+            a
+          </span>
+          <span
+            class="docx-viewer-0-r docx-viewer-0-DefaultParagraphFont docx-viewer-0-Hyperlink"
+          >
+            mis
+          </span>
+        </a>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/list.test.ts.snap

@@ -0,0 +1,325 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`list 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        text-align: justify;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Normal &gt; .docx-viewer-0-r {
+        
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading1 {
+        margin-top: 22.67px;
+margin-bottom: 22.00px;
+line-height: 2.41;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Heading1 &gt; .docx-viewer-0-r {
+        font-weight: bold;
+font-size: 29.33px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading2 {
+        margin-top: 17.33px;
+margin-bottom: 17.33px;
+line-height: 1.73;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Heading2 &gt; .docx-viewer-0-r {
+        font-family: var(--docx-theme-font-majorHAnsi), var(--docx-theme-font-majorEastAsia);
+font-weight: bold;
+font-size: 21.33px;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-ListParagraph {
+        text-indent: 28.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading1Char &gt; .docx-viewer-0-r {
+        font-weight: bold;
+font-size: 29.33px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading2Char &gt; .docx-viewer-0-r {
+        font-family: var(--docx-theme-font-majorHAnsi), var(--docx-theme-font-majorEastAsia);
+font-weight: bold;
+font-size: 21.33px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-PlainTable1 &gt; .docx-viewer-0-r {
+        
+      }
+      
+    
+ .docx-viewer-0 .docx-viewer-0-PlainTable1 {
+  border-collapse: collapse;
+  border-top: 0.67px solid #BFBFBF;
+border-left: 0.67px solid #BFBFBF;
+border-bottom: 0.67px solid #BFBFBF;
+border-right: 0.67px solid #BFBFBF;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-PlainTable1 &gt; tbody &gt; tr &gt; td {
+  
+ }
+ 
+      .docx-viewer-0 .docx-viewer-0-PlainTable1 &gt; tbody &gt; tr &gt; td {
+        border-top: 0.67px solid #BFBFBF;
+      }
+      .docx-viewer-0 .docx-viewer-0-PlainTable1 &gt; tbody &gt; tr &gt; td {
+        border-left: 0.67px solid #BFBFBF;
+      }
+    
+    .docx-viewer-0 .docx-viewer-0-PlainTable1.enable-hBand &gt; tbody &gt; tr &gt; td.band1Horz {
+       background-color: #F2F2F2;
+
+    }
+    
+    .docx-viewer-0 .docx-viewer-0-PlainTable1.enable-vBand &gt; tbody &gt; tr &gt; td.band1Vert {
+       background-color: #F2F2F2;
+
+    }
+    
+    .docx-viewer-0 .docx-viewer-0-PlainTable1.enable-firstColumn &gt; tbody &gt; tr &gt; td.firstCol &gt; .docx-viewer-0-p &gt; .docx-viewer-0-r {
+       font-weight: bold;
+
+    }
+    
+    .docx-viewer-0 .docx-viewer-0-PlainTable1.enable-firstRow &gt; tbody &gt; tr &gt; td.firstRow &gt; .docx-viewer-0-p &gt; .docx-viewer-0-r {
+       font-weight: bold;
+
+    }
+    
+    .docx-viewer-0 .docx-viewer-0-PlainTable1.enable-lastColumn &gt; tbody &gt; tr &gt; td.lastCol &gt; .docx-viewer-0-p &gt; .docx-viewer-0-r {
+       font-weight: bold;
+
+    }
+    
+    .docx-viewer-0 .docx-viewer-0-PlainTable1.enable-lastRow &gt; tbody &gt; tr &gt; td.lastRow {
+       border-top: 0.67px solid #BFBFBF;
+
+    }
+    
+    .docx-viewer-0 .docx-viewer-0-PlainTable1.enable-lastRow &gt; tbody &gt; tr &gt; td.lastRow &gt; .docx-viewer-0-p &gt; .docx-viewer-0-r {
+       font-weight: bold;
+
+    }
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p docx-viewer-0-Normal docx-viewer-0-Heading1"
+        style="text-indent: -28.33px; margin-left: 28.33px;"
+      >
+        <span>
+           
+        </span>
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: "Microsoft YaHei";"
+        >
+          总体结论
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p docx-viewer-0-Normal docx-viewer-0-Heading2"
+        style="text-indent: -37.80px; margin-left: 66.13px;"
+      >
+        <span>
+           
+        </span>
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: "Microsoft YaHei";"
+        >
+          整体情况
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p docx-viewer-0-Normal docx-viewer-0-Heading2"
+        style="text-indent: -37.80px; margin-left: 66.13px;"
+      >
+        <span>
+           
+        </span>
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: "Microsoft YaHei";"
+        >
+          差异对比
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p docx-viewer-0-Normal docx-viewer-0-Heading1"
+        style="text-indent: -28.33px; margin-left: 28.33px;"
+      >
+        <span>
+           
+        </span>
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: "Microsoft YaHei";"
+        >
+          Doc
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p docx-viewer-0-Normal docx-viewer-0-Heading2"
+        style="text-indent: -37.80px; margin-left: 66.13px;"
+      >
+        <span>
+           
+        </span>
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: "Microsoft YaHei";"
+        >
+          总体结论
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p docx-viewer-0-Normal docx-viewer-0-Heading2"
+        style="text-indent: -37.80px; margin-left: 66.13px;"
+      >
+        <span>
+           
+        </span>
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: "Microsoft YaHei";"
+        >
+          Doc文档
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p"
+      >
+         
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/noBreakHyphen.test.ts.snap

@@ -0,0 +1,157 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`noBreakHyphen 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    margin-bottom: 13.33px;
+line-height: 1.15;
+
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi);
+font-size: 14.67px;
+
+  }
+  
+
+  
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-TableGrid {
+        margin-bottom: 0.00px;
+line-height: 1.00;
+
+      }
+      
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableGrid {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+border-top: 0.67px solid #000000;
+border-left: 0.67px solid #000000;
+border-bottom: 0.67px solid #000000;
+border-right: 0.67px solid #000000;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableGrid &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+      .docx-viewer-0 .docx-viewer-0-TableGrid &gt; tbody &gt; tr &gt; td {
+        border-top: 0.67px solid #000000;
+      }
+      .docx-viewer-0 .docx-viewer-0-TableGrid &gt; tbody &gt; tr &gt; td {
+        border-left: 0.67px solid #000000;
+      }
+    
+    
+  
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+        >
+          Number of the form “999
+        </span>
+        <span
+          class="docx-viewer-0-r"
+        >
+          <span>
+            –
+          </span>
+          <span>
+            99
+          </span>
+        </span>
+        <span
+          class="docx-viewer-0-r"
+        >
+          <span>
+            –
+          </span>
+          <span>
+            9999”, where
+          </span>
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/pinyin.test.ts.snap

@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`pinyin 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        text-align: justify;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+        >
+          <ruby>
+            <span
+              class="docx-viewer-0-r"
+            >
+              拼
+            </span>
+            <rp />
+            <rt>
+              <span
+                class="docx-viewer-0-r"
+                style="font-family: DengXian; font-size: 6.67px;"
+              >
+                pīn
+              </span>
+            </rt>
+            <rp />
+          </ruby>
+        </span>
+        <span
+          class="docx-viewer-0-r"
+        >
+          <ruby>
+            <span
+              class="docx-viewer-0-r"
+            >
+              音
+            </span>
+            <rp />
+            <rt>
+              <span
+                class="docx-viewer-0-r"
+                style="font-family: DengXian; font-size: 6.67px;"
+              >
+                yīn
+              </span>
+            </rt>
+            <rp />
+          </ruby>
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/svg.test.ts.snap

@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`svg 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        text-align: justify;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+        >
+          <div
+            style="display: inline-block; width: 623.98px; height: 623.98px;"
+          >
+            <img
+              src="blob:http://localhost/mock"
+              style="position: relative; left: 0.00px; top: 0.00px; width: 623.98px; height: 623.98px;"
+            />
+          </div>
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/sym.test.ts.snap

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`sym 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        text-align: justify;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Normal &gt; .docx-viewer-0-r {
+        
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+        style="margin-top: 6.67px; margin-bottom: 6.67px; text-align: left;"
+      >
+        <span
+          class="docx-viewer-0-r"
+          style="font-family: SimSun; font-size: 16.00px;"
+        >
+          <span
+            style="font-family: Wingdings;"
+          >
+            
+          </span>
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/tableborder.test.ts.snap

@@ -0,0 +1,307 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tableborder 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+ .docx-viewer-0 .docx-classname-0 {
+  border-collapse: collapse;
+  width: 605.98px;
+margin-left: -10.80px;
+border-top: 0.67px solid black;
+border-left: 0.67px solid black;
+border-bottom: 0.67px solid black;
+border-right: 0.67px solid black;
+table-layout: fixed;
+
+ }
+
+ .docx-viewer-0 .docx-classname-0 &gt; tbody &gt; tr &gt; td {
+  
+ }
+ 
+      .docx-viewer-0 .docx-classname-0 &gt; tbody &gt; tr &gt; td {
+        border-top: 0.67px solid black;
+      }
+      .docx-viewer-0 .docx-classname-0 &gt; tbody &gt; tr &gt; td {
+        border-left: 0.67px solid black;
+      }
+  </style>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        text-align: justify;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Normal &gt; .docx-viewer-0-r {
+        font-family: "Times New Roman", SimSun;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <table
+        class="enable-hBand enable-vBand docx-classname-0"
+        style="width: 605.98px; margin-left: -10.80px; border-top: 0.67px solid black; border-left: 0.67px solid black; border-bottom: 0.67px solid black; border-right: 0.67px solid black; table-layout: fixed;"
+      >
+        <tbody>
+          <tr>
+            <td
+              class="nwCell firstRow firstCol band2Horz band2Vert"
+              style="width: 42.00px; background-color: rgba(255, 255, 255, 0.15);"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                  style="font-family: SimHei; font-weight: bold; font-size: 13.33px;"
+                >
+                  版本
+                </span>
+              </p>
+            </td>
+            <td
+              class="firstRow band2Horz band1Vert"
+              style="width: 389.99px; background-color: rgba(255, 255, 255, 0.15);"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                  style="font-family: SimHei; font-weight: bold; font-size: 13.33px;"
+                >
+                  注释
+                </span>
+              </p>
+            </td>
+            <td
+              class="firstRow band2Horz band2Vert"
+              style="width: 90.00px; background-color: rgba(255, 255, 255, 0.15);"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                  style="font-family: SimHei; font-weight: bold;"
+                >
+                  作者
+                </span>
+              </p>
+            </td>
+            <td
+              class="neCell firstRow lastCol band2Horz band1Vert"
+              style="width: 84.00px; background-color: rgba(255, 255, 255, 0.15);"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                  style="font-family: SimHei; font-weight: bold;"
+                >
+                  时间
+                </span>
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="swCell lastRow firstCol band1Horz band2Vert"
+              style="width: 42.00px;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                 
+              </p>
+            </td>
+            <td
+              class="lastRow band1Horz band1Vert"
+              style="width: 389.99px;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                  style="font-family: SimHei; font-size: 13.33px;"
+                >
+                  ERP系统架构设计方案
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                  style="font-family: SimHei; font-size: 13.33px;"
+                >
+                  初稿
+                </span>
+              </p>
+            </td>
+            <td
+              class="lastRow band1Horz band2Vert"
+              style="width: 90.00px;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                  style="font-family: SimHei; font-size: 13.33px;"
+                >
+                  nwind
+                </span>
+              </p>
+            </td>
+            <td
+              class="seCell lastRow lastCol band1Horz band1Vert"
+              style="width: 84.00px;"
+            >
+              <p
+                class="docx-viewer-0-p"
+              >
+                <span
+                  class="docx-viewer-0-r"
+                  style="font-family: SimHei; font-size: 13.33px;"
+                >
+                  201
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                  style="font-family: SimHei; font-size: 13.33px;"
+                >
+                  9
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                  style="font-family: SimHei; font-size: 13.33px;"
+                >
+                  -
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                  style="font-family: SimHei; font-size: 13.33px;"
+                >
+                  05
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                  style="font-family: SimHei; font-size: 13.33px;"
+                >
+                  -
+                </span>
+                <span
+                  class="docx-viewer-0-r"
+                  style="font-family: SimHei; font-size: 13.33px;"
+                >
+                  28
+                </span>
+              </p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <p
+        class="docx-viewer-0-p"
+      >
+         
+      </p>
+      <p
+        class="docx-viewer-0-p"
+        style="text-align: center;"
+      >
+         
+      </p>
+      <p
+        class="docx-viewer-0-p"
+      >
+         
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/textbox-background.test.ts.snap

@@ -0,0 +1,689 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`textbox-background 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    margin-top: 6.67px;
+margin-bottom: 13.33px;
+line-height: 1.15;
+
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        margin-top: 0.00px;
+margin-bottom: 0.00px;
+line-height: 1.00;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Normal &gt; .docx-viewer-0-r {
+        font-size: 12.00px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading1 {
+        border-top: 4.00px solid #4F81BD;
+border-left: 4.00px solid #4F81BD;
+border-bottom: 4.00px solid #4F81BD;
+border-right: 4.00px solid #4F81BD;
+background-color: #4F81BD;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Heading1 &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+color: #FFFFFF;
+font-size: 14.67px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading2 {
+        border-top: 4.00px solid #DBE5F1;
+border-left: 4.00px solid #DBE5F1;
+border-bottom: 4.00px solid #DBE5F1;
+border-right: 4.00px solid #DBE5F1;
+background-color: #DBE5F1;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Heading2 &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading3 {
+        border-top: 1.00px solid #4F81BD;
+margin-top: 20.00px;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Heading3 &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+color: #243F60;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading4 {
+        border-top: 1.00px solid #4F81BD;
+margin-top: 13.33px;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Heading4 &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+color: #365F91;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading5 {
+        border-bottom: 1.00px solid #4F81BD;
+margin-top: 13.33px;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Heading5 &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+color: #365F91;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading6 {
+        border-bottom: 1.00px solid #4F81BD;
+margin-top: 13.33px;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Heading6 &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+color: #365F91;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading7 {
+        margin-top: 13.33px;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Heading7 &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+color: #365F91;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading8 {
+        margin-top: 13.33px;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Heading8 &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+font-size: 12.00px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading9 {
+        margin-top: 13.33px;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Heading9 &gt; .docx-viewer-0-r {
+        font-style: italic;
+text-transform: uppercase;
+font-size: 12.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading1Char &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+color: #FFFFFF;
+font-size: 14.67px;
+background-color: #4F81BD;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading2Char &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+font-size: 12.00px;
+background-color: #DBE5F1;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading3Char &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+color: #243F60;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading4Char &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+color: #365F91;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading5Char &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+color: #365F91;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading6Char &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+color: #365F91;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading7Char &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+color: #365F91;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading8Char &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+font-size: 12.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading9Char &gt; .docx-viewer-0-r {
+        font-style: italic;
+text-transform: uppercase;
+font-size: 12.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Caption &gt; .docx-viewer-0-r {
+        font-weight: bold;
+color: #365F91;
+font-size: 10.67px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Title &gt; .docx-viewer-0-r {
+        font-family: var(--docx-theme-font-majorHAnsi), var(--docx-theme-font-majorEastAsia);
+text-transform: uppercase;
+color: #4F81BD;
+font-size: 34.67px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-TitleChar &gt; .docx-viewer-0-r {
+        font-family: var(--docx-theme-font-majorHAnsi), var(--docx-theme-font-majorEastAsia);
+text-transform: uppercase;
+color: #4F81BD;
+font-size: 34.67px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Subtitle {
+        margin-bottom: 33.33px;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Subtitle &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+color: #595959;
+font-size: 14.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-SubtitleChar &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+color: #595959;
+font-size: 14.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Strong &gt; .docx-viewer-0-r {
+        font-weight: bold;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Emphasis &gt; .docx-viewer-0-r {
+        text-transform: uppercase;
+color: #243F60;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-NoSpacing {
+        margin-bottom: 0.00px;
+line-height: 1.00;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Quote &gt; .docx-viewer-0-r {
+        font-style: italic;
+font-size: 16.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-QuoteChar &gt; .docx-viewer-0-r {
+        font-style: italic;
+font-size: 16.00px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-IntenseQuote {
+        margin-top: 16.00px;
+margin-bottom: 16.00px;
+margin-left: 72.00px;
+margin-right: 72.00px;
+text-align: center;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-IntenseQuote &gt; .docx-viewer-0-r {
+        color: #4F81BD;
+font-size: 16.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-IntenseQuoteChar &gt; .docx-viewer-0-r {
+        color: #4F81BD;
+font-size: 16.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-SubtleEmphasis &gt; .docx-viewer-0-r {
+        font-style: italic;
+color: #243F60;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-IntenseEmphasis &gt; .docx-viewer-0-r {
+        font-weight: bold;
+text-transform: uppercase;
+color: #243F60;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-SubtleReference &gt; .docx-viewer-0-r {
+        font-weight: bold;
+color: #4F81BD;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-IntenseReference &gt; .docx-viewer-0-r {
+        font-weight: bold;
+font-style: italic;
+text-transform: uppercase;
+color: #4F81BD;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-BookTitle &gt; .docx-viewer-0-r {
+        font-weight: bold;
+font-style: italic;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-TOCHeading {
+        
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-ListParagraph {
+        text-indent: 28.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Header {
+        border-bottom: 1.00px solid black;
+text-align: center;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Header &gt; .docx-viewer-0-r {
+        font-size: 12.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-HeaderChar &gt; .docx-viewer-0-r {
+        font-size: 12.00px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Footer {
+        
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Footer &gt; .docx-viewer-0-r {
+        font-size: 12.00px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-FooterChar &gt; .docx-viewer-0-r {
+        font-size: 12.00px;
+
+      }
+      
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-TableGrid {
+        margin-top: 0.00px;
+margin-bottom: 0.00px;
+line-height: 1.00;
+
+      }
+      
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableGrid {
+  border-collapse: collapse;
+  border-top: 0.67px solid black;
+border-left: 0.67px solid black;
+border-bottom: 0.67px solid black;
+border-right: 0.67px solid black;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableGrid &gt; tbody &gt; tr &gt; td {
+  
+ }
+ 
+      .docx-viewer-0 .docx-viewer-0-TableGrid &gt; tbody &gt; tr &gt; td {
+        border-top: 0.67px solid black;
+      }
+      .docx-viewer-0 .docx-viewer-0-TableGrid &gt; tbody &gt; tr &gt; td {
+        border-left: 0.67px solid black;
+      }
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 793.71px; padding: 75.60px 75.60px 75.60px 75.60px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+        >
+          <div
+            style="z-index: 251664384; position: absolute; left: 482.39px; top: -145.60px; width: 341.99px; height: 1205.97px; background-color: rgb(245, 122, 21); column-count: 1;"
+          />
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/textbox-behindDoc.test.ts.snap

@@ -0,0 +1,138 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`textbox-behindDoc 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        text-align: justify;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+        >
+          <div
+            style="z-index: 251659264; position: absolute; left: 144.00px; top: 77.80px; width: 122.79px; height: 53.58px; column-count: 1; background-color: rgb(255, 255, 255); border-width: 0.67px; border-style: solid;"
+          >
+            <p
+              class="docx-viewer-0-p"
+            >
+              <span
+                class="docx-viewer-0-r"
+              >
+                t
+              </span>
+              <span
+                class="docx-viewer-0-r"
+              >
+                ext
+              </span>
+            </p>
+          </div>
+        </span>
+        <span
+          class="docx-viewer-0-r"
+        >
+          <div
+            style="z-index: 251658239; position: absolute; left: 122.79px; top: 64.41px; width: 164.09px; height: 84.84px; background-color: rgb(112, 173, 71); column-count: 1; border-style: solid;"
+          >
+            <p
+              class="docx-viewer-0-p"
+            >
+               
+            </p>
+          </div>
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/textbox-rotation.test.ts.snap

@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`textbox-rotation 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        text-align: justify;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+        >
+          <div
+            style="z-index: 251661312; position: absolute; left: 214.63px; top: 36.07px; width: 155.16px; height: 82.60px; column-count: 1; background-color: rgb(255, 255, 255); transform: rotate(90deg);"
+          >
+            <p
+              class="docx-viewer-0-p"
+            >
+              <span
+                class="docx-viewer-0-r"
+              >
+                Text 
+              </span>
+              <span
+                class="docx-viewer-0-r"
+              >
+                withou
+              </span>
+              <span
+                class="docx-viewer-0-r"
+              >
+                t outline
+              </span>
+            </p>
+          </div>
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/textbox-vert.test.ts.snap

@@ -0,0 +1,276 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`text 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        text-align: justify;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Normal &gt; .docx-viewer-0-r {
+        
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+        >
+          <div
+            style="z-index: 251671552; position: absolute; left: 10.05px; top: 439.47px; width: 233.30px; height: 158.46px; background-color: rgb(23, 41, 72); column-count: 1;"
+          >
+            <p
+              class="docx-viewer-0-p"
+              style="text-align: center;"
+            >
+              <span
+                class="docx-viewer-0-r"
+                style="font-family: "思源宋体 CN"; color: rgb(47, 84, 150); font-size: 18.67px;"
+              >
+                合格证
+              </span>
+              <span
+                class="docx-viewer-0-r"
+                style="font-family: "思源宋体 CN"; color: rgb(47, 84, 150); font-size: 18.67px;"
+              >
+                a
+              </span>
+              <span
+                class="docx-viewer-0-r"
+                style="font-family: "思源宋体 CN"; color: rgb(47, 84, 150); font-size: 18.67px;"
+              >
+                270
+              </span>
+            </p>
+          </div>
+        </span>
+        <span
+          class="docx-viewer-0-r"
+        >
+          <div
+            style="z-index: 251669504; position: absolute; left: 279.06px; top: 249.71px; width: 195.33px; height: 189.76px; background-color: rgb(23, 41, 72); writing-mode: vertical-rl; text-orientation: mixed; column-count: 1;"
+          >
+            <p
+              class="docx-viewer-0-p"
+              style="text-align: center;"
+            >
+              <span
+                class="docx-viewer-0-r"
+                style="font-family: "思源宋体 CN"; color: rgb(47, 84, 150); font-size: 18.67px;"
+              >
+                合格证
+              </span>
+              <span
+                class="docx-viewer-0-r"
+                style="font-family: "思源宋体 CN"; color: rgb(47, 84, 150); font-size: 18.67px;"
+              >
+                2
+              </span>
+              <span
+                class="docx-viewer-0-r"
+                style="font-family: "思源宋体 CN"; color: rgb(47, 84, 150); font-size: 18.67px;"
+              >
+                70
+              </span>
+            </p>
+          </div>
+        </span>
+        <span
+          class="docx-viewer-0-r"
+        >
+          <div
+            style="z-index: 251667456; position: absolute; left: 16.00px; top: 174.55px; width: 195.33px; height: 158.51px; background-color: rgb(23, 41, 72); writing-mode: vertical-rl; text-orientation: sideways; column-count: 1;"
+          >
+            <p
+              class="docx-viewer-0-p"
+              style="text-align: center;"
+            >
+              <span
+                class="docx-viewer-0-r"
+                style="font-family: "思源宋体 CN"; color: rgb(47, 84, 150); font-size: 18.67px;"
+              >
+                合格证
+              </span>
+              <span
+                class="docx-viewer-0-r"
+                style="font-family: "思源宋体 CN"; color: rgb(47, 84, 150); font-size: 18.67px;"
+              >
+                9
+              </span>
+              <span
+                class="docx-viewer-0-r"
+                style="font-family: "思源宋体 CN"; color: rgb(47, 84, 150); font-size: 18.67px;"
+              >
+                0
+              </span>
+            </p>
+          </div>
+        </span>
+        <span
+          class="docx-viewer-0-r"
+        >
+          <div
+            style="z-index: 251659264; position: absolute; left: 279.06px; top: 28.68px; width: 195.33px; height: 158.51px; background-color: rgb(23, 41, 72); writing-mode: vertical-rl; text-orientation: mixed; column-count: 1;"
+          >
+            <p
+              class="docx-viewer-0-p"
+              style="text-align: center;"
+            >
+              <span
+                class="docx-viewer-0-r"
+                style="font-family: "思源宋体 CN"; color: rgb(47, 84, 150); font-size: 18.67px;"
+              >
+                合格证
+              </span>
+            </p>
+          </div>
+        </span>
+        <span
+          class="docx-viewer-0-r"
+        >
+          <div
+            style="z-index: 251665408; position: absolute; left: 16.00px; top: 20.46px; width: 195.34px; height: 70.32px; background-color: rgb(23, 41, 72); column-count: 1;"
+          >
+            <p
+              class="docx-viewer-0-p"
+              style="text-align: center;"
+            >
+              <span
+                class="docx-viewer-0-r"
+                style="font-family: "思源宋体 CN"; color: rgb(47, 84, 150); font-size: 18.67px;"
+              >
+                合格证
+              </span>
+            </p>
+          </div>
+        </span>
+        <span
+          class="docx-viewer-0-r"
+        >
+          <div
+            style="z-index: 251663360; position: absolute; left: 16.00px; top: -75.53px; width: 195.34px; height: 70.32px; background-color: rgb(23, 41, 72); column-count: 1;"
+          >
+            <p
+              class="docx-viewer-0-p"
+              style="text-align: center;"
+            >
+              <span
+                class="docx-viewer-0-r"
+                style="font-family: "思源宋体 CN"; color: rgb(47, 84, 150); font-size: 18.67px;"
+              >
+                合格证
+              </span>
+            </p>
+          </div>
+        </span>
+        <span
+          class="docx-viewer-0-r"
+        >
+          <div
+            style="z-index: 251661312; position: absolute; left: 16.00px; top: -75.53px; width: 195.34px; height: 70.32px; background-color: rgb(23, 41, 72); column-count: 1;"
+          >
+            <p
+              class="docx-viewer-0-p"
+              style="text-align: center;"
+            >
+              <span
+                class="docx-viewer-0-r"
+                style="font-family: "思源宋体 CN"; color: rgb(47, 84, 150); font-size: 18.67px;"
+              >
+                合格证
+              </span>
+            </p>
+          </div>
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/textbox.test.ts.snap

@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`textbox 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+      .docx-viewer-0 .docx-viewer-0-Normal {
+        text-align: justify;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+        >
+          <div
+            style="z-index: 251663360; position: absolute; left: 329.67px; top: 137.67px; width: 155.16px; height: 82.60px; background-color: rgb(255, 255, 255); column-count: 1; border-style: solid; border-color: #ed7d31;"
+          >
+            <p
+              class="docx-viewer-0-p"
+            >
+              <span
+                class="docx-viewer-0-r"
+              >
+                Text box
+              </span>
+              <span
+                class="docx-viewer-0-r"
+              >
+                 color
+              </span>
+            </p>
+          </div>
+        </span>
+        <span
+          class="docx-viewer-0-r"
+        >
+          <div
+            style="z-index: 251659264; position: absolute; left: 47.94px; top: 139.17px; width: 155.16px; height: 82.60px; column-count: 1; background-color: rgb(255, 255, 255); border-width: 0.67px; border-style: solid;"
+          >
+            <p
+              class="docx-viewer-0-p"
+            >
+              <span
+                class="docx-viewer-0-r"
+              >
+                Text box
+              </span>
+            </p>
+          </div>
+        </span>
+        <span
+          class="docx-viewer-0-r"
+        >
+          <div
+            style="z-index: 251661312; position: absolute; left: 214.63px; top: 36.07px; width: 155.16px; height: 82.60px; column-count: 1; background-color: rgb(255, 255, 255);"
+          >
+            <p
+              class="docx-viewer-0-p"
+            >
+              <span
+                class="docx-viewer-0-r"
+              >
+                Text 
+              </span>
+              <span
+                class="docx-viewer-0-r"
+              >
+                withou
+              </span>
+              <span
+                class="docx-viewer-0-r"
+              >
+                t outline
+              </span>
+            </p>
+          </div>
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/tooltip.test.ts.snap

@@ -0,0 +1,168 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tooltip 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading1 {
+        margin-top: 16.00px;
+
+      }
+      
+    
+      .docx-viewer-0 .docx-viewer-0-Heading1 &gt; .docx-viewer-0-r {
+        font-family: var(--docx-theme-font-majorHAnsi), var(--docx-theme-font-majorEastAsia);
+color: #2E74B5;
+font-size: 21.33px;
+
+      }
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Heading1Char &gt; .docx-viewer-0-r {
+        font-family: var(--docx-theme-font-majorHAnsi), var(--docx-theme-font-majorEastAsia);
+color: #2E74B5;
+font-size: 21.33px;
+
+      }
+      
+    
+    
+    
+    
+    
+      .docx-viewer-0 .docx-viewer-0-Hyperlink &gt; .docx-viewer-0-r {
+        color: #0563C1;
+text-decoration: underline;
+
+      }
+      
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 793.31px; padding: 94.46px 94.46px 94.46px 94.46px;"
+    >
+      <p
+        class="docx-viewer-0-p docx-viewer-0-Normal docx-viewer-0-Heading1"
+      >
+        <span
+          class="docx-viewer-0-r"
+        >
+          Is Hope Tip-less?
+        </span>
+      </p>
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+        >
+          Here is a 
+        </span>
+        <a
+          href="http://berjon.com/"
+          target="_blank"
+          title="tooltip"
+        >
+          <span
+            class="docx-viewer-0-r docx-viewer-0-DefaultParagraphFont docx-viewer-0-Hyperlink"
+          >
+            hyperlink with a tooltip
+          </span>
+        </a>
+        <span
+          class="docx-viewer-0-r"
+        >
+          .
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;

packages/office-viewer/__tests__/simple/__snapshots__/w.test.ts.snap

@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`w 1`] = `
+<div
+  class="docx-viewer-0 docx-viewer-wrapper"
+  id="root"
+>
+  <style>
+    
+  
+  .docx-viewer-wrapper {
+
+  }
+
+  .docx-viewer-wrapper &gt; article &gt; section {
+    background: white;
+  }
+
+  /** docDefaults **/
+
+  .docx-viewer-0 p {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+  }
+
+  .docx-viewer-0 table {
+    border-spacing: 0;
+  }
+
+  .docx-viewer-0 .docx-viewer-0-p {
+    
+  }
+
+  .docx-viewer-0 .docx-viewer-0-r {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    font-family: var(--docx-theme-font-minorHAnsi), var(--docx-theme-font-minorEastAsia);
+font-size: 16.00px;
+
+  }
+  
+
+  
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+ .docx-viewer-0 .docx-viewer-0-TableNormal {
+  border-collapse: collapse;
+  margin-left: 0.00px;
+
+ }
+
+ .docx-viewer-0 .docx-viewer-0-TableNormal &gt; tbody &gt; tr &gt; td {
+  padding-top: 0.00px;
+padding-left: 7.20px;
+padding-bottom: 0.00px;
+padding-right: 7.20px;
+
+ }
+ 
+    
+    
+    
+    
+    
+    
+    
+  
+  </style>
+  <style>
+    /** embedded fonts **/
+  </style>
+  <article>
+    <section
+      style="position: relative; width: 815.98px; padding: 96.00px 96.00px 96.00px 96.00px;"
+    >
+      <p
+        class="docx-viewer-0-p"
+      >
+        <span
+          class="docx-viewer-0-r"
+          style="transform: scaleX(2); display: inline-block;"
+        >
+          中
+        </span>
+      </p>
+    </section>
+    <section
+      style="position: relative;"
+    />
+  </article>
+</div>
+`;