vue 纯前端导出 excel 表格
在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案:
一、后端开发一个下载链接,前端将这个链接放到 a 标签的 href 中,一点就能下载。
优点:对于前端来说实现简单,不用写过多的代码,也不依赖第三方库,兼容性好
缺点:如果前端操作数据更改了,需要发给后端才能导出
二、前端借助一些第三方库实现
下面以vue项目为例:
首先需要安装三个依赖
npm install file-saver xlsx -S
// 加载script 需要
npm install script-loader -D
或者使用 yarn 安装
yarn add file-saver xlsx -S
yarn add script-loader -D
在 /src 目录下新建 vendor文件夹,用于存放 Blob.js 和 Export2Excel.js 文件,这两个文件可以再 CSDN上下载,当然如果没有积分的 可以去我的 gitHub上下载。
注意:如果不叫 vendor 名字,则需要修改 Export2Excel.js 中的代码。
配置webpack,这里使用的是 vue-cli 2.9 搭建的项目,如果使用vue-cli3 请自行百度
在 /build/webpack.base.config.js 的resolve 模块中添加一个别名
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'vendor': path.resolve(__dirname, 'src/vendor') // 添加一个别名
}
}
那么接下来就是在vue项目中使用就行了
<template>
<div :class="$options.name">
<button @click="exportExcel">导出表格</button>
</div>
</template> <script>
export default {
name: 'export',
data() {
return {
loading: false
};
},
methods: {
exportExcel() {
let sourceOriginAmount = [
{
goodsName: '苹果',
sourceCode: '123'
},
{
goodsName: '香蕉',
sourceCode: '234'
}
]; // 需要导出的数据,可以动态获取
this.loading = true; // 设置一个loading,生成Excel需要时间
import('@/vendor/Export2Excel.js').then(excel => { // 导入js模块
const tHeader = ['编号', '商品名称', '溯源码']; // 导出excel 的标题
const filterVal = ['index', 'goodsName', 'sourceCode']; // 每个标题对应的字段 const list = (sourceOriginAmount || []).map((item, key) => { // 通过 map 方法遍历,组装数据成上面的格式
return {
index: key + 1,
goodsName: item.goodsName,
sourceCode: item.key
};
}); if (list) {
const data = this.formatJson(filterVal, list); // 生成json数据
excel.export_json_to_excel({ // 调用excel方法生成表格
header: tHeader,
data,
filename: this.goodsName
});
} else {
alert('暂无无数据');
}
this.loading = false;
})
},
formatJson (filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
}
}
};
</script>
可以参考 iview 组件库中的 table 表格 https://www.iviewui.com/components/table#DCcsv
兼容性,据测试,IE9以上都支持,但是在IE9上导出中文会有乱码,如果项目不要求兼容到IE9以下,且数据量不大的情况下可以考虑使用前端方法。
vue 纯前端导出 excel 表格的更多相关文章
- vue实现前端导出excel表格
1.在src目录下创建一个文件(vendor)进入Blob.js和Export2Excel.js 2.npm install -S file-saver 用来生成文件的web应用程序 3.npm in ...
- 纯前端导出Excel表格
<html> <head> <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件 ...
- H5纯前端生成Excel表格
H5纯前端生成Excel表格方法如下: <!DOCTYPE html> <html> <head> <title></title> < ...
- 前端导出excel表格
前言近期项目有个新需求--将折线图表的数据加一个下载成excel表格的功能.以前下载功能都是调后台接口的,但是这个迭代,后台压力比较重,部分就交给了前端自己实现,下面就记录一下前端如何实现excel表 ...
- vue页面原样导出excel表格
github地址:https://github.com/wuzhiaite/vue-samples 1.excel导出 做过业务系统的知道,进行涉及到excel的导出,列表数据动则几十万,但是也有一部 ...
- 使用javascript纯前端导出excel
前言(感谢技术的分享者) 参考博客地址 github地址 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls.xlsx ...
- 基于纯前端类Excel表格控件实现在线损益表应用
财务报表也称对外会计报表,是会计主体对外提供的反映企业或预算单位一定时期资金.利润状况的会计报表,由资产负债表.损益表.现金流量表或财务状况变动表.附表和附注构成.财务报表是财务报告的主要部分,不包括 ...
- js前端导出Excel表格后数字自动变成科学计数法问题
一般的文件导出都是后端进行导出,最近一个项目遇到导出接口挂掉了,前端实现导出的情况. 背景是vue框架,iView组件.可以直接使用exportCsv方法进行导出. 导出时进行一下行和列的切割就可以了 ...
- 一篇带你了解如何使用纯前端类Excel表格构建现金流量表
现金流量表(Cash Flow Statement),是指反映企业在一定会计期间现金和现金等价物流入和流出的报表.现金流量表是企业财务报表的三个基本报告之一(另外两个是资产负债表和损益表). 为了全面 ...
随机推荐
- CSS中的伪元素选择器
定义 伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter.::before 和::after E::first-letter文本的第一个单词或字(如中文 ...
- 全文检索引擎sphinx 与 Elasticsearch 索引速度对比
sphinx的特色之一是建立索引速度快,最近转投Elasticsearch后,一直想做个对比,网上资料常见说法是10倍的差距. 测试环境 硬件:单核,2G内存的E5-2630 虚拟机 操作系统:Cen ...
- 基于TI 多核DSP 的大数据智能计算处理解决方案
北京太速科技有限公司 大数据智能计算,是未来的一个发展趋势,大数据计算系统主要完成数据的存储和管理:数据的检索与智能计算. 特别是在智能城市领域,由于人口聚集给城市带来了交通.医疗.建筑等各方面的压力 ...
- Git--03 git分支
目录 Git分支 1.新建testing分支 2.合并分支 3.合并冲突 4.删除分支 Git标签使用 1.查看标签 02.删除标签 Git分支 分支即是平行空间,假设你在为某个手机系统研发拍照功 ...
- hdu1210Eddy's 洗牌问题
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1210 Eddy是个ACMer,他不仅喜欢做ACM题,而且对于纸牌也有一定的研究,他在无聊时研究发现,如 ...
- ivew-admin 校验 自定义验证表单多层嵌套
1.prop=对象 <FormItem label=" prop="shapeDifference.heightSpaceT2"> <Input v-m ...
- vue新建项目之饿了么组件标准配置
main.js import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui'; import ...
- bzoj4455 & loj2091 [Zjoi2016]小星星 容斥原理+树形DP(+状压DP?)
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4455 https://loj.ac/problem/2091 题解 很不错的一道题.(不过在当 ...
- 线程中的sleep()、join()、yield()方法有什么区别?
sleep().join().yield()有什么区别? sleep() sleep() 方法需要指定等待的时间,它可以让当前正在执行的线程在指定的时间内暂停执行,进入阻塞状态,该方法既可以让其他同优 ...
- 【leetcode】399. Evaluate Division
题目如下: Equations are given in the format A / B = k, whereA and B are variables represented as strings ...