亚洲A级,香蕉草莓社区,97人伦影

如何使用SpreadJS在Excel中實(shí)現(xiàn)報(bào)表的三聯(lián)類模板？

轉(zhuǎn)帖|使用教程|編輯：龔雪|2023-11-03 11:36:54.320|閱讀 116 次

概述：本文主要介紹如何使用SpreadJS在Excel中實(shí)現(xiàn)報(bào)表的三聯(lián)類模板，歡迎下載最新版產(chǎn)品體驗(yàn)！

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

SpreadJS最新正式版下載

前言

在一些報(bào)表打印應(yī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)容的高度是可變的，比方說上圖中，第二、三聯(lián)中間的那一段話的長度是不確定的，因此它所占據(jù)的單元格行數(shù)也是不確定的。

如何使用SpreadJS在Excel中實(shí)現(xiàn)報(bào)表的三聯(lián)類模板？

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

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

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

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

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

同時(shí)，使用自定義單元格來實(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ū)域，并使用上方的按鈕來設(shè)置需要向下移動(dòng)的區(qū)域，將其記錄在tag中：