Vue导出Excel数据表格

这两天在做一个有关Vue框架导出Excel数据表格的项目练习，因为之前并未写过有关导出功能的练习，所以有感而发记录一下，也请各位一起共同各抒己见。（这是我第一次写博客，不足之处敬请指教）

我的情况是后端已完成相关数据筛选，并可以用swagger完成Excel表格导出，前端请求之后后端会返回乱码，这个应该是转码的原因。然后我在网上找了一下相关网友的经验分享，有篇文章感觉就是我的当下情况，（真的很抱歉，原文我找不到了，在谷歌浏览器上找历史记录发现昨天的浏览记录并未保存，真的很抱歉，如果感觉有侵权行为，原作者看到后麻烦提醒一下我立刻删除文章），然后我就按照文章的流程过了一遍，最后成功了。

我感觉最重要的代码块先分享给大家（这部分是人家写好的我是直接拿来用的）

import axios from 'axios'   //首先需要导入axios//接下来这部分主要求是为了发送请求而进行的处理还有对文章格式的规范
export function exportMethod(data) {axios({method: data.method,url: `${data.url}${data.params ? '?' + data.params : ''}`,responseType: 'blob'}).then((res) => {const link = document.createElement('a')let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })link.style.display = 'none'link.href = URL.createObjectURL(blob)// link.download = res.headers['content-disposition'] //下载后文件名link.download = data.fileName //下载的文件名document.body.appendChild(link)link.click()document.body.removeChild(link)}).catch(error => {this.$message.error("网络连接异常")console.log(error)})
}

代码的这部分我是单独放在了一个util.js文件夹里，并在我使用导出功能的页面引入了此文件

import { exportMethod } from "@/util";

接下来就是通过在此页面使用上述util.js里的exportMethod方法

其实使用这个exportMethod方法，在我完成之后才发现是有技巧的

 let myObj = {//封装对象method: "get",url: "/classrecordTe/ClassrecordDujiao",//请求的路径fileName: "（理工科组）督教",//设置导出文件名称params: `startTime=${this.startTime}&endTime=${this.endTime}&professionalType=${this.value}`};exportMethod(myObj);//传入对象

这是使用这个方法最核心的代码

我感觉使用exportMethod方法最重要的就是对myObj对象的封装，而封装里最重要的就是参数的正确传递与表示，用到反引号``和${}来完成参数的拼接。

谢谢来自那位未知网友的文章，谢谢！

Vue导出Excel数据表格相关推荐

php把数据创建一个表格,PHP创建(导出Excel数据表格)
/** * 创建(导出Excel数据表格) * @param array $list 要导出的数组格式的数据 * @param string $filename 导出的Excel表格数据表的 ...
EasyExcel导入和导出excel数据表格用法示例
说明:平时项目中经常有需要把excel表格中的数据导入库中,或者需要把查询出来的数据导出到excel文件中,今天就来介绍阿里的 easyexcel 的用法一.SpringBoot集成EasyExce ...
封装vue导出excel组件（扩展嵌入图片、操作工作表、表格样式等功能）
导出的excel中嵌入图片,同时还需要操作多个工作表与表格样式, 看了一些java的插件不太适合,因为我这边的需求是动态表单,字段不固定.后端的插件大部分依赖实体类注解,要不就是操作比较繁琐.又看了一 ...
vue导出Excel表格全局函数（简洁明了）
vue导出excel全局函数(简洁明了) 将导出到Excel功能封装成一个公用js函数,供其他vue页面复用. 1.安装Excel插件 npm install --save xlsx file-sav ...
vue导出excel加一个进度条_vue导出excel遇到的问题解决方法
本篇文章给大家带来的内容是关于vue导出excel遇到的问题解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 需求: Vue+element UI el-table下的导出当前 ...
vue导出excel表的时候有多张图片
vue导出excel的时候多张图片遇到数据结构是[ { id:id, image:['图片','图片','图片'] } ] 这样的数据导出,使用插件 js-table2excel 导出的时候发现它只 ...
python导入excel数据-Python数据处理之导入导出excel数据
欢迎点击上方"AntDream"关注我 .Python的一大应用就是数据分析了,而数据分析中,经常碰到需要处理Excel数据的情况.这里做一个Python处理Excel数据的总结, ...
java excel data 导入数据_java实现导入导出excel数据
项目需要,要实现一个导入导出excel的功能,于是,任务驱动着我学习到了POI和JXL这2个java操作Excel的插件. 一.POI和JXL介绍 1.POI:是对所有office资源进行读写的一套工 ...
php导出excel数据代码,phpspreadsheet导出数据到Excel的方法介绍（代码示例）
本篇文章给大家带来的内容是关于phpspreadsheet导出数据到Excel的方法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前我们使用PHP导出Excel数 ...

Vue导出Excel数据表格

Vue导出Excel数据表格相关推荐

最新文章

热门文章