技术干货：Vue框架下实现导入导出Excel及PDF |
您所在的位置：网站首页 › vue实现excel导出 › 技术干货：Vue框架下实现导入导出Excel及PDF |
技术干货：Vue框架下实现导入导出Excel及PDF
|
原标题：技术干货：Vue框架下实现导入导出Excel及PDF 项目需求：开发一套基于Vue框架的工程档案管理系统，用于工程项目资料的填写、编辑和归档，经调研需支持如下功能： Excel报表的导入、导出 PDF文件的导出 打印表格经过技术选型，项目组一致决定通过表格组件SpreadJS 来实现。以下是实现Excel报表的导入导出、PDF导出、打印表格的一些思路，供大家参考： 环境介绍 1.后台：Spring Boot 2.x 2.前台：vue、vue-element、webpack、iview、Vuex.js 2.x 3.组件：SpreadJs V11SpreadJS 组件下载地址：https://www.grapecity.com.cn/download/?pid=57 初始化Vue项目这里，可以参考这篇技术博客： 只需3 分钟，就能创建 一个SpreadJS 的 Vue 项目 项目运行效果：如下是本地的一个Excel文件： 通过SpreadJS，导入到项目中的效果： 我的项目中应用了SpreadJS V12.2.5的版本（目前官网SpreadJS的最新版本是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 命令安装SpreadJS 组件可以参考这篇技术博客： https://www.grapecity.com.cn/blogs/spread-sheets-v11sp1-support-npm 导入导出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 ExcelIO.IO() 3. let json = this.spread.toJSON() 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 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.fromJSON(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 = JSON.stringify(self.spread.toJSON()); 4. let printSpread = new GC.Spread.Sheets.Workbook(); 5. printSpread.fromJSON(JSON.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. } 示例代码下载大家可至官网或找到身边的GrapeCity客服进行示例代码的下载，实现导出PDF、导入导出Excel功能。 SpreadJS 纯前端表格控件SpreadJS 是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性，备受以华为、招商银行、苏宁易购、天弘基金等为代表的企业用户青睐。在带来亲切的 Excel 使用体验的同时，满足 Web Excel 组件开发、数据填报、Excel 类报表设计、在线Excel 协同应用等业务场景，极大降低了企业研发成本和项目交付风险。返回搜狐，查看更多 责任编辑： |
【本文地址】
今日新闻 |
推荐新闻 |