技术文章

项目需求

  基于开发一套Vue框架工程档案管理系统用于工程数据的填写、编辑和归档。经调查，应支持以下功能：

Excel导入、导出报告PDF经过技术选择，项目组一致决定通过表组件进行文件的导出打印表格Spread 来实现。

  以下是实现Excel导入导出报表，PDF一些导出和打印表格的想法供您参考：

环境介绍1.背景：Spring Boot 2.x2.前台：vue、vue-element、webpack、iview、Vuex.js 2.x3.组件：SpreadJs V11初始化Vue项目

  这里可以参考这个技术博客:

3 分钟创建 Spread 的 Vue 项目运行效果：

  以下是当地的一个Excel文件：

  

  通过Spread，导入项目的效果：

  

  应用于我的项目Spread V12.2.5版(目前官网Spread最新版本是V13），其中package.json 需要添加的引用如下：

1. "dependencies": {2. "@grapecity/spread-excelio": "12.2.5",3. "@grapecity/spread-sheets": "12.2.5",4. "@grapecity/spread-sheets-pdf": "^12.2.5",5. "@grapecity/spread-sheets-print": "12.2.5",6. "@grapecity/spread-sheets-resources-zh": "12.2.5",7. "@grapecity/spread-sheets-vue": "12.2.5",8. "@grapecity/spread-sheets-charts": "12.2.5" ,9. "file-saver": "2.0.2",10. "jquery": "2.2.1",11. "vue": "^2.5.2",12. "vue-router": "^3.0.1"13. },执行npm install 命令安装Spread 组件

  导入导出Excel报表

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

  2. 页面介绍： import ExcelIO from '@grapecity/spread-excelio'、import FaverSaver from 'file-saver'

  3. 导入导出如下代码Excel：

1. exportXlsx () {2. let ex = new http://ExcelIO.IO()3. let json = this.spread.toON()4. ex.save(json, function (blob) {5. FaverSaver.saveAs(blob, 'export.xlsx')6. }, function (e) {7. console.log(e)8. })9. },10. importXlsx(){11. let self = this;12. var excelIO = new http://ExcelIO.IO();13. console.log(excelIO);14. const excelFile = document.getElementById("fileDemo").files[0];15. excelIO.open(excelFile, function (json) {16. let workbookObj = json;17. self.spread.fromON(workbookObj);18. }, function (e) {19. alert(e.errorMessage);20. });21. }

  导出PDF的注意事项

  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. 导出以下行代码PDF功能

1. savePdf(){2. let self = this;3. let jsonString = ON.stringify(self.spread.toON());4. let printSpread = new GC.Spread.Sheets.Workbook();5. printSpread.fromON(ON.parse(jsonString));6.7. printSpread.savePDF(function(blob) {8. // window.open(URL.createObjectURL(blob))9. FaverSaver.saveAs(blob, 'Hello.pdf')10. }, function(error) {11. console.log(error);12. }, {13. title: 'Print',14. });15. }下载示例代码，实现导出PDF、导入导出Excel功能

  Spread 纯前端表控件

  Spread 是一款基于 HTML5 纯前端电子表控件，兼容 450 种以上的 Excel 公式，依靠它 高性能，跨平台，与 Excel 高度兼容的产品特到各行业知名企业用户的青睐。带来善良 Excel 在满足使用体验的同时，满足使用体验 Web Excel 组件开发、数据填写、Excel 类别报表设计，在线Excel 协同应用等业务场景大大降低了企业研发成本和项目交付风险。

Spread - 纯前端表控件|可嵌入系统开发的在线Excel - 葡萄城官 ** 于葡萄城

  赋能开发者！成立于 1980 2000年发工具、商业智能解决方案、低代码开发平台于一体的全球领先软件和服务提供商。西安葡萄城是中国的一家分公司，为全球市场提供软件研发服务，为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外多次获奖，广泛应用于全球数十万家企业、学校和政府机构。