Ruoyi项目传List到后台并使用Excel模板下载数据的方法以及遇到的各种前后端数据交互问题

原创

已于 2023-11-24 14:22:52 修改 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ruoyi #数据导出excel

于 2023-11-24 14:12:14 首次发布

本文介绍了在Ruoyi项目中如何将List数据导出为Excel，以及在前后端交互过程中遇到的Content-Type不支持、构造函数找不到等问题。在前端，直接调用全局注册的request.js的download方法下载。后端接口接收List参数时，避免使用@RequestBody，因为这会导致Content-Type不匹配。尝试使用@RequestParam注解也会产生新问题。解决方案和注意事项被详细阐述。

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

import { download } from '@/utils/request'

const app = createApp(App)

// 全局方法挂载
app.config.globalProperties.download = download

首先因为ruoyi-ui中的main.js有配置如上全局注册：

因此只需要在vue中定义一个方法直接使用this.download调用下载即可：

（download的3个参数分别为：后台接口url ，参数，下载之后的文件名）

1. ruoyi项目中全局注册了request.js，因此直接在页面点击下载时直接调用即可：

<el-button type="danger" plain @click="downloadExcel">下载</el-button>


<script>
export default {
  methods: {
      downloadExcel(){
        this.download("/downloadExcel", {list: JSON.stringify(this.xxList)},  `停止件数.xlsx`); //download已全局注册
  }
}

</script>

2. 接口定义：

import cn.afterturn.easypoi.excel.ExcelExportUtil;
import cn.after

最低0.47元/天解锁文章

200万优质内容无限畅学