前端实现Excel文件导出功能的完整代码解析(vue实现excel文件导出)

// 导出Excel文件的函数
exportAllExcel().then((res) => {
  // 创建一个a标签元素
  const link = document.createElement("a");
  // 创建一个Blob对象，用于存储Excel文件的数据，设置文件类型为application/msword
  const blob = new Blob([res], { type: "application/msword" });
  // 将a标签设置为不可见
  link.style.display = "none";
  // 通过URL.createObjectURL方法创建一个下载链接
  const url = window.URL.createObjectURL(blob);
  // 将链接设置为a标签的href属性
  link.href = url;
  // 设置下载文件的名称
  link.setAttribute("download", "数据文件.xlsx");
  // 将a标签添加到页面的body中
  document.body.appendChild(link);
  // 触发点击事件，开始下载文件
  link.click();
  // 释放Blob对象所占用的内存
  window.URL.revokeObjectURL(url);
  // 将a标签从页面中移除
  document.body.removeChild(link);
});

<template>
  <div>
    <button @click="exportData">导出数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    async exportData() {
      try {
        const response = await axios.get('/api/export')
        const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
        const downloadUrl = URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = downloadUrl
        link.download = 'data.xlsx'
        link.click()
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>