今天再开发中遇到一件事情,就是怎样用已有数据导出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. 201871020225-牟星源《面向对象程序设计(java)》第七周学习总结

    201871020225-牟星源<面向对象程序设计(java)>第七周学习总结 博文正文开头: 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu- ...

  2. django学习-数据库配置-创建模型

    数据库配置 在mysite/settings.py中,包含了django项目设置的python模块 通常,这个配置文件使用SQLite作为默认数据库.如果你不熟悉数据库,或者只是想尝试下django, ...

  3. USACO Building Roads

    洛谷 P2872 [USACO07DEC]道路建设Building Roads 洛谷传送门 JDOJ 2546: USACO 2007 Dec Silver 2.Building Roads JDOJ ...

  4. TensorFlow.js入门:一维向量的学习

    转载自:https://blog.csdn.net/weixin_34061042/article/details/89700664 一维向量及其运算 tensor 是 TensorFlow.js 的 ...

  5. requests--重定向,序列化

    重定向 默认情况下,除了 HEAD, Requests 会自动处理所有重定向.可以使用响应对象的 history 方法来追踪重定向. Response.history 是一个 Response 对象的 ...

  6. [LeetCode] 154. Find Minimum in Rotated Sorted Array II 寻找旋转有序数组的最小值之二

      Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i. ...

  7. oracle--介质恢复和实例恢复的基本概念

    1.概念 REDO LOG是Oracle为确保已经提交的事务不会丢失而建立的一个机制.实际上REDO LOG的存在是为两种场景准备的,一种我们称之为实例恢复(INSTANCE RECOVERY),一种 ...

  8. Django中render_to_response和render的区别(转载)

    转载地址:https://www.douban.com/note/278152737/ 自django1.3开始:render()方法是render_to_response的一个崭新的快捷方式,前者会 ...

  9. 第三次实验报告:使用Packet Tracer分析TCP连接建立过程

    目录 1 实验目的 2 实验内容 3. 实验报告 3.1 建立网络拓扑结构 3.2 配置参数 3.3 抓包,分析TCP连接建立过程 4. 拓展 (不作要求,但属于加分项) 1 实验目的 使用路由器连接 ...

  10. this的用法-(2019-3)

    作为前端程序员,this应该不会陌生,指执行期的上下文,以下总结了this的几种场景: 1.全局作用域下,this指的就是Window,在控制台输出this,返回的是Window对象 2.在一般函数中 ...