今天再开发中遇到一件事情,就是怎样用已有数据导出excel文件,网上有许多方法,有说用数据流的方式,https://www.cnblogs.com/yeqrblog/p/9758981.html,但是现在我的想法是只是用数组数据,不接著与数据流的方式去实现,事实证明是可以的:

1.安装依赖

//npm
npm install -S file-saver xlsx
npm install -D script-loader

2.在main.js中进行导入Bolb.js与Export2Excel.js

两个js文件地址:

链接:https://pan.baidu.com/s/1ib2Ox18FngVlhKxs6l8OZQ
提取码:sirm

import Blob from './excel/Blob'
import Export2Excel from './excel/Export2Excel.js'

  

3.在组件中使用

//导出的方法
exportExcel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../excel/Export2Excel');
const tHeader = ['序号', '昵称', '姓名'];
// 上面设置Excel的表格第一行的标题
const filterVal = ['index', 'nickName', 'name'];
// 上面的index、nickName、name是tableData里对象的属性
const list = this.tableData; //把data里的tableData存到list
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel');
})
}, formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))

tHeader是表头,filterVal 中的数据是表格的字段,tableData中存放表格里的数据,类型为数组,里面存放对象,表格的每一行为一个对象。

如此,就可以了。

使用vue导出excel文件的更多相关文章

  1. vue导出Excel文件

    1.需要安装file-saver和script-loader.xlsx npm install file-saver / yarn add file-saver npm install script- ...

  2. axios + vue导出excel文件

    (使用到了elementUI框架) <template> <el-button type="primary" size="mini" @cli ...

  3. 基于Vue + axios + WebApi + NPOI导出Excel文件

    一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...

  4. vue+element 表格导出Excel文件

    https://www.cnblogs.com/bobodeboke/p/8867481.html  非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...

  5. 如何使用JavaScript实现前端导入和导出excel文件

    一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...

  6. 纯前端实现数据导出excel文件

    一  安装依赖 npm install -S file-saver xlsx npm install -D script-loader 二 新建文件夹 在网上百度引入即可 三 在main.js中引入 ...

  7. ExtJS Grid导出excel文件

    ExtJS Grid导出excel文件, 需下载POI:链接:http://pan.baidu.com/s/1i3lkPhF 密码:rqbg 1.将Grid表格数据连同表格列名传到后台 2.后台导出e ...

  8. PHP从数据库导出EXCEL文件

    参考博客链接:http://www.cnblogs.com/huangcong/p/3687665.html 我的程序代码 原生导出Excel文件 <?phpheader('Content-ty ...

  9. jxl导出Excel文件

    一.java项目实现读取Excel文件和导出Excel文件 实现读取和导出Excel文件的代码: package servlet; import java.io.FileInputStream; im ...

随机推荐

  1. mysql udf提权实战测试

    根据前天对大牛们的资料学习,进行一次mysql udf提权测试. 测试环境: 受害者系统:centos 7.7 ,docker部署mysql5.6.46, IP:192.168.226.128 攻击者 ...

  2. gerrit的使用以及问题总结

    看到了一篇很好的博客,大纲如下: 链接如下: https://www.ieclipse.cn/2016/05/14/other/tech-gerrit-guide/index.html 另外一篇: 代 ...

  3. 登录-退出,在T分钟实现BC次用户登录退出,单次登录-退出%90用户时间t,需要的并发用户(线程)

    聚合报告%90响应时间:%90用户响应时小于该值 2种理解方式: 一. 1s可完成的用户1/t: T分钟完成的用户T *(1/t); BC次用户需要的线程数Thread= BC/(T*(1/t)) = ...

  4. OpenCV随机颜色,用于画图调试

    static Scalar randomColor(int64 seed) { RNG rng(seed); int icolor = (unsigned)rng; return Scalar(ico ...

  5. svn服务器端程序安装(二)

    1.下载 Setup-Subversion-1.8.9-1.msi 2. 双击,一直next (1) 修改安装地址,要求是非中文无空格 3. 安装完成后,检查是否已添加到系统的环境变量PATH中,若没 ...

  6. 基于OpenVINO的多输入model optimizer(Tensorflow)

    Step I:下载预训练模型 wget -O - https://github.com/mozilla/DeepSpeech/releases/download/v0.3.0/deepspeech-0 ...

  7. UML系列

    UML类图:https://www.cnblogs.com/shindo/p/5579191.html UML用例图:https://www.jianshu.com/p/3cde67aed8e9 UM ...

  8. 解决js 0.1 + 0.2 = 0.30000000000000004 的位数精度问题

    https://www.html.cn/archives/7340 解决办法 parseFloat((0.1 + 0.2).toFixed(10))

  9. Linux性能优化实战学习笔记:第二十六讲

    一.案例环境描述 1.环境准备 2CPU,4GB内存 预先安装docker sysstat工具 2.温馨提示 案例中 Python 应用的核心逻辑比较简单,你可能一眼就能看出问题,但实际生产环境中的源 ...

  10. [LeetCode] 48. Rotate Image 旋转图像

    You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...