在开发后台管理系统的时候,很多地方都要用到导出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 表格的更多相关文章

  1. vue实现前端导出excel表格

    1.在src目录下创建一个文件(vendor)进入Blob.js和Export2Excel.js 2.npm install -S file-saver 用来生成文件的web应用程序 3.npm in ...

  2. 纯前端导出Excel表格

    <html> <head> <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件 ...

  3. H5纯前端生成Excel表格

    H5纯前端生成Excel表格方法如下: <!DOCTYPE html> <html> <head> <title></title> < ...

  4. 前端导出excel表格

    前言近期项目有个新需求--将折线图表的数据加一个下载成excel表格的功能.以前下载功能都是调后台接口的,但是这个迭代,后台压力比较重,部分就交给了前端自己实现,下面就记录一下前端如何实现excel表 ...

  5. vue页面原样导出excel表格

    github地址:https://github.com/wuzhiaite/vue-samples 1.excel导出 做过业务系统的知道,进行涉及到excel的导出,列表数据动则几十万,但是也有一部 ...

  6. 使用javascript纯前端导出excel

    前言(感谢技术的分享者) 参考博客地址 github地址 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls.xlsx ...

  7. 基于纯前端类Excel表格控件实现在线损益表应用

    财务报表也称对外会计报表,是会计主体对外提供的反映企业或预算单位一定时期资金.利润状况的会计报表,由资产负债表.损益表.现金流量表或财务状况变动表.附表和附注构成.财务报表是财务报告的主要部分,不包括 ...

  8. js前端导出Excel表格后数字自动变成科学计数法问题

    一般的文件导出都是后端进行导出,最近一个项目遇到导出接口挂掉了,前端实现导出的情况. 背景是vue框架,iView组件.可以直接使用exportCsv方法进行导出. 导出时进行一下行和列的切割就可以了 ...

  9. 一篇带你了解如何使用纯前端类Excel表格构建现金流量表

    现金流量表(Cash Flow Statement),是指反映企业在一定会计期间现金和现金等价物流入和流出的报表.现金流量表是企业财务报表的三个基本报告之一(另外两个是资产负债表和损益表). 为了全面 ...

随机推荐

  1. 【记录】ajax 设置请求header的Content-Type 为 application/json;charset=utf8

    具体案例如下 $.ajax({ url: context.state.IpccSendIm, method: 'POST', data: JSON.stringify(val), headers:{' ...

  2. ipv6地址在URL中的表达方式,如何在URL地址中包含ipv6地址

    摘要 本文档定义了在WWW浏览器的URL中执行的文本IPv6地址的格式.在包括Microsoft的IE,Mozilla和Lynx等几个已经被广泛安装使用的浏览器的IPv6版本中,这种格式已经被使用.并 ...

  3. ansible笔记(二)--配置文件详解

    配置文件ansible.cfg约有350行语句,大多数为注释行默认配置项.该文件遵循INI格式,分为如下几类配置.(1)[defaults] [defaults] # inventory = /etc ...

  4. HTML5 canvas绘制文本

    demo.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset=" ...

  5. 如何解决拖拽或者缩放、移动中的组件canvas有残留情况

    当我们在做某些需求,如要拖动echarts图表,或者放大缩小 这个时候,有时连续操作,或者在ie或者内存只有8G的电脑上就会出现canvs残留的情况 我们移动的时候,使用的是transform去做的移 ...

  6. 用setInterval方法实现弹框闪烁

    每次看到某电商平台的拼团提示会觉得很有趣也很方便,正好自己在学习小程序,那就想个法子实现一下这种效果咯~思虑了一下还是觉得用setIntercal方法比较简便(数据方面就先不考虑了,我这里只做一下表现 ...

  7. 箭头函数以及this指向问题

    一.定义函数的方式 //1.function const aaa = function () { } //2.对象字面量中定义函数 const obj = { bbb() { } } //3.ES6中 ...

  8. 直击KubeCon 2018 |云原生正在改变你的衣食住行

    云计算从不被看好到成长为势不可挡的技术潮流,仅仅用了十年的时间.如今“云原生”又被企业以及开发者奉为圭臬,并被认为是云计算的未来. 阿里云容器技术负责人易立认为云计算有三个阶段:云搬迁.云就绪和云原生 ...

  9. 【Flutter学习】基本组件之Webview组件

    1.添加依赖 dependencies: flutter_webview_plugin: ^+ 2.导入库 import 'import 'package:flutter_webview_plugin ...

  10. 【Linux】服务器间免密登录、免确认机器指纹

    1.生成密钥 ssh-keygen -t rsa -C "<填写自己方便识别的注释>" -b 4096  没什么问题就执行三次空格. 三次问题是1.填入生成密钥对的路径 ...