项目需求:开发一套基于Vue框架的工程档案管理系统,用于工程项目资料的填写、编辑和归档,经调研需支持以下功能:php
通过技术选型,项目组一致决定经过表格组件SpreadJS 来实现。如下是实现Excel报表的导入导出、PDF导出、打印表格的一些思路,供你们参考:vue
1.后台:Spring Boot 2.xjquery
2.前台:vue、vue-element、webpack、iview、Vuex.js 2.xwebpack
3.组件:SpreadJS V11web
SpreadJS 组件下载地址:https://www.grapecity.com.cn/download/?pid=57vue-router
这里,能够参考这篇技术博客: 3分钟建立 SpreadJS 的 Vue 项目npm
以下是本地的一个Excel文件: json
经过SpreadJS,导入到项目中的效果: 框架
个人项目中应用了SpreadJS V12.2.5的版本(目前官网SpreadJS的最新版本是V13),其中package.json 须要添加的引用以下:iview
"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" },
能够参考这篇技术博客:https://www.grapecity.com.cn/blogs/spread-sheets-v11sp1-support-npm
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); }); }
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', }); }
你们可下载下方的示例代码,实现导出PDF、导入导出Excel功能。