方法一、vue+js-xlsx

1.vue项目内安装两个依赖：xlsx、file-saver
npm install xlsx --save
npm install file-saver --save
2.组件中引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
3.组件代码

定义一个按钮来触发导出事件；
使用elementUI的表格格式，<el-table>要定义一个id:table-content；
写两个方法实现导出功能 exportToExcel()、printContent()）

<template><el-button @click="exportToExcel">导出Excel</el-button><el-table  :data="tableData3"  style="width: 100%" id="table-content"><el-table-column  prop="date"  label="日期"  width="150"></el-table-column><el-table-column label="配送信息"><el-table-column  prop="name"  label="姓名"  width="120"></el-table-column><el-table-column label="地址"><el-table-column  prop="province"  label="省份"  width="120"></el-table-column><el-table-column  prop="city"  label="市区"  width="120"></el-table-column><el-table-column  prop="address"  label="地址"  width="300"></el-table-column><el-table-column  prop="zip" label="邮编"  width="120"></el-table-column></el-table-column></el-table-column></el-table>
</template><script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'export default {data() {return {tableData3: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}]}},methods:{
exportToExcel () {let et = XLSX.utils.table_to_book(document.getElementById('table-content')); //document.getElementById('xxxx'):XXX此处传入table的DOM节点，即el-table的id名称let etout = XLSX.write(et, {bookType: 'xlsx', bookSST: true, type: 'array' });try {FileSaver.saveAs(new Blob([etout], { type: 'application/octet-stream' }), 'table.xlsx');   //XXX.xlsx 为导出的文件名} catch (e) {console.log(e, etout) ;}return etout;
},
//打印页面内容
printContent(){let wpt = document.getElementById('table-content');let newContent = wpt.innerHTML;let oldContent = document.body.innerHTML;document.body.innerHTML = newContent;window.print(); //打印方法window.localtion.reload();document.body.innerHTML = oldContent;
}
}}
</script><script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'export default {data() {return {tableData3: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}]}},methods:{
exportToExcel () {let et = XLSX.utils.table_to_book(document.getElementById('table-content')); //document.getElementById('xxxx'):XXX此处传入table的DOM节点，即el-table的id名称let etout = XLSX.write(et, {bookType: 'xlsx', bookSST: true, type: 'array' });try {FileSaver.saveAs(new Blob([etout], { type: 'application/octet-stream' }), 'table.xlsx');   //XXX.xlsx 为导出的文件名} catch (e) {console.log(e, etout) ;}return etout;
},
//打印页面内容
printContent(){let wpt = document.getElementById('table-content');let newContent = wpt.innerHTML;let oldContent = document.body.innerHTML;document.body.innerHTML = newContent;window.print(); //打印方法window.localtion.reload();document.body.innerHTML = oldContent;
}
}}
</script>

·效果：样式普通，若增加样式需要手写样式文件及插件，导入引用，后期修改麻烦。

方法二、node.js+ejsExcel

1.git下载插件代码

https://github.com/sail-sail/ejsExcel
http://git.oschina.net/ccteams/ejsExcel

2.安装模块依赖

npm install ejsexcel

3.执行 test/test.bat

·效果：先做好excel模板，然后往模板中填充数据，生成后下载。后期模板修改比较方便，直接修改模板excel就可以。

附上该模块作者信息（作者人很nice，有问题在Q群中提问，都会很及时解答）：

Auto: Sail 黄智勇

QQ：151263555

Q群：470988427

Email：151263555@qq.com

CSDN原文：https://blog.csdn.net/f1gh151263/article/details/51740705

segmentfault社区详细文档：https://segmentfault.com/a/1190000012992783

方法三、基于jQuery的table2excel

1.下载相关插件

jquery-3.3.1.min.js、jquery.table2excel.js

2.HTML引用js文件(D2Admin框架中的引用插件路径：..\Marketregulation\public\index.html)

并将文件放到对应路径下

3.组件内：

定义一个按钮来触发导出事件；
使用elementUI的表格格式，<el-table>要定义一个id:table-content；
在js中写exportToExcel()方法实现导出功能

methods:{
exportToExcel(){
$("#tblExport").table2excel({
exclude : ".noExl", //过滤位置的 css 类名
filename : "导出excel表-" + new Date().getTime() + ".xls" //文件名称
});
}
}

4.若想修改导出的excel样式设置，直接修改jquery.table2excel.js脚本文件即可

找到脚本的mid: 加入样式代码'<style type="text/css"> ... </style>'

node.js/VUE项目中导出excel表格的多种实现方法（D2admin适用）相关推荐

在VUE项目中导出excel——简单使用xlsx
在大量的项目开发和使用过程中,我们经常会遇到需要将某些数据导出为excel的操作,这里介绍一个很简单的导出方案--xlsx... 插件安装网络好就直接使用 npm install xlsx -S 网 ...
vue中导出Excel表格
vue中导出Excel表格项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体 ...
Node.js：项目中的 package.json 格式
1. node.js 项目包下的 package.json : 实例: {"name" : "chatroooms","version" : ...
计算机表格增加,电脑中给Excel表格添加水印效果的方法
相信不少朋友在日常办公中,都会使用Excel软件,它的功能十分强大,能够帮着我们很好地完成数据统计工作.那么,excel打印过程中需要设置水印的话怎么做呢?这里,系统城小编给大家分享一下电脑中设置ex ...
vue 微信公众号支付接口_总结vue项目中使用微信公众号支付的方法
本篇文章给大家带来的内容是总结vue项目中使用微信公众号支付的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档 ...
vue项目前端导出xlsx表格带边框
最近项目中要求不再通过发送请求导出excel表格了,于是在网上找了找方法,在这记录一下方便以后查阅一.首先先在项目中安装这几个包 npm install xlsx --save npm instal ...
Extjs 从grid中导出Excel表格。后台为C#（绝对好用）（按照自己的需求修改版本）...
最近生成Excel表格,稍微得到一点新的体会,特此更新自己开发时候的版本. 开发工具:VS2005 数据库:oracle10.1 浏览器:firefox3.5.9 第一步,web层aspx文件需要载 ...
VUE纯前端导出excel表格功能《转载》
插件:使用vue-json-excel插件实现Vue纯前端导出简单的Excel表格功能. 使用方法 1. 安装依赖 npm install vue-json-excel 2. 引入组件 a. 全局引入 ...
ag-grid-angular 中导出Excel表格及其配置
ag-grid-angular 中导出Excel表及其配置 api 常用params 详解自定义页眉和页脚定义样式样式参数详解 api exportDataAsExcel(params) 常用 ...

node.js/VUE项目中导出excel表格的多种实现方法（D2admin适用）

方法一、vue+js-xlsx

方法二、node.js+ejsExcel

方法三、基于jQuery的table2excel

node.js/VUE项目中导出excel表格的多种实现方法（D2admin适用）相关推荐

最新文章

热门文章