vue3实现导出报表至excel（后端主导）

保护头发的小张

已于 2024-06-19 10:45:35 修改

阅读量231

点赞数

文章标签： vue.js 前端 javascript

于 2023-11-07 15:54:29 首次发布

本文链接：https://blog.csdn.net/Z1014h/article/details/134269280

版权

  <t-button theme="primary" :loading="exloading" @click="exportReports()">导出</t-button>
// 导出
const exportReports = useThrottleFn(async () => {
  if (selectedRowKeys.value.length === 0) {
    MessagePlugin.error('请选择要导出的数据');
    return;
  }
  exloading.value = true;
  const token = localStorage.getItem('token');
  try {
    const res = await exportReport({ sign: 11, date: formData.value.add_time, token, ids: selestData.value });
    exportAreport(res.data, 'c端销售提成报表.xlsx'); // 导出报表
  } finally {
    exloading.value = false;
  }
}, 5000);


//需要调用的接口
export const exportAppropriate = (params: { date: any }) => {
  return request.get({
    url: Api.ExportAppropriate,
    params: { ...params },
    responseType: 'blob',
    timeout: 0,
  });
};

// 导出报表方法
export const exportAreport = async (data, name) => {
  if (!data) {
    return;
  }
  // 将 Blob 对象转换为文本
  const dataAsString = await data.text();
  // console.log(dataAsString, 'dataAsString')
  // console.log(dataAsString.length, 'dataAsString.length')
  // 处理接口 code 为 0 的情况
  if (dataAsString.length < 200) {
    const jsonData = JSON?.parse(dataAsString);
    if (jsonData.code === 0) {
      MessagePlugin.error(jsonData.message || '未知的错误');
      return;
    }
  }
  const blob = new Blob([data], { type: 'application/octet-stream' });
  const eLink = document.createElement('a');
  eLink.href = URL.createObjectURL(blob);
  eLink.download = name;
  eLink.style.display = 'none';
  document.body.appendChild(eLink);
  eLink.click();
  document.body.removeChild(eLink);
};