純前端表格控制元件SpreadJS使用教程 - 如何進行圖片繫結

語言: CN / TW / HK

SpreadJS支援雙向資料繫結,可以快速實現填報和報表需求。在報表中,展示圖片也是常見需求,那麼如何將資料欄位中的圖片連結展示為圖片呢?

目前SpreadJS可以通過浮動圖片,單元格背景以及V14Update1中新增的圖片迷你圖三種方式顯示圖片。再結合一定的開發,即可實現繫結圖片的需求。

點選獲取SpreadJS工具下載

方法一:圖片迷你圖引用繫結路徑單元格

參考圖片迷你圖例項,將含有連結的列隱藏,展示圖片單元格使用IMAGE引用隱藏單元格。
優點:不需要程式碼開發,只要在設計模板時使用些小技巧即可
缺點:模板設計人員需要學習設計方法,合理安排隱藏單元格位置;Excel不支援函式迷你圖,匯出Excel顯示#NAME

方法二:繫結後遍歷新增圖片

在模板設計時,給單元格tag加上特殊標記,資料繫結完成後遍歷單元格,查詢標記,在單元格位置插入浮動圖片。
優點:浮動圖片可以匯出Excel
缺點:模板設計時候要打標記;插入浮動圖片需要考慮合併單元格的影響

方法三:自定義圖片單元格

自定義圖片單元格,在自定義單元格paint實現中設定引數的style新增backgroundImage屬性值為單元格value,value引數傳遞空。在單元格中顯示圖片
優點:使用單元格型別設定圖片更直觀,和Checkbox等方式一致。
缺點:單元格型別無法匯出Excel

大家可以根據自己專案實際需求選擇合適的方式新增圖片。

SpreadJS | 下載試用

純前端表格控制元件SpreadJS,相容 450 種以上的 Excel 公式,具備“高效能、跨平臺、與 Excel 高度相容”的產品特性,備受華為、蘇寧易購、天弘基金等行業龍頭企業的青睞,並被中國軟體行業協會認定為“中國優秀軟體產品”。SpreadJS 可為使用者提供類 Excel 的功能,滿足表格文件協同編輯、 資料填報、 類 Excel 報表設計等業務場景需求,極大的降低企業研發成本和專案交付風險。

本文轉載自葡萄城官網