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

往事不堪回首..

已于 2023-11-24 14:22:52 修改

阅读量1.3k

点赞数

分类专栏： Poi Ruoyi vue 文章标签： vue.js ruoyi 数据导出excel

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

本文链接：https://blog.csdn.net/qq3892997/article/details/134596824

版权

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

摘要由CSDN通过智能技术生成

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>