vue-导出数据

封装 API

下载接口需要拼接 responseType: 'blob',

// 导出数据
export function exportLabelExcel(params) {
  return request({
    url: 'omstudio/task/statistics/exportData',
    method: 'post',
    data: params,
    responseType: 'blob',
    fileType: 'excel',
  });
}

导出数据

exportExcel(data, filename)

第一个参数 data ：导出的数据

第二个参数 filename: 文件名

// 导出excel表格
export function exportExcel(data, filename) {
  let blob = new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8" });
  let url = window.URL.createObjectURL(blob);
  let a = document.createElement("a"); // 创建一个a元素
  a.download  = `${filename}.xlsx`; // 下载文件的名称
  a.href = url; // 下载文件的路径
  a.click(); // 确认下载
  window.URL.revokeObjectURL(url);
};

---

Blob

是一段二进制数据，有两个参数:data,type

第一个参数data:必须用 [ ] 包裹

第二个参数type:设置type类型(现在只有type 一个可配置项）

blob有两个属性：type   size:大小（单位：字节） 

 

---

window.URL.createObjectURL(blob);

• objectURL是生成的对象URL，通过这个URL，可以获取到所指定文件的完整内容。
• 他的参数是一个 file 或者 blob 对象 ；获得一个http格式的url路径

---

window.URL.revokeObjectURL(url);

URL.revokeObjectURL()静态方法用来释放一个之前通过调用URL.createObjectURL()创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。

问题

打开下载的文件

 无法显示数据