彩票走势图

一篇文章详解:Vue框架下轻松实现Excel、PDF导出

转帖|使用教程|编辑:龚雪|2020-12-15 10:45:41.730|阅读 467 次

概述:SpreadJS能帮助开发者实现Excel报表的导入导出、PDF导出、打印表格等,欢迎下载最新版体验!

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

SpreadJS v14.0正式版下载

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

  • Excel报表的导入、导出
  • PDF文件的导出
  • 打印表格

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

环境介绍
  1. 后台:Spring Boot 2.x
  2. 前台:vue、vue-element、webpack、iview、Vuex.js 2.x
  3. 组件:SpreadJS v11

SpreadJS 组件下载地址://pclwef.cn/product/3558/download

项目运行效果:

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

SpreadJS使用教程

通过SpreadJS,导入到项目中的效果:

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报表
  1. 安装相关的资源包: "\@grapecity/spread-excelio"、 "file-saver"
  2. 在页面中引入: import ExcelIO from '\@grapecity/spread-excelio'、import FaverSaver from 'file-saver'
  3. 如下代码可实现导入导出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的注意事项
  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功能

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 | 下载试用

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

本文转载自

购正版SpreadJS报表控件授权限时优惠!最高立减万元!点击


慧都2020年终大促

标签:

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

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP