vue后台管理使用a标签导出表格

最新推荐文章于 2023-04-24 19:44:14 发布

原创最新推荐文章于 2023-04-24 19:44:14 发布 · 518 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了一个使用封装接口从服务器获取数据并将其转换为Excel文件的方法。通过定义一个名为exportNoticemsg的函数来实现数据的请求，并设置responseType为arraybuffer以接收二进制数据。之后将响应的数据转化为Blob对象，并创建一个隐藏的a标签用于触发下载。

1.首先使用自己封装的接口请求

记住不要忘记加： responseType: “arraybuffer” ,

export function exportNoticemsg(query) {
  return request({
    url: '/agent/noticemsg/export',
    method: 'get',
    responseType: "arraybuffer" ,
    params: query
  })
}

2.在页面中使用

//引入接口
import { exportNoticemsg } from "@/api/device/noticemsg";

exportNoticemsg(queryParams).then(res=>{
             console.log(res);
              const blob = new Blob([res], {  // res 为后台返回数据
              type: 'application/vnd.ms-excel;charset=utf-8', // 导出数据生成excel的格式设置
         });
            console.log(blob);
          const elink = document.createElement('a');
          elink.download = `表格导出.xlsx`;  
          elink.style.display = 'none';
          elink.target = '_blank';
          elink.href = window.URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          })