Vue导出excel文件

<template><div><el-button size="mini" type="primary" @click="exportData">导出</el-button></div>
</template>

在methods里面定义方法

exportData(){this.$loading({ fullscreen: true, lock: true, text: '拼命加载中...' })//以下是接口调用sjzp.downloadBillExcel(checkObjectPropEmpty(param)).then((response) => {this.$loading().close()//调用 new FileReader 对象的方法let reader = new FileReader()reader.readAsText(response.data, 'utf-8')reader.onload = (e) => {try {const response = JSON.parse(reader.result)this.$message({showClose: true,message: response.errMsg || '导出失败',type: 'error'})} catch (e) {let filename =response.headers['content-disposition'].split('filename=')[1]filename = decodeURI(decodeURI(filename))download(response.data, filename, 'text/plain')}}})
}

方法名参数描述

abort none 中断读取

readAsBinaryString file 将文件读取为二进制，通常我们将它传递到后端，后端可以通过这段字符串存储文件。

readAsDataURL file 将文件读取为一段以data开头的字符串，这个字符串实质上就是DataURL,DataURL是一种直接将小文件嵌入文档的方案，这里的小文件通常是指图像与html等格式的文件。

readAsText file , 'utf-8' 将文件读取为文本，该方法有2个参数第二个是文本的编码方式，默认值为'utf-8'。

事件描述

onabort 中断时触发

onerror 出错时触发

onload 文件读取成功完成时触发

onloadend 文件读取完成时触发，无论成功还是失败

onloadstart 读取开始时触发

onprogress 读取中

Vue导出excel文件相关推荐

(vue)vue导出excel文件打不开，或者文件内容为object object
(vue)vue导出excel文件打不开,或者文件内容为object object[已解决] bug: 主要原因:没有注意到后端返回的数据格式,需要的是res而不是res.data 正确写法: < ...
vue导出excel加一个进度条_使用vue导出excel文件
今天再开发中遇到一件事情,就是怎样用已有数据导出excel文件,网上有许多方法,有说用数据流的方式,https://www.cnblogs.com/yeqrblog/p/9758981.html,但是 ...
vue 导出excel文件利用 excelJs插件
用excelJs导出excel文件没有咋整理发布出来是怕自己忘了咋写 exportExcel() {if (this.data.length == 0) {this.$message.error(& ...
vue导出excel文件损坏
vue从后台导出二进制流, 下载后提示文件损坏导出时需要注意返回的数据一定要是二进制流, 使用以下代码导出返回流 export function downloadFile(obj, name, su ...
Vue+iview实现自定义格式导出Excel文件
背景:项目中要实现一个导出Excel文件模板的功能,原来实现是通过后台生成然后前端请求下载,这样要消耗IO资源,然后看了一下之前项目的导出功能,发现原来Vue+iview可以实现本地数据导出,不过iv ...
在vue中把数据导出Excel文件
在vue中把数据导出Excel文件第一次尝试写文章在vue中把数据导出成Excel格式的文件,话不多,上代码: 第一步我们要先安装几个集成的插件 npm install -S file-saver ...
Vue前端表格导出Excel文件
前言分享一个Vue前端导出Excel文件的方法.记录学习! 功能需求:将表格的全部数据导出Excel格式的文件前端:Vue3+Element-Plus 这个导出方法全部为前端操作,后端只需要传入表 ...
h5页面如何预览excel文件_如何使用JavaScript实现前端导入和导出excel文件?(H5编辑器实战复盘)...
前言最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)
前言最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
vue导出excel加一个进度条_vue 实现Excel 导入导出功能
第一步:安装依赖使用npm: npm install -S file-saver xlsx(这里其实安装了2个依赖) npm install -D script-loader 或使用yarn: ya ...

Vue导出excel文件

方法名参数描述

事件描述

Vue导出excel文件相关推荐

最新文章

热门文章

Vue导出excel文件

方法名 参数 描述

事件 描述

Vue导出excel文件相关推荐

最新文章

热门文章

方法名参数描述

事件描述