SpreadJS結合40余年專業控件技術和在電子表格應用領域的經驗而推出的純前端表格控件，基于 HTML5，兼容 450 多種 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受華為、明源云、遠光軟件等知名企業青睞，被中國軟件行業協會認定為“中國優秀軟件產品”。SpreadJS在界面和功能上與 Excel 高度類似，但又不局限于 Excel，而是為企業信息化系統提供 表格文檔協同編輯、 數據填報 和 類 Excel 報表設計 的應用場景支持，極大降低了企業研發成本和項目交付風險。

SpreadJS最新正式版下載

前言

在一些報表打印應用場景中，經常會有類似于“三聯”的展示需求。在開發和設計這種“三聯”需求的時候會有以下的特色：

1. 部分單元格需要同時綁定多個字段，并將其組合為一段文字，比如上圖中的義務教育入學報到單和義務教育入學通知書下方的兩段話，它們包含了日期信息和學校名稱信息。

2. 其中一聯的部分內容的高度是可變的，比方說上圖中，第二、三聯中間的那一段話的長度是不確定的，因此它所占據的單元格行數也是不確定的。

（“三聯”報表示例圖）

下面就將分別為大家介紹如何實現上面兩點需求：

一、同一個單元格綁定多個字段

以上述應用場景為例，小編分別用黃色和藍色的背景色表示義務教育入學報到單和義務教育入學通知書下方的兩段話，它們都綁定了多個字段。

使用代碼實現將數據對象綁定在一個單元格內：

同時，使用自定義單元格來實現文本的拼接：

二、改變第2、3聯的單元格，并不影響第1聯的內容

這里的思路不是插入新的行，而是將第三聯下方的單元格向下移動，于是這里便需要做兩件事，第一，記錄需要向下移動的區域；第二，計算要向下移動幾行。 關于第一點，可以選中區域，并使用上方的按鈕來設置需要向下移動的區域，將其記錄在tag中：

代碼如下：

而第二點，則稍微有點麻煩，因為真實的文本需要幾行單元格展示，不僅和文字的長度有關，還與單元格的寬度（考慮到單元格是合并的，這里需要分開計算并相加）、字體的大小都有關系：

計算文本長度時，使用canvas的measureText方法即可，需要將canvas的字體設置為和表單中一致，文本存在自定義單元格的實例中，直接獲取即可：

最后，使用計算出來的diff，擴大單元格合并的范圍，并向下移動對應行數即可：

這里要先移除合并單元格，再重新添加一次。 至此，核心的功能就完成了。

本文內容源自