找回密码
 立即注册

QQ登录

只需一步,快速开始

云智装
金牌服务用户   /  发表于:2021-12-3 14:35  /   查看:1535  /  回复:5
导出之前:合并了1和2行
image.png804888305.png
导出后: image.png301700743.png
测试代码
  1. import * as React from 'react';
  2. import * as ReactDOM from 'react-dom';
  3. import '@grapecity/spread-sheets-resources-zh';
  4. GC.Spread.Common.CultureManager.culture("zh-cn");
  5. import GC from '@grapecity/spread-sheets';
  6. import '@grapecity/spread-sheets-charts';
  7. import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react';
  8. import { IO } from "@grapecity/spread-excelio";
  9. import { jsonData } from './data';
  10. import './styles.css';
  11. const Component = React.Component;
  12. const GCsheets = GC.Spread.Sheets;
  13. window.GC = GC;

  14. function _getElementById(id) {
  15.     return document.getElementById(id);
  16. }

  17. class App extends Component {
  18.     constructor(props) {
  19.         super(props);
  20.         this.spread = null;
  21.         this.importExcelFile = null;
  22.         this.exportFileName = "export.xlsx";
  23.         this.password = "";
  24.     }
  25.     render() {
  26.         return <div class="sample-tutorial">
  27.             <div class="sample-spreadsheets">
  28.                 <SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
  29.                     <Worksheet>
  30.                     </Worksheet>
  31.                 </SpreadSheets>
  32.             </div>
  33.             <div className="options-container">
  34.                 <div className="option-row">
  35.                     <div className="inputContainer">
  36.                         <input id="exportFileName" defaultValue="export.xlsx" className="input" onChange={e=>this.changeExportFileName(e)}/>
  37.                         <input type="button" id="saveExcel" defaultValue="export" className="button" onClick={e=>this.saveExcel(e)}/>
  38.                     </div>
  39.                 </div>
  40.                 <div className="option-row">
  41.                     <div className="group">
  42.                         <label>Password:
  43.               <input type="password" id="password" onChange={e=>this.changePassword(e)}/>
  44.                         </label>
  45.                     </div>
  46.                 </div>
  47.             </div>
  48.         </div>;
  49.     }
  50.     initSpread(spread) {
  51.         this.spread = spread;
  52.         spread.suspendPaint();
  53.         let sheet = spread.getActiveSheet();

  54.         let data = {
  55.             name: 'Jones', region: 'East',
  56.             sales: [
  57.                 {orderDate: '1/6/2013', item: 'Pencil', units: 95, cost: 1.99, isDelivered: '是'},
  58.                 {orderDate: '4/1/2013', item: 'Binder', units: 60, cost: 4.99, isDelivered: ''},
  59.                 {orderDate: '6/8/2013', item: 'Pen Set', units: 16, cost: 15.99, isDelivered: ''}
  60.             ]
  61.         };
  62.         let table = sheet.tables.add('tableSales', 1, 0, 5, 5);
  63.         table.autoGenerateColumns(false);
  64.         this.table = table;
  65.         table.style(GCsheets.Tables.TableThemes["medium4"]);
  66.         let tableColumn1 = new GCsheets.Tables.TableColumn(1, "orderDate", "名称", "yyyy-mm-dd");
  67.         let tableColumn2 = new GCsheets.Tables.TableColumn(2, "item", "名称1");
  68.         let tableColumn3 = new GCsheets.Tables.TableColumn(3, "units", "名称2");
  69.         let tableColumn4 = new GCsheets.Tables.TableColumn(4, "cost", "名称3", null, null);
  70.         let tableColumn5 = new GCsheets.Tables.TableColumn(5);
  71.         table.bind([tableColumn1, tableColumn2, tableColumn3, tableColumn4, tableColumn5], 'sales', data);
  72.         sheet.setColumnWidth(0, 120);
  73.         sheet.setColumnWidth(1, 120);
  74.         sheet.setColumnWidth(2, 120);
  75.         sheet.setColumnWidth(3, 120);
  76.         sheet.setColumnWidth(4, 120);
  77.         sheet.addSpan(0, 0, 2,1);
  78.         sheet.setValue(0, 0,'名称');
  79.         spread.resumePaint();
  80.     }
  81.     changeFileDemo(e) {
  82.         this.importExcelFile = e.target.files[0];
  83.     }
  84.     changePassword(e) {
  85.         this.password = e.target.value;
  86.     }
  87.     changeExportFileName(e) {
  88.         this.exportFileName = e.target.value;
  89.     }
  90.     changeIncremental(e) {
  91.         _getElementById('loading-container').style.display = e.target.checked ? "block" : "none";
  92.     }
  93.     loadExcel(e) {
  94.         let spread = this.spread;
  95.         let excelIo = new IO();
  96.         let excelFile = this.importExcelFile;
  97.         let password = this.password;

  98.         let incrementalEle = _getElementById("incremental");
  99.         let loadingStatus = _getElementById("loadingStatus");
  100.         // here is excel IO API
  101.         excelIo.open(excelFile, function (json) {
  102.             let workbookObj = json;
  103.             if (incrementalEle.checked) {
  104.                 spread.fromJSON(workbookObj, {
  105.                     incrementalLoading: {
  106.                         loading: function (progress, args) {
  107.                             progress = progress * 100;
  108.                             loadingStatus.value = progress;
  109.                             console.log("current loading sheet", args.sheet && args.sheet.name());
  110.                         },
  111.                         loaded: function () {
  112.                         }
  113.                     }
  114.                 });
  115.             } else {
  116.                 spread.fromJSON(workbookObj);
  117.             }
  118.         }, function (e) {
  119.             // process error
  120.             alert(e.errorMessage);
  121.         }, { password: password });
  122.     }
  123.     saveExcel(e) {
  124.         let spread = this.spread;
  125.         let excelIo = new IO();

  126.         let fileName = this.exportFileName;
  127.         let password = this.password;
  128.         if (fileName.substr(-5, 5) !== '.xlsx') {
  129.             fileName += '.xlsx';
  130.         }

  131.         let json = spread.toJSON({
  132.             includeBindingSource: true,
  133.           ignoreStyle: false,
  134.           ignoreFormula: true,
  135.           saveAsView: true,
  136.           includeAutoMergedCells: false
  137.         });

  138.         // here is excel IO API
  139.         excelIo.save(json, function (blob) {
  140.             saveAs(blob, fileName);
  141.         }, function (e) {
  142.             // process error
  143.             console.log(e);
  144.         }, { password: password });

  145.     }
  146. }

  147. ReactDOM.render(<App />, _getElementById('app'));
复制代码


5 个回复

倒序浏览
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-12-3 14:56:43
沙发
你好,之所以不生效是因为excel的table表头是不支持合并的,导出后就会还原成未合并前的样式。
回复 使用道具 举报
云智装
金牌服务用户   /  发表于:2021-12-3 15:19:25
板凳
Derrick.Jiao 发表于 2021-12-3 14:56
你好,之所以不生效是因为excel的table表头是不支持合并的,导出后就会还原成未合并前的样式。

这个能支持吗,有些table的表头我们需要自定义
回复 使用道具 举报
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-12-3 15:22:01
地板
本帖最后由 Derrick.Jiao 于 2021-12-3 15:26 编辑
云智装 发表于 2021-12-3 15:19
这个能支持吗,有些table的表头我们需要自定义

我们是支持的,但是excel或者wps是不支持。我们也没有太好的办法。
回复 使用道具 举报
云智装
金牌服务用户   /  发表于:2021-12-3 15:26:10
5#
Derrick.Jiao 发表于 2021-12-3 15:22
我们是支持的,但是excel或者wps是不支持。我们也没有太好的办法。

好的,明白了
回复 使用道具 举报
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-12-3 15:27:06
6#

那这边就结贴了哈,有新问题欢迎开新帖交流~
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部