1安装三个依赖包

npm install -S file-saver@2.0.2
npm install -S xlsx@0.15.6
npm install -D script-loader@0.7.2

2导入两个js

下载Blob.js和Export2Excel.js,在src目录下新建Excel文件夹,里面放入Blob.js和Export2Excel.js两个JS文件,下面有

 链接: https://pan.baidu.com/s/1kmpEq2If39HbHFrXdpQRPw 密码: 2694 (有这两个文件) 

3.main.js 引入文件

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

组件中使用

//导出的方法
exportExcel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../Excel/Export2Excel');//注意这个Export2Excel路径
const tHeader = ['序号', '昵称', '姓名']; // 上面设置Excel的表格第一行的标题
const filterVal = ['index', 'nickName', 'name']; // 上面的index、nickName、name是tableData里对象的属性key值
const list = this.tableData; //把要导出的数据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]))
}

5.如果报错,可能路径问题

报错信息TypeError: Cannot read property 'encode_cell' of undefined 解决方案 Export2Excel.js中引入了XLSX

  

vue基于Blob.js和 Export2Excel.js做前端导出的更多相关文章

  1. vue 纯前端导出 excel 表格

    在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...

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

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

  3. vue项目,前端导出excel

    今天研究一下前端如何导出excel,边查边实践,边记录 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还涉及不少二进制的东西 file-saver:ES5新增了相关 ...

  4. Vue实现在前端导出Excel 方法1

    也可以去看我的方法2:https://www.cnblogs.com/yingyigongzi/p/10915403.html ------------------------------------ ...

  5. Vue.js 入门:从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

  6. vue基于video.js实现视频播放暂停---切图网

    切图网是最早致力于PSD2HTML切图等web前端外包服务的,随着前端技术的更新迭代,现在也已经全面投入了vue的浪潮了,下面是vue中实现视频播放的方法. vue.js中引入video视频播放器 m ...

  7. 基于原生的 html css js php ajax做的一个 web登录和注册系统

    完整代码下载: 百度网盘地址 https://pan.baidu.com/s/1D1gqHSyjgfoOtYCZm7ofJg 提取码 :nf0b 永久有效 注意: 1 如果要正常运行此示例, 本地需要 ...

  8. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  9. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

随机推荐

  1. day28 进程(Process)

    day28 进程(Process) 1.进程的概念 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础. # 进程是系统进行 ...

  2. 大数据学习day38----数据仓库01-----区域字典的生成

    更多内容见文档 1. 区域字典的生成 mysql中有如下表格数据 现要将这类数据转换成(GEOHASH码, 省,市,区)如下所示 (1)第一步:在mysql中使用sql语句对表格数据进行整理(此处使用 ...

  3. java.sql.SQLException: Cannot create com._51doit.pojo.User: com._51doit.pojo.User Query: select * from user where username = ? and password = ? Parameters: [AA, 123]

    在从数据库中查询数据,并存入javabean中去时,报这个错误 原因:在建立User类去存储信息时没有创建无参构造方法,创建一个无参构造方法即可

  4. 最长公共子序列问题(LCS) 洛谷 P1439

    题目:P1439 [模板]最长公共子序列 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 关于LCS问题,可以通过离散化转换为LIS问题,于是就可以使用STL二分的方法O(nlogn ...

  5. MyBatis Collection小记—— 关联查询、递归查询、多字段关联

    经常会用到mybatis的Collection标签来做级联查询或递归查询,现通过一个伪例来简单的说明一下使用中的关键点: 首先先列出三个表,给出一个场景: 1,角色表 t_role( id,name ...

  6. ORACLE 服务器验证

    位于$ORACLE_HOME/network/admin/sqlnet.oraSQLNET.AUTHENTICATION_SERVICES=none|all|ntsnone:关闭操作系统认证,只能密码 ...

  7. ubuntu qq/微信

    Ubuntu qq&微信安装/启动脚本. Docker 本脚本依赖Docker,需要提前安装好Docker环境.参考https://yeasy.gitbooks.io/docker_pract ...

  8. 微信小程序第一步

    微信小程序开发文档https://developers.weixin.qq.com/miniprogram/dev/#小程序简介

  9. java多线程4:volatile关键字

    上文说到了 synchronized,那么就不得不说下 volatile关键字了,它们两者经常协同处理多线程的安全问题. volatile保证可见性 那么volatile的作用是什么呢? 在jvm运行 ...

  10. LuoguP7715 「EZEC-10」Shape 题解

    Content 有一个 \(n\times m\) 的网格,网格上的格子被涂成了白色或者黑色. 设两个点 \((x_1,y_1)\) 和 \((x_2,y_2)\),如果以下三个条件均满足: \(1\ ...