项目需求：开发一套基于Vue框架的工程档案管理系统，用于工程项目资料的填写、编辑和归档，经调研需支持如下功能：

Excel报表的导入、导出

PDF文件的导出

打印表格

经过技术选型，项目组一致决定通过表格组件SpreadJS 来实现。以下是实现Excel报表的导入导出、PDF导出、打印表格的一些思路，供大家参考：

环境介绍

后台：Spring Boot 2.x

前台：vue、vue-element、webpack、iview、Vuex.js 2.x

组件：SpreadJS v11

项目运行效果：

如下是本地的一个Excel文件：

通过SpreadJS，导入到项目中的效果：

项目中应用了SpreadJS V12.2.5的版本(目前官网SpreadJS的最新版本是V14)，其中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"

},

执行npm install 命令安装SpreadJS 组件

导入导出Excel报表

安装相关的资源包： "\@grapecity/spread-excelio"、 "file-saver"

在页面中引入： import ExcelIO from '\@grapecity/spread-excelio'、import FaverSaver from 'file-saver'

如下代码可实现导入导出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);

});

}

导出PDF的注意事项

安装相同版本的 PDF包： "\@grapecity/spread-sheets-pdf"

在需要打印的页面引入该包： import "\@grapecity/spread-sheets-pdf";

引入该包需要注意引入顺序，先引入 \@grapecity/spread-sheets和 grapecity/spread-sheets-print

需引入第三方插件file-saver ： import FaverSaver from 'file-saver'

如下几行代码可实现导出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',

});

}

纯前端表格控件SpreadJS，可满足 .NET、Java、App 等应用程序中的 Web Excel 组件开发、数据填报、在线文档、图表公式联动、类 Excel UI 设计等业务场景，并在数据可视化、Excel 导入导出、公式引用、数据绑定、框架集成中无需大量代码开发和测试，极大降低了企业研发成本和项目交付风险。

本文转载自葡萄城

购正版SpreadJS报表控件授权限时优惠！最高立减万元！点击了解更多优惠

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自：葡萄城