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

SpreadJS最新正式版下載

前言

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

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

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

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

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

一、同一個(gè)單元格綁定多個(gè)字段

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

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

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

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

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

代碼如下：

而第二點(diǎn)，則稍微有點(diǎn)麻煩，因?yàn)檎鎸?shí)的文本需要幾行單元格展示，不僅和文字的長(zhǎng)度有關(guān)，還與單元格的寬度（考慮到單元格是合并的，這里需要分開計(jì)算并相加）、字體的大小都有關(guān)系：

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

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

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

本文內(nèi)容源自