fix: 修复 office-viewer 本地文件加载出错；numbering 每个层级重置计数 (#6421)

* 修复 office-viewer 本地文件加载出错 * 尝试修复 coverage 报错 * 去掉 console.log * numbering 每个层级重置 * 忽略 cnfStyle
2024-11-29 18:48:45 +08:00 · 2023-03-21 14:04:40 +08:00 · 2023-03-21 14:04:40 +08:00 · 4f4ca56008
commit 4f4ca56008
parent a6ca69af6f
28 changed files with 124 additions and 86 deletions
--- a/docs/zh-CN/components/office-viewer.md
+++ b/docs/zh-CN/components/office-viewer.md
@ -8,6 +8,8 @@ icon:
 order: 23
 ---

+> 2.9.0 及以上版本
+
 用于渲染 office 文档，目前只支持 docx 格式，通过前端转成 HTML 的方式进行渲染，支持以下功能：

 - 基础文本样式
@ -30,7 +32,10 @@ order: 23
 ```schema: scope="body"
 {
  "type": "office-viewer",
-  "src": "/examples/static/example.docx"
+  "src": "https://suda.cdn.bcebos.com/docx/simple.docx",
+  "wordOptions": {
+    "padding": "8px"
+  }
 }
 ```

@ -111,7 +116,7 @@ order: 23
    {
      "type": "office-viewer",
      "id": "office-viewer",
-      "src": "/examples/static/info.docx",
+      "src": "https://suda.cdn.bcebos.com/docx/info.docx",
      "wordOptions": {
        "enableVar": true,
        "padding": "8px"
@ -127,7 +132,7 @@ order: 23
 {
  "type": "office-viewer",
  "id": "office-viewer",
-  "src": "/examples/static/info.docx",
+  "src": "https://suda.cdn.bcebos.com/docx/info.docx",
  "wordOptions": {
    "padding": "8px"
  }
@ -168,7 +173,7 @@ order: 23
    "type": "office-viewer",
    "id": "office-viewer-download",
    "display": false,
-    "src": "/examples/static/example.docx"
+    "src": "https://suda.cdn.bcebos.com/docx/simple.docx"
  }
 ]
 ```
@ -197,7 +202,7 @@ order: 23
    "type": "office-viewer",
    "id": "office-viewer-print",
    "display": false,
-    "src": "/examples/static/example.docx"
+    "src": "https://suda.cdn.bcebos.com/docx/simple.docx"
  }
 ]
 ```
--- a/examples/app/index-vite.html
+++ b/examples/app/index-vite.html
@ -15,6 +15,7 @@
    />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="../static/iconfont.css" />
+    <link rel="stylesheet" href="../static/officefont.css" />
    <link
      rel="stylesheet"
      href="../../node_modules/@fortawesome/fontawesome-free/css/all.css"
--- a/examples/app/index.html
+++ b/examples/app/index.html
@ -11,6 +11,7 @@
    />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="../static/iconfont.css" />
+    <link rel="stylesheet" href="../static/officefont.css" />
    <link rel="stylesheet" href="@fortawesome/fontawesome-free/css/all.css" />
    <link
      rel="stylesheet"
--- a/examples/index.html
+++ b/examples/index.html
@ -1,16 +1,22 @@
 <!DOCTYPE html>
 <html lang="zh">
-
-<head>
+  <head>
    <meta charset="UTF-8" />
    <title>amis - 低代码前端框架</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="image/x-icon" rel="shortcut icon" href="./static/favicon.png" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1"
+    />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="./static/iconfont.css" />
+    <link rel="stylesheet" href="./static/officefont.css" />
    <link rel="stylesheet" href="@fortawesome/fontawesome-free/css/all.css" />
-  <link rel="stylesheet" href="@fortawesome/fontawesome-free/css/v4-shims.css" />
+    <link
+      rel="stylesheet"
+      href="@fortawesome/fontawesome-free/css/v4-shims.css"
+    />
    <link rel="stylesheet" href="prismjs/themes/prism.css" />
    <!--DEPENDENCIES_INJECT_PLACEHOLDER-->
    <link rel="stylesheet" href="./doc.css" />
@ -84,9 +90,9 @@
    <!--ignore-->
    <link rel="stylesheet" href="amis/lib/helper.css" />
    <!--ignore-->
-</head>
+  </head>

-<body>
+  <body>
    <div id="root" class="app-wrapper"></div>
    <script src="./mod.js"></script>
    <script type="text/javascript">
@ -111,6 +117,5 @@
        app.bootstrap(document.getElementById('root'), initialState);
      });
    </script>
-</body>
-
+  </body>
 </html>
--- a/examples/loader.ts
+++ b/examples/loader.ts
@ -13,7 +13,7 @@
    'classnames': __moduleId('classnames'),
    'axios': __moduleId('axios'),
    'exceljs': __moduleId('exceljs'),
-    'office-viewer': __moduleId('office-viewer'),
+    'fflate': __moduleId('fflate'),
    'moment': __moduleId('moment'),
    'mobx': __moduleId('mobx'),
    'mobx-state-tree': __moduleId('mobx-state-tree'),
--- a/examples/static/font/symbol.ttf
+++ b/examples/static/font/symbol.ttf
--- a/examples/static/font/wingding.ttf
+++ b/examples/static/font/wingding.ttf
--- a/examples/static/officefont.css
+++ b/examples/static/officefont.css
@ -0,0 +1,9 @@
+@font-face {
+  font-family: Wingdings;
+  src: url(font/wingding.ttf);
+}
+
+@font-face {
+  font-family: Symbol;
+  src: url(font/symbol.ttf);
+}
--- a/examples/static/example.docx
+++ b/examples/static/example.docx
--- a/fis-conf.js
+++ b/fis-conf.js
@ -73,6 +73,7 @@ fis.set('project.files', [
  '/examples/static/photo/*.png',
  '/examples/static/audio/*.mp3',
  '/examples/static/video/*.mp4',
+  '/examples/static/font/*.ttf',
  'mock/**'
 ]);

@ -862,7 +863,8 @@ if (fis.project.currentMedia() === 'publish-sdk') {
        '!mdurl/**',
        '!uc.micro/**',
        '!markdown-it/**',
-        '!markdown-it-html5-media/**'
+        '!markdown-it-html5-media/**',
+        '!fflate/**'
      ],

      'pkg/npm.css': ['node_modules/*/**.css', '!monaco-editor/**'],
--- a/index.html
+++ b/index.html
@ -15,6 +15,7 @@
    />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="./examples/static/iconfont.css" />
+    <link rel="stylesheet" href="./examples/static/officefont.css" />
    <link
      rel="stylesheet"
      href="./node_modules/@fortawesome/fontawesome-free/css/all.css"
--- a/package.json
+++ b/package.json
@ -38,6 +38,7 @@
    "@types/js-yaml": "^4.0.5",
    "@types/marked": "^4.0.7",
    "@types/prismjs": "^1.26.0",
+    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
    "copy-to-clipboard": "3.3.1",
--- a/packages/amis-core/package.json
+++ b/packages/amis-core/package.json
@ -17,8 +17,8 @@
    "@types/file-saver": "^2.0.1",
    "@types/hoist-non-react-statics": "^3.3.1",
    "@types/jest": "^28.1.0",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
    "immutable": "^4.1.0",
    "jest": "^29.0.3",
    "jest-environment-jsdom": "^29.0.3",
--- a/packages/amis-editor-core/.gitignore
+++ b/packages/amis-editor-core/.gitignore
@ -0,0 +1,3 @@
+/coverage
+/lib
+/esm
--- a/packages/amis-editor/.gitignore
+++ b/packages/amis-editor/.gitignore
@ -0,0 +1,3 @@
+/coverage
+/lib
+/esm
--- a/packages/amis-ui/package.json
+++ b/packages/amis-ui/package.json
@ -80,8 +80,8 @@
    "@testing-library/jest-dom": "^5.16.4",
    "@types/babel__core": "^7.1.19",
    "@types/jest": "^28.1.0",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
    "autoprefixer": "^10.4.12",
    "jest": "^29.0.3",
    "jest-environment-jsdom": "^29.0.3",
--- a/packages/amis/package.json
+++ b/packages/amis/package.json
@ -100,9 +100,9 @@
    "@types/papaparse": "^5.2.2",
    "@types/prop-types": "^15.5.2",
    "@types/qs": "^6.5.1",
-    "@types/react": "^17.0.39",
+    "@types/react": "^18.0.24",
    "@types/react-color": "^3.0.5",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^18.0.8",
    "@types/react-onclickoutside": "^6.0.2",
    "@types/react-router-dom": "^5.3.3",
    "@types/react-test-renderer": "^17.0.1",
--- a/packages/amis/rollup.config.js
+++ b/packages/amis/rollup.config.js
@ -29,7 +29,6 @@ const external = id => {
        'react-dom',
        'rc-input-number',
        '@rc-component/mini-decimal',
-        'fflate',
        '@babel/runtime'
      ])
      .map(value =>
--- a/packages/amis/src/renderers/OfficeViewer.tsx
+++ b/packages/amis/src/renderers/OfficeViewer.tsx
@ -11,9 +11,9 @@ import {
  Renderer,
  RendererProps,
  resolveVariableAndFilter,
-  ScopedContext,
-  ServiceStore
+  ScopedContext
 } from 'amis-core';
+import type {Word} from 'office-viewer';

 export interface OfficeViewerSchema extends BaseSchema {
  type: 'office-viewer';
@ -154,6 +154,7 @@ export default class OfficeViewer extends React.Component<
        const data = reader.result as ArrayBuffer;

        import('office-viewer').then(async (officeViewer: any) => {
+          const Word = officeViewer.Word;
          const word = new Word(data, {
            ...wordOptions,
            replaceText: this.replaceText.bind(this)
@ -162,7 +163,6 @@ export default class OfficeViewer extends React.Component<
            word.render(this.rootElement?.current!);
          }
        });
-
      };
      reader.readAsArrayBuffer(file);
    }
--- a/packages/office-viewer/.gitignore
+++ b/packages/office-viewer/.gitignore
@ -1,9 +1,3 @@
-/dist
-lib
-sdk
-/public
-/gh-pages
-/output
 /coverage
-/npm
+/lib
 /esm
--- a/packages/office-viewer/tests/OpenXML.test.ts
+++ b/packages/office-viewer/tests/OpenXML.test.ts
@ -53,7 +53,6 @@ test('font hint', async () => {

  const word = await createWord();
  mergeRun(word, xmlDoc);
-  console.log(buildXML(xmlDoc));
  expect(xmlDoc.getElementsByTagName('w:t')[0]?.innerHTML).toBe('B6');
 });

--- a/packages/office-viewer/tests/docx/simple/helloworld.docx
+++ b/packages/office-viewer/tests/docx/simple/helloworld.docx
--- a/packages/office-viewer/examples/static/css/app.css
+++ b/packages/office-viewer/examples/static/css/app.css
@ -27,6 +27,7 @@ body {
 }

 .file-list {
+  flex: none;
  width: 140px;
  padding-top: 4px;
  padding-left: 4px;
--- a/packages/office-viewer/src/openxml/word/table/Tc.ts
+++ b/packages/office-viewer/src/openxml/word/table/Tc.ts
@ -189,6 +189,10 @@ export class Tc {
          parseTextDirection(child, style);
          break;

+        case 'w:cnfStyle':
+          // 目前是自动计算的，所以不需要这个了
+          break;
+
        default:
          console.warn('parseTcPr: ignore', tagName, child);
      }
--- a/packages/office-viewer/src/openxml/word/table/Tr.ts
+++ b/packages/office-viewer/src/openxml/word/table/Tr.ts
@ -54,6 +54,10 @@ export class Tr {
          parseTblCellSpacing(child, tcStyle);
          break;

+        case 'w:cnfStyle':
+          // 目前是自动计算的，所以不需要这个了
+          break;
+
        default:
          console.warn(`Tr: Unknown tag `, tagName, child);
      }
--- a/packages/office-viewer/src/parse/parsePr.ts
+++ b/packages/office-viewer/src/parse/parsePr.ts
@ -339,6 +339,10 @@ export function parsePr(word: Word, element: Element, type: 'r' | 'p' = 'p') {
        parseTextDirection(child, style);
        break;

+      case 'w:cnfStyle':
+        // 目前是自动计算的，所以不需要这个了
+        break;
+
      default:
        console.warn('parsePr Unknown tagName', tagName, child);
    }
--- a/packages/office-viewer/src/render/renderNumbering.ts
+++ b/packages/office-viewer/src/render/renderNumbering.ts
@ -109,6 +109,12 @@ export function renderNumbering(
    ilvlData[ilvl] = lvl.start;
  } else {
    ilvlData[ilvl] += 1;
+    // 加一之后，将比它大的都清空，这样才能每个级别重置
+    for (const ilvIndex in ilvlData) {
+      if (parseInt(ilvIndex) > parseInt(ilvl)) {
+        ilvlData[ilvIndex] = 0;
+      }
+    }
  }

  const element = createElement('span');
--- a/vite.config.ts
+++ b/vite.config.ts
@ -84,10 +84,6 @@ export default defineConfig({
      {
        find: 'office-viewer',
        replacement: path.resolve(__dirname, './packages/office-viewer/src')
-      },
-      {
-        find: 'office-viewer/lib',
-        replacement: path.resolve(__dirname, './packages/office-viewer/src')
      }
    ]
  }