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. Mybatis相关知识点(二)

    Mybatis解决jdbc编程的问题 1. 数据库连接创建.释放频繁造成系统资源浪费从而影响系统性能,如果使用数据库连接池可解决此问题. 解决:在SqlMapConfig.xml中配置数据连接池,使用 ...

  2. 在JTable单元格上 加入组件,并赋予可编辑能力 [转]

    表格(单元格放置组件) 对于JTable单元格的渲染主要是通过两个接口来实现的,一个是TableCellRenderer另一个是TableCellEditor,JTable默认是用的是DefaultC ...

  3. 自定义控件CustomAlertView

    [记录][完整代码最下] 效果如下: 可行性分析: 由于系统自带的UIAlertView样式简单,只有两种样式,想要理想的样式就要自定义控件了 文件名取为:CustomAlertView 创建文件如下 ...

  4. Oracle trunc和round的区别

    1.关于trunc 和round函数比较 整体概括: round函数 四舍五入trunc函数 直接截取 对于时间: Round函数对日期进行"四舍五入",Trunc函数对日期进行截 ...

  5. Javaj基础知识runtime error

    遇到的java 运行时错误: NullPointerException空指针  ,简单地说就是调用了未经初始化的对象或者是不存在的对象,这个错误经常出现在创建图片,调用数组这些操作中,比如图片未经初始 ...

  6. 简单的Spring Boot项目——实现连接Mysql数据库

    一.创建Spring Boot项目 参考:使用IntelliJ IDEA创建简单的Spring Boot项目 二.数据库.表的创建 三.项目开发 3.1 pom.xml文件配置 <?xml ve ...

  7. 2.使用Lucene开发自己的搜索引擎–indexer索引程序中基本类介绍

    (1)Directory:Directory类描述了Lucene索引的存放位置,它是一个抽象,其子类负责具体制定索引的存储路径.FSDirectory.open方法来获取真实文件在文件系统中的存储路径 ...

  8. vivo浏览器的快速开发平台实践-总览篇

    一.什么是快速开发平台 快速开发平台,顾名思义就是可以使得开发更为快速的开发平台,是提高团队开发效率的生产力工具.近一两年,国内很多公司越来越注重研发效能的度量和提升,基于软件开发的特点,覆盖管理和优 ...

  9. live2d

    原文来自https://www.fghrsh.net/post/123.html Live2D 看板娘 v1.4 / Demo 3 - 内置 waifu-tips.json (博客园等网站引用推荐) ...

  10. MH/T4029.3 IFPL报文解析

    MH/T4029.3是民航业用来规定飞行计划相关数据交互的规范,今天我们先来解析下其中I类的IFPL报文. 我们先来看看IFPL报文长啥样. ZCZC -TITLE IFPL -FILTIM 0109 ...