feat: Office Viewer 支持 Excel (#9826)

* feat: Office viewer 支持 Excel

* 修复类型报错

* 修复类型报错

.editorconfig

@@ -16,3 +16,6 @@ indent_size = 4
 
 [*.md]
 trim_trailing_whitespace = false
+
+[**.tsv]
+indent_style = tab

.gitattributes

@@ -9,3 +9,6 @@
 *.ttf binary
 *.woff binary
 *.docx binary
+*.xlsx binary
+*.pptx binary
+*.TTF binary

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

@@ -0,0 +1,66 @@
+---
+title: Office Viewer Excel
+description:
+type: 0
+group: ⚙ 组件
+menuName: OfficeViewer Excel 渲染
+icon:
+order: 24
+---
+
+> 6.3 及以上版本
+
+## 基本用法
+
+```schema: scope="body"
+{
+  "type": "office-viewer",
+  "src": "/examples/static/all.xlsx",
+  "excelOptions": {
+    "height": 500
+  }
+}
+```
+
+除了 `xlsx`，也支持后缀为 `csv` 及 `tsv` 的文件
+
+## 配置项
+
+由于接口可能有变化，这里只列出少量配置项，后续补充
+
+```schema: scope="body"
+{
+  "type": "office-viewer",
+  "excelOptions": {
+    "showSheetTabBar": false,
+    "showFormulaBar": false
+  },
+  "src": "/examples/static/all.xlsx"
+}
+```
+
+| 属性名          | 类型      | 默认值 | 说明                     |
+| --------------- | --------- | ------ | ------------------------ |
+| showFormulaBar  | `boolean` | true   | 是否显示公式拦           |
+| showSheetTabBar | `boolean` | true   | 是否显示底部 sheet 切换  |
+| fontURL         | `object`  |        | 字体地址，参考下面的说明 |
+
+## 字体配置
+
+由于浏览器中缺少特定字体，将展现会不一致，这些字体都是有版权的，因此本项目中不提供，需要自行准备，然后配置 `fontURL` 映射到对应的地址，渲染时就会加载。
+
+类似如下配置
+
+```json
+{
+  "type": "office-viewer",
+  "excelOptions": {
+    "fontURL": {
+      "等线": "/static/font/DengXian.ttf",
+      "仿宋": "/static/font/STFANGSO.TTF",
+      "黑体": "/static/font/simhei.ttf"
+    }
+  },
+  "src": "/examples/static/all.xlsx"
+}
+```

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

@@ -10,7 +10,7 @@ order: 23
 
 > 2.9.0 及以上版本
 
-用于渲染 office 文档，目前只支持 docx 格式
+用于渲染 office 文档，目前只支持 docx 和 xlsx 格式，本文档只介绍 docx 的配置，xlsx 的配置请参考 [office-viewer-excel](office-viewer-excel)
 
 ## 基本用法
 

examples/components/Components.tsx

@@ -991,12 +991,21 @@ export const components = [
         )
       },
       {
-        label: 'OfficeViewer 文档渲染',
+        label: 'OfficeViewer Word 渲染',
         path: '/zh-CN/components/office-viewer',
         component: React.lazy(() =>
           import('../../docs/zh-CN/components/office-viewer.md').then(wrapDoc)
         )
       },
+      {
+        label: 'OfficeViewer Excel 渲染',
+        path: '/zh-CN/components/office-viewer-excel',
+        component: React.lazy(() =>
+          import('../../docs/zh-CN/components/office-viewer-excel.md').then(
+            wrapDoc
+          )
+        )
+      },
       {
         label: 'PDFViewer 渲染',
         path: '/zh-CN/components/pdf-viewer',

examples/components/OfficeViewer.jsx

@@ -8,14 +8,17 @@ export default {
       {
         type: 'input-file',
         name: 'file',
-        label: '选择 Docx 文件预览效果（不会上传到服务器）',
+        label: '选择 Docx/Excel 文件预览效果（不会上传到服务器）',
         asBlob: true,
-        accept: '.docx'
+        accept: '.docx,.xlsx,.csv,.tsv'
       },
       {
         type: 'office-viewer',
         id: 'office-viewer',
-        name: 'file'
+        name: 'file',
+        excelOptions: {
+          height: 500
+        }
       }
     ]
   }

fis-conf.js

@@ -526,6 +526,7 @@ if (fis.project.currentMedia() === 'publish-sdk') {
         '!punycode/**',
         '!office-viewer/**',
         '!fflate/**',
+        '!numfmt/**',
         '!amis-formula/lib/doc.js'
       ],
 
@@ -579,7 +580,7 @@ if (fis.project.currentMedia() === 'publish-sdk') {
         'echarts-wordcloud/**'
       ],
 
-      'office-viewer.js': ['office-viewer/**', 'fflate/**'],
+      'office-viewer.js': ['office-viewer/**', 'fflate/**', 'numfmt/**'],
       'json-view.js': 'react-json-view/**',
       'fomula-doc.js': 'amis-formula/lib/doc.js',
 
@@ -608,7 +609,8 @@ if (fis.project.currentMedia() === 'publish-sdk') {
         '!markdown-it/**',
         '!markdown-it-html5-media/**',
         '!office-viewer/**',
-        '!fflate/**'
+        '!fflate/**',
+        '!numfmt/**'
       ]
     }),
     postpackager: [
@@ -842,6 +844,7 @@ if (fis.project.currentMedia() === 'publish-sdk') {
         '!punycode/**',
         '!amis-formula/**',
         '!fflate/**',
+        '!numfmt/**',
         '!office-viewer/**',
         '!amis-core/**',
         '!amis-ui/**',
@@ -908,7 +911,7 @@ if (fis.project.currentMedia() === 'publish-sdk') {
         '!/examples/components/EChartsEditor/Common.tsx'
       ],
 
-      'pkg/office-viewer.js': ['office-viewer/**', 'fflate/**'],
+      'pkg/office-viewer.js': ['office-viewer/**', 'fflate/**', 'numfmt/**'],
 
       'pkg/rest.js': [
         '**.{js,jsx,ts,tsx}',
@@ -933,7 +936,8 @@ if (fis.project.currentMedia() === 'publish-sdk') {
         '!uc.micro/**',
         '!markdown-it/**',
         '!markdown-it-html5-media/**',
-        '!fflate/**'
+        '!fflate/**',
+        '!numfmt/**'
       ],
 
       'pkg/npm.css': ['node_modules/*/**.css', '!monaco-editor/**', '!amis/**'],

index.html

@@ -26,6 +26,7 @@
     />
     <link rel="stylesheet" href="/node_modules/katex/dist/katex.min.css" />
     <link rel="stylesheet" href="/node_modules/prismjs/themes/prism.css" />
+    <link rel="stylesheet" href="/node_modules/office-viewer/dist/office.css" />
     <link rel="stylesheet" href="/examples/doc.css" />
 
     <link rel="stylesheet" href="/examples/style.scss" />

packages/amis/package.json

@@ -62,7 +62,7 @@
     "moment": "^2.19.4",
     "moment-timezone": "^0.5.34",
     "mpegts.js": "^1.6.10",
-    "office-viewer": "^0.2.1",
+    "office-viewer": "^0.3.5",
     "prop-types": "^15.6.1",
     "qrcode.react": "^3.1.0",
     "react-cropper": "^2.1.8",
@@ -244,4 +244,4 @@
     "react-dom": ">=16.8.6"
   },
   "gitHead": "37d23b4a8eb1c663bc38e8dd9040889ea1526ec4"
-}
+}

packages/amis/src/renderers/OfficeViewer.tsx

@@ -16,7 +16,7 @@ import {
   resolveVariableAndFilter,
   ScopedContext
 } from 'amis-core';
-import type {Word} from 'office-viewer';
+import type {Word, Excel} from 'office-viewer';
 import {Spinner} from 'amis-ui';
 import {Payload} from '../types';
 
@@ -55,13 +55,15 @@ export default class OfficeViewer extends React.Component<
 > {
   rootElement: React.RefObject<HTMLDivElement>;
 
-  word: Word;
+  office: Word | Excel;
 
   fileName?: string;
 
   // 文档数据，避免 update 参数的时候重复加载
   document?: any;
 
+  finalSrc?: string;
+
   constructor(props: OfficeViewerProps) {
     super(props);
     this.rootElement = React.createRef();
@@ -112,7 +114,7 @@ export default class OfficeViewer extends React.Component<
         this.renderWord();
       } else {
         // 默认只更新变量提升性能
-        this.word?.updateVariable();
+        this.office?.updateVariable();
       }
     }
   }
@@ -124,11 +126,11 @@ export default class OfficeViewer extends React.Component<
     const actionType = action?.actionType as string;
 
     if (actionType === 'saveAs') {
-      this.word?.download(args?.name || this.fileName);
+      this.office?.download(args?.name || this.fileName);
     }
 
     if (actionType === 'print') {
-      this.word?.print();
+      this.office?.print();
     }
   }
 
@@ -171,6 +173,9 @@ export default class OfficeViewer extends React.Component<
       console.warn('file src is empty');
       return;
     }
+
+    this.finalSrc = finalSrc;
+
     let response: Payload;
 
     this.setState({
@@ -195,32 +200,69 @@ export default class OfficeViewer extends React.Component<
     }
   }
 
+  async initOffice(officeViewer: any, file?: ArrayBuffer) {
+    const {
+      wordOptions,
+      excelOptions,
+      env,
+      src,
+      data,
+      translate: __
+    } = this.props;
+    const createOfficeViewer = officeViewer.createOfficeViewer;
+    const office = await createOfficeViewer(
+      file || this.document,
+      {},
+      this.finalSrc
+    );
+
+    if (office instanceof officeViewer.Word) {
+      office.updateOptions({
+        ...wordOptions,
+        data,
+        evalVar: this.evalVar.bind(this)
+      });
+    } else if (office instanceof officeViewer.Excel) {
+      office.updateOptions({
+        ...excelOptions,
+        data,
+        evalVar: this.evalVar.bind(this)
+      });
+      await office.loadExcel();
+    }
+
+    return office;
+  }
+
   /**
    * 渲染远端文件
    */
   async renderRemoteWord() {
-    const {wordOptions, env, src, data, display, translate: __} = this.props;
+    const {
+      wordOptions,
+      excelOptions,
+      env,
+      src,
+      data,
+      display,
+      translate: __
+    } = this.props;
 
     if (!this.document) {
       return;
     }
 
     import('office-viewer').then(async (officeViewer: any) => {
-      const Word = officeViewer.Word;
+      const office = await this.initOffice(officeViewer);
-      const word = new Word(this.document, {
-        ...wordOptions,
-        data,
-        evalVar: this.evalVar.bind(this)
-      });
 
       if (display !== false) {
-        word.render(this.rootElement?.current!);
+        office.render(this.rootElement?.current!);
       } else if (display === false && this.rootElement?.current) {
         // 设置为 false 后清空
         this.rootElement.current.innerHTML = '';
       }
 
-      this.word = word;
+      this.office = office;
     });
   }
 
@@ -236,18 +278,14 @@ 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 office = await this.initOffice(officeViewer, data);
-          const word = new Word(data, {
-            ...wordOptions,
-            evalVar: this.evalVar.bind(this)
-          });
           if (display !== false) {
-            word.render(this.rootElement?.current!);
+            office.render(this.rootElement?.current!);
           } else if (display === false && this.rootElement?.current) {
             // 设置为 false 后清空
             this.rootElement.current.innerHTML = '';
           }
-          this.word = word;
+          this.office = office;
         });
       };
       reader.readAsArrayBuffer(file);

packages/office-viewer/.gitignore

@@ -1,3 +1,5 @@
-/coverage
+coverage
-/lib
+lib
-/esm
+esm
+.rollup.cache
+~$*

packages/office-viewer/.vscode/launch.json

@@ -0,0 +1,52 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "bun",
+      "request": "launch",
+      "name": "Debug Bun",
+
+      // The path to a JavaScript or TypeScript file to run.
+      "program": "${file}",
+
+      // The arguments to pass to the program, if any.
+      "args": [],
+
+      // The working directory of the program.
+      "cwd": "${workspaceFolder}",
+
+      // The environment variables to pass to the program.
+      "env": {},
+
+      // If the environment variables should not be inherited from the parent process.
+      "strictEnv": false,
+
+      // If the program should be run in watch mode.
+      // This is equivalent to passing `--watch` to the `bun` executable.
+      // You can also set this to "hot" to enable hot reloading using `--hot`.
+      "watchMode": false,
+
+      // If the debugger should stop on the first line of the program.
+      "stopOnEntry": false,
+
+      // If the debugger should be disabled. (for example, breakpoints will not be hit)
+      "noDebug": false,
+
+      // The path to the `bun` executable, defaults to your `PATH` environment variable.
+      "runtime": "bun",
+
+      // The arguments to pass to the `bun` executable, if any.
+      // Unlike `args`, these are passed to the executable itself, not the program.
+      "runtimeArgs": []
+    },
+    {
+      "type": "bun",
+      "request": "attach",
+      "name": "Attach to Bun",
+
+      // The URL of the WebSocket inspector to attach to.
+      // This value can be retrieved by using `bun --inspect`.
+      "url": "ws://localhost:6499/"
+    }
+  ]
+}

packages/office-viewer/.vscode/settings.json

@@ -0,0 +1,29 @@
+{
+  "cSpell.words": [
+    "cellspacing",
+    "cfvo",
+    "colspan",
+    "Consts",
+    "cust",
+    "Divs",
+    "dxfs",
+    "echarts",
+    "Fmla",
+    "Fmts",
+    "Formattings",
+    "hlink",
+    "Lbls",
+    "moize",
+    "numfmt",
+    "openxml",
+    "papaparse",
+    "prst",
+    "rels",
+    "relt",
+    "rowspan",
+    "Sparkline",
+    "sparklines",
+    "sqref",
+    "xfrm"
+  ]
+}

packages/office-viewer/README.md

@@ -1,19 +1,23 @@
 # 说明
 
-## 原理
+Word 和 Excel 渲染器，目前接口还未完全稳定，新版可能会修改，请参考 examples
 
-docx 渲染器，原理是将 docx 里的 xml 格式转成 html
+## Word 渲染
+
+### 原理
+
+Word 渲染器，原理是将 docx 里的 xml 格式转成 html
 
 相对于 Canvas 渲染，这个实现方案比较简单，最终页面也可以很方便复制，但无法保证和原始 docx 文件展现一致，因为有部分功能难以在 HTML 中实现，比如图文环绕效果。
 
-## 已知不支持的功能
+### 已知不支持的功能
 
 - 艺术字
 - 域
 - 对象
 - wmf，需要使用 https://github.com/SheetJS/js-wmf
 
-## 参考资料
+### 参考资料
 
 - [官方规范](https://www.ecma-international.org/publications-and-standards/standards/ecma-376/)
 - [标签的在线文档](http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/index.html)
@@ -24,3 +28,9 @@ docx 渲染器，原理是将 docx 里的 xml 格式转成 html
 
 - [docx](https://github.com/dolanmiu/docx) 的类型定义
 - [docxjs](https://github.com/zVolodymyr/docxjs) 里格式的实现
+
+## Excel 渲染
+
+### 原理
+
+使用 Canvas 渲染

packages/office-viewer/__tests__/xlsx/csv/simple.csv

@@ -0,0 +1,2 @@
+a,b
+1,2

packages/office-viewer/__tests__/xlsx/csv/simple.tsv

@@ -0,0 +1,2 @@
+a	b
+1	2