vue实现导出excel的两种方式

岩岩很哇塞！

已于 2022-12-07 14:45:13 修改

阅读量7.7k

点赞数 10

文章标签： vue.js javascript 前端

于 2022-08-10 15:06:53 首次发布

本文链接：https://blog.youkuaiyun.com/zhaoyan_love/article/details/126266507

版权

本文介绍了在Vue中如何实现导出Excel文件，包括后端返回URL直接下载和返回文件流两种情况。针对后端返回文件流时可能出现的乱码问题，提出了设置请求头、处理返回的文件流及全局响应拦截等解决策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求说明

通过vue实现导出有两种方式：
（1）后端返回的是一个地址，直接拼接打开下载就行
（2）后端返回的是文件流的形式，这个时候就需要在请求头还有返回值的地方设置一下

一、后端返回的是地址

// 页面代码
<el-button
       type="primary"
       size="mini"
       class="filter-item"
       icon="el-icon-download"
       style="margin: 12px 20px 0 0; float: right"
       @click="onExportClick"
       >
       导出
</el-button>

 onExportClick() {
   //导出方法
     exportDevices(this.listQuery) //导出接口
      .then(result => {
   
         const url = result.data
         window.open(</