vue 封装导出Excel数据的公共函数的方法

vue+element UI 封装一个导出Excel数据的公共函数

将公共方法封装在store的modules的common.js中,如下图:

代码如下:

const download = {
    actions: {
        downloadData({ commit, state }, data) {
            return new Promise((resolve, reject) => {
                data.event(data.formData).then(res => {
                    const blob = new Blob([res.data], {
                        type: 'application/vnd.ms-excel'
                    })
                    const objectUrl = URL.createObjectURL(blob)
                    const link = document.createElement('a') // 创建a标签
                    link.href = objectUrl
                    // 重命名文件
                    link.download = res.headers['content-disposition'].split(
                        '='
                    )[1]
                    link.click()
                    URL.revokeObjectURL(objectUrl)
                    resolve(res)
                }).catch((err) => {
                    reject(err)
                })
            })
        }

    }

}

export default download

然后在store的index中导出到公共模块

在需要调用方法的组件中使用

methods:{
       //导出数据的方法
        handleExport(formData) {
            this.loading = true
            const data = {
            // import { loanDownloadData } from '@/api/loan/userLoanList'
            // event: loanDownloadData, loanDownloadData是导出数据的接口的关键字
            //formData是loanDownloadData接口需要的参数
                event: '',
                formData: formData
            }
            this.$store.dispatch('downloadData', data).then(res => {
                this.loading= false
            }).catch(() => {
                this.loading = false
            })
        },

}

PS:如果接口能正常返回数据,但是接口调用时发生报错,可能是接口拦截文件返回的数据不对,首先找到utils->request.js文件中(一般情况下是放在这个位置),如下:

接口拦截的时候,如果是导出接口需要返回所有的数据,如:response,因为在common.js文件中需要用到headers重命名文件,如下

接口拦截的一般情况下只需要返回data就行,如:const res = response.data ,返回res

到此这篇关于vue 封装导出Excel数据的公共函数的文章就介绍到这了,更多相关vue 导出Excel公共函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 在Vue里如何把网页的数据导出到Excel的方法

    前言: 在做后台管理的时候,我们往往有需要把网页上面的数据导出到excel这样的需求,真实的企业项目里对应一些导出财务报表.员工信息.交易记录.考勤打卡记录-等等需求,本文将对此做探讨. 开始前补充: 网上是有些牛人已经把这个功能封装成组件了,但每个人的封装逻辑五花八门,组件的功能也很有限,不一定真能完全符合自己的业务需求,找相应的API也很麻烦,存在不太敢用,不会用等问题,那么本文将教你如何自己封装,如何自己自定义相关功能,如何自定义Excel的样式 ,尤其是导出excel后自定义样式,这在一

  • Vue+axios+WebApi+NPOI导出Excel文件实例方法

    一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页(如会员信息,订单信息等)表格数据导出,如表格数据进行了条件筛选,则需要将条件传至后端api,筛选数据后,导出成Excel. 思考过前端导出的3种方案: 1.使用location.href 打开接口地址.缺点: 不能传token至后端api, 无法保证接口的安全性校验,并且接口只能是get方式请求.

  • vue+element表格导出为Excel文件

    本文实例为大家分享了vue+element表格导出为Excel文件的具体代码,供大家参考,具体内容如下 安装这三个依赖 npm install xlsx file-saver -S npm install script-loader -S -D 组件代码 <template> <div> <el-button type="primary" @click="exportExcel">导出文件</el-button> &l

  • vue中后端做Excel导出功能返回数据流前端的处理操作

    项目中有一个导出功能的实现,用博客来记录一下.因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来. 先看下效果图: 页面效果: 点击 导出Excel 调用导出接口成功了: 后台返回的数据流,一堆看不懂的乱码: 接下来要处理这堆乱码,因为用到的地方多,所以在util.js文件里封装了一个公共方法并抛出: 虽然vue里有封装好的请求接口的方法,但这里要单独用axios,所以先在util.js里引入axios import

  • 详解如何在Vue项目中导出Excel

    Excel 导出 Excel 的导入导出都是依赖于js-xlsx来实现的. 在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据. 使用 由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader. 所以你先需要安装如下命令: npm install xlsx file-saver -S npm install script-loader -S -D 由于js-xlsx体积还是很大的,导出功能也不是一个非常常用的功能,所以

  • Vue前端导出Excel文件的详细实现方案

    目录 一.技术选型 二.技术实现 使用 vue-json-excel 插件实现 1.安装 vue-json-excel 依赖 2.注册插件到 vue 实例 3.使用方式 基于 sheetJS-xlsx 解析器的 xlsx-style 实现(推荐) 1.安装依赖 2.使用方法 三.参考资料 总结 一.技术选型 1.使用 vue-json-excel 插件实现 优点:简单便捷,易上手,开箱即用: 缺点:不支持 excel 表格样式设置,且支持功能比较单一: 2.基于 sheetJS-xlsx 解析器

  • Vue结合后台导入导出Excel问题详解

    最近Vue项目中用到了导入导出功能,在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录. 导出Excel功能 这里不谈别人怎么实现的,我是从后台生成了Excel流文件返回给前端的. 下面具体看一下后台的代码: /** * 批量导出用户 * @param condition * @param response */ @PostMapping("/exportUser") public void exportUser(@RequestBody UserQu

  • Vue实现导出excel表格功能

    引言: 最近使用vue在做一个后台系统,技术栈 vue + iView ,在页面中生成表格后, iView可以实现表格的导出,不过只能导出csv格式的,并不适合项目需求. 如果想要导出Excel 在src目录下创建一个文件(vendor)进入 Blob.js 和 Export2Excel.js npm install -S file-saver 用来生成文件的web应用程序 npm install -S xlsx 电子表格格式的解析器 npm install -D script-loader 将

  • vue中导出Excel表格的实现代码

    项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体对待. 1.首先我们需要安装3个依赖,file-saver.xlsx和script-loader. 使用npm安装: npm install file-saver xlsx -S npm install script-loader -D 使用yarn安装: yarn add file-saver xlsx -S yarn ad

  • 基于Vue实现Excel解析与导出功能详解

    目录 前言 基本介绍 代码实现 基本结构 上传解析 Excel的导出 基本结构 导出Excel 总结 前言 最近在整理日常开发中长涉及到的业务需求,正好想到了excel的解析与上传方面的事情,在开发中还是比较常见的,趁着周末做一下整理学习吧 基本介绍 主要基于Vue+element实现文件的解析与导出,用的的插件是 xlsx,里面的具体方法,感兴趣的去研究一下,基本的样式,配置就不赘述了,也比较简单,我们直接上主食 代码实现 基本结构 用户点击文件上传,将excel的表格已json的格式显示在页

随机推荐