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 的目的是 ...
随机推荐
- 学习Vue源码前的几项必要储备(二)
7项重要储备 Flow 基本语法 发布/订阅模式 ES6+ 语法 原型链.闭包 函数柯里化 event loop 接上讲 聊到了ES6的几个重要语法,加下来到第四点继续开始. 4.原型链.闭包 原型链 ...
- 爬虫系列:连接网站与解析 HTML
这篇文章是爬虫系列第三期,讲解使用 Python 连接到网站,并使用 BeautifulSoup 解析 HTML 页面. 在 Python 中我们使用 requests 库来访问目标网站,使用 Bea ...
- 【Spring Framework】Spring IOC详解及Bean生命周期详细过程
Spring IOC 首先,在此之前,我们就必须先知道什么是ioc,ioc叫做控制反转,也可以称为依赖注入(DI),实际上依赖注入是ioc的另一种说法, 1.谁控制谁?: 在以前,对象的创建和销毁都是 ...
- Spring Boot的异步任务、定时任务和邮件任务
一.异步任务 1.启动类添加注解@EnableAsync,开启异步任务注解功能: 2.需要异步执行的方法上添加@Async注解. 二.定时任务 1.启动类添加注解@EnableScheduling,开 ...
- Python初探——sklearn库中数据预处理函数fit_transform()和transform()的区别
敲<Python机器学习及实践>上的code的时候,对于数据预处理中涉及到的fit_transform()函数和transform()函数之间的区别很模糊,查阅了很多资料,这里整理一下: ...
- 『与善仁』Appium基础 — 21、元素的基本操作
目录 1.元素的基本操作说明 (1)点击操作 (2)清空操作 (3)输入操作 2.综合练习 1.元素的基本操作说明 (1)点击操作 点击操作:click()方法.(同Selenium中使用方式一致) ...
- Nginx模块之limit_conn & limit_req
limit_conn模块 生效阶段:NGX_HTTP_PREACCESS_PHASE阶段 生效范围:全部worker进程(基于共享内存),进入preaccess阶段前不生效,限制的有效性取决于key的 ...
- ts配置项
{ "compilerOptions": { /* 基本选项 */ "target": "es5", // 指定 ECMAScript 目标 ...
- hitcon_2018_children_tcache(off by null)
拿到题目例行检查 (我就不放了) 将程序放入ida中 很明显的堆的题目,然后我们进入add函数 可以看到将s复制到dest里面,说明存在off by null 漏洞 这道题目我也上网查询了师傅们的wp ...
- [BUUCTF]REVERSE——xor
xor 附件 步骤: 附件很小,直接用ida打开,根据检索得到的字符串,找到程序关键函数 程序很简单,一开始让我们输入一个长度为33的字符串给v6,然后v6从第二个字符开始与前一个字符做异或运算,得到 ...