SpreadJS v13.2正式版下載

項(xiàng)目需求：開發(fā)一套基于Vue框架的工程檔案管理系統(tǒng)，用于工程項(xiàng)目資料的填寫、編輯和歸檔，經(jīng)調(diào)研需支持如下功能：

• Excel報(bào)表的導(dǎo)入、導(dǎo)出
• PDF文件的導(dǎo)出
• 打印表格

經(jīng)過技術(shù)選型，項(xiàng)目組一致決定通過表格組件來實(shí)現(xiàn)。以下是實(shí)現(xiàn)Excel報(bào)表的導(dǎo)入導(dǎo)出、PDF導(dǎo)出、打印表格的一些思路，供大家參考：

環(huán)境介紹

1. 后臺(tái)：Spring Boot 2.x
2. 前臺(tái)：vue、vue-element、webpack、iview、Vuex.js 2.x
3. 組件：SpreadJS V11

初始化Vue項(xiàng)目

這里，可以參考這篇技術(shù)博客：

項(xiàng)目運(yùn)行效果：

如下是本地的一個(gè)Excel文件：

通過SpreadJS，導(dǎo)入到項(xiàng)目中的效果：

我的項(xiàng)目中應(yīng)用了SpreadJS V12.2.5的版本（目前官網(wǎng)SpreadJS的最新版本是V13），其中package.json 需要添加的引用如下：

"dependencies": {
"@grapecity/spread-excelio": "12.2.5",
"@grapecity/spread-sheets": "12.2.5",
"@grapecity/spread-sheets-pdf": "^12.2.5",
"@grapecity/spread-sheets-print": "12.2.5",
"@grapecity/spread-sheets-resources-zh": "12.2.5",
"@grapecity/spread-sheets-vue": "12.2.5",
"@grapecity/spread-sheets-charts": "12.2.5" ,
"file-saver": "2.0.2",
"jquery": "2.2.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},

執(zhí)行npm install 命令安裝SpreadJS 組件

可以參考這篇技術(shù)博客：

導(dǎo)入導(dǎo)出Excel報(bào)表

1. 安裝相關(guān)的資源包： "\@grapecity/spread-excelio"、 "file-saver"
2. 在頁面中引入： import ExcelIO from '\@grapecity/spread-excelio'、import FaverSaver from 'file-saver'
3. 如下代碼可實(shí)現(xiàn)導(dǎo)入導(dǎo)出Excel：

exportXlsx () {
let ex = new ExcelIO.IO()
let json = this.spread.toJSON()
ex.save(json, function (blob) {
FaverSaver.saveAs(blob, 'export.xlsx')
}, function (e) {
console.log(e)
})
},
importXlsx(){
let self = this;
var excelIO = new ExcelIO.IO();
console.log(excelIO);
const excelFile = document.getElementById("fileDemo").files[0];
excelIO.open(excelFile, function (json) {
let workbookObj = json;
self.spread.fromJSON(workbookObj);
}, function (e) {
alert(e.errorMessage);
});
}

導(dǎo)出PDF的注意事項(xiàng)

1. 安裝相同版本的 PDF包： "\@grapecity/spread-sheets-pdf"
2. 在需要打印的頁面引入該包： import "\@grapecity/spread-sheets-pdf";
3. 引入該包需要注意引入順序，先引入 \@grapecity/spread-sheets和 grapecity/spread-sheets-print
4. 需引入第三方插件file-saver ： import FaverSaver from 'file-saver'
5. 如下幾行代碼可實(shí)現(xiàn)導(dǎo)出PDF功能

savePdf(){
let self = this;
let jsonString = JSON.stringify(self.spread.toJSON());
let printSpread = new GC.Spread.Sheets.Workbook();
printSpread.fromJSON(JSON.parse(jsonString));

printSpread.savePDF(function(blob) { 
// window.open(URL.createObjectURL(blob)) 
FaverSaver.saveAs(blob, 'Hello.pdf')
}, function(error) {
console.log(error);
}, {
title: 'Print',
}); 
}

示例代碼下載

大家可下載下方的示例代碼，實(shí)現(xiàn)導(dǎo)出PDF、導(dǎo)入導(dǎo)出Excel功能。

SpreadJS | 下載試用

純前端表格控件SpreadJS，可滿足 .NET、Java、App 等應(yīng)用程序中的 Web Excel 組件開發(fā)、數(shù)據(jù)填報(bào)、在線文檔、圖表公式聯(lián)動(dòng)、類 Excel UI 設(shè)計(jì)等業(yè)務(wù)場景，并在數(shù)據(jù)可視化、Excel 導(dǎo)入導(dǎo)出、公式引用、數(shù)據(jù)綁定、框架集成中無需大量代碼開發(fā)和測試，極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。

本文轉(zhuǎn)載自

購正版SpreadJS報(bào)表控件授權(quán)限時(shí)優(yōu)惠！最高立減萬元！點(diǎn)擊