vue3+element表格调用后台接口实现Excel导出功能以及导出乱码问题解决

实现效果

 导出后的效果：

步骤

第一步：安装依赖

npm install --save xlsx file-saver

第二步：引入依赖

// 引入导出Excel表格依赖
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";

第三步：导出

// 导出事件
const exportClick = () => {
  axios({
    method: 'post',
    url: '/pcapi/Redeem/derive',
    data: qs.stringify({}),
  })
    .then((res) => {
      console.log(res.data)
      const data = new Blob([res.data], {
        type: 'application/vnd.ms-excel;charset=utf-8',
      })
      const downloadUrl = window.URL.createObjectURL(data)
      const anchor = document.createElement('a')
      anchor.href = downloadUrl
      anchor.download = '表格名称.xlsx' // 表格名称.文件类型
      anchor.click()
      window.URL.revokeObjectURL(res.data) // 消除请求接口返回的list数据
    })
    .catch((err) => {
      console.log(err)
    })
}

        接口返回数据导出，通常需要请求后端接口获取数据，接口返回的数据基本上是乱码的，需要先处理乱码的数据，否则导出来的文件是损坏的，如下

        看到这种返回信息，表格数据基本上是已经拿到了，现在只需要做一下数据的处理即可导出表格。 

解决方法步骤拆解：解码

在请求接口的位置添加 { responseType: 'blob' } 将信息转码

  axios({
    method: 'post',
    url: '/pcapi/Redeem/derive',
    data: qs.stringify({}),
    responseType: 'blob', // 添加 blob 解决乱码问题，或者 arraybuffer
  })
    .then((res) => {
     
    })
    .catch((err) => {
   
    })