vue基于Blob.js和 Export2Excel.js做前端导出
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做前端导出的更多相关文章
- vue 纯前端导出 excel 表格
在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...
- vue实现前端导出excel表格
1.在src目录下创建一个文件(vendor)进入Blob.js和Export2Excel.js 2.npm install -S file-saver 用来生成文件的web应用程序 3.npm in ...
- vue项目,前端导出excel
今天研究一下前端如何导出excel,边查边实践,边记录 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还涉及不少二进制的东西 file-saver:ES5新增了相关 ...
- Vue实现在前端导出Excel 方法1
也可以去看我的方法2:https://www.cnblogs.com/yingyigongzi/p/10915403.html ------------------------------------ ...
- Vue.js 入门:从零开始做一个极简 To-Do 应用
Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言 学习 Vue ...
- vue基于video.js实现视频播放暂停---切图网
切图网是最早致力于PSD2HTML切图等web前端外包服务的,随着前端技术的更新迭代,现在也已经全面投入了vue的浪潮了,下面是vue中实现视频播放的方法. vue.js中引入video视频播放器 m ...
- 基于原生的 html css js php ajax做的一个 web登录和注册系统
完整代码下载: 百度网盘地址 https://pan.baidu.com/s/1D1gqHSyjgfoOtYCZm7ofJg 提取码 :nf0b 永久有效 注意: 1 如果要正常运行此示例, 本地需要 ...
- h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片
得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...
- 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 的目的是 ...
随机推荐
- Zookeeper之创建组,加入组,列出组成员和删除组
public class CreateGroup implements Watcher { private static final int SESSION_TIMEOUT=5000; //ZooKe ...
- midi的一些概念,包括一些音乐的概念
参考:http://www.yueqixuexi.com/jita/20180918205363.html https://blog.csdn.net/meicheng777/article/deta ...
- AOP与IOC的概念
AOP与IOC的概念(即spring的核心) a) IOC:Spring是开源框架,使用框架可以使我们减少工作量,提高工作效率并且它是分层结构,即相对应的层处理对应的业务逻辑,减少代码的耦合度.而sp ...
- ORACLE CACHE BUFFER CHAINS原理
原理图如下: 一个cache buffer chains 管理多个hash bucket,受隐含参数:_db_block_hash_buckets(控制管理几个hash bucket)
- hadoop accesscontrolException
DFS loaction: /tmp 文件下的 hadoop-haoop/mapred/system报 AccessControlException. 解决: bin/hadoop fs -chmod ...
- 登录界面.jsp
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...
- ubuntu 16.04下的fastadmin安装指南
此篇博客转载于fastadmin论坛,方便自己看转到了博客里 说明文档不多,特制作一个,方便大家交流使用Ubuntu 16.04 安装fastadmin指南本文因考虑到大多数人员,习惯性在window ...
- Android系统编程入门系列之硬件交互——多媒体展示
前两篇文章通过麦克风硬件和摄像头硬件分别采集音频和视频的多媒体数据,在得到的多媒体数据通常是以编码文件的格式存储,在用户需要展示时,可通过设备的内置扩音器或蓝牙耳机等硬件播放音频,通过设备的显示屏或外 ...
- [BUUCTF]PWN——jarvisoj_level3_x64
jarvisoj_level3_x64 附件 步骤: 例行检查,64位程序,开启了nx保护 试运行一下程序,看看大概的情况 64位ida载入,习惯性的检索字符串,没有发现可以直接利用的system,估 ...
- Docker从入门到精通(八)——Docker Compose
恭喜大家,学到这里,对于 docker 的基础玩法大家应该都会了,下面会介绍 docker的一些编排工具. 1.为什么需要 Docker Compose? 官网镇楼:https://www.runoo ...
