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

SpreadJS最新正式版下載

前言

在一些報表打印應(yīng)用場景中，經(jīng)常會有類似于“三聯(lián)”的展示需求。在開發(fā)和設(shè)計這種“三聯(lián)”需求的時候會有以下的特色：

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

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

（“三聯(lián)”報表示例圖）

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

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

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

使用代碼實現(xiàn)將數(shù)據(jù)對象綁定在一個單元格內(nèi)：

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

二、改變第2、3聯(lián)的單元格，并不影響第1聯(lián)的內(nèi)容

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

代碼如下：

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

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

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

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

本文內(nèi)容源自