Vue实战系列1：Vue.js下载文件流(Blob对象)--导出excel表格-excel下载

在vue框架中,与传统的根据路径下载文件（document.getElementById("").src=‘’）方式不同，有时候，我们会需要将上传的文件在后台直接进行处理再回传到前端，这种情况下文件没有实际的可获取的路径，无法通过链接方式下载。但是可以通过将其转成blob对象，添加到iframe标签中来模拟下载（或者pdf预览）。具体的接收方式如下：

1.首先设置responseType对象格式为 blob:

responseType:'blob'

2.获取请求返回的response对象中的blob

 var blob=res.data

3.创建一个临时的url指向blob对象

window.URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.

var url = window.URL.createObjectURL(blob);

//设置文件类型，这里以excel为例

blob.type = "application/excel";

4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载

var a = document.createElement('a');

a.href = url;

a.download = 'test.xlsx';

a.click();

5.释放这个临时的对象url

window.URL.revokeObjectURL(url);

　window.URL.revokeObjectURL()方法会释放一个通过URL.createObjectURL()创建的对象URL. 当你要已经用过了这个对象URL,然后要让浏览器知道这个URL已经不再需要指向对应的文件的时候,就需要调用这个方法.

实例：

<template>
\t<el-button @click="downloadUrl">导出Excel</el-button> 
</template>
<script>
import api from "../../api/api.js";
import axios from "axios";
export default {
 data() {
 return {}
 },
 methods: {
 downloadUrl() {
 let params = {
 name: xiaobai,
 age: 18,
 };
 this.downloadInfo(params);
 },
 downloadInfo(params) {
 return new Promise((resolve, reject) => {
 axios
 .get(serverUrl + "/order/export", {
 params: params,
 responseType: "blob" // 1.首先设置responseType对象格式为 blob:
 })
 .then(
 res => {
 //resolve(res)
 let blob = new Blob([res.data], {
 type: "application/vnd.ms-excel"
 }); // 2.获取请求返回的response对象中的blob 设置文件类型，这里以excel为例
 let url = window.URL.createObjectURL(blob); // 3.创建一个临时的url指向blob对象
 // 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
 let a = document.createElement("a");
 a.href = url;
 a.download = "导出表格.xlsx";
 a.click();
 // 5.释放这个临时的对象url
 window.URL.revokeObjectURL(url);
 },
 err => {
 resolve(err.response);
 }
 )
 .catch(error => {
 reject(error);
 });
 });
 },
};
</script>
<style>
</style>