Vue----二进制文件导出

Vue----二进制文件导出

当浏览器接收的是二进制的文件，需要导出时 ‘
1.传统的导出方式

const exportExcle = async () => {
  try {
    const response = await axios.get("/api/export",{
      // 返回二进制数据
      // blob 对象用来处理 二进制数据 response.data 返回的是二进制数据
      responseType: "blob"
    });
    // 这里的url 是为本例中的二进制数据 创建的临时的url 
     const url= window.URL.createObjectURL(new Blob([response.data]));
     // 这行是在文档中创建一个《<a> 元素，但是不会显示在页面上
     const link = document.createElement("a");
     // 将之前创建的临时的url的值 赋值给a连接的href中 这样链接就指向了excel文件数据
     link.href = url;
     // 这里设置了dowload 属性，是在告诉用户当点击这个链接时应该下载url指向的数据 而不是导航到该url
      link.setAttribute("download", "products.xlsx");
     // 将创建的链接添加到文档的body 中
     document.body.appendChild(link);
     // 通过编程的方式 来触发链接 开始下载
     link.click();
  } catch (error) {
    console.error("导出 Excel 失败:", error);
    // 处理错误情况，例如显示错误消息给用户
  }
};

2.引入FileSaver.js库
这里使用saveAs 函数来触发文件下载
首先 先安装 file-saver 库
pnpm install file-saver

// 引入FileSaver.js库
import { saveAs } from 'file-saver';

// 定义一个异步函数来处理导出操作
const exportExcel = async () => {
  try {
    // 发送GET请求到服务器端的导出API
    const response = await axios.get('/api/export', { responseType: 'blob' });
    // 使用FileSaver.js库的saveAs函数来保存文件
    // saveAs(new Blob([response.data], { type: 'application/vnd.ms-excel' }), '文件名.xlsx');
    // 或者
   saveAs(response.data, "products.xlsx");
  } catch (error) {
    // 如果有错误发生，打印错误信息到控制台
    console.error('导出 Excel 失败:', error);
    // 可以在这里添加更多的错误处理逻辑，例如显示错误消息给用户
  }
};