关于vue-cli+axios实现下载功能

本文主要以测试代码说明一下Vue-cli+axios进行附件下载后台返回的数据流文件如何实现，这里需要注意的是responseType: "blob",必须设置，

关于responseType值的类型可为如下：

关于Blob对象：

Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

生成blob语法：

var aBlob = new Blob( array, options );

参数 array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。options 是一个可选的BlobPropertyBag字典，它会指定如下两个属性： type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。 endings，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个： "native"，代表行结束符会被更改为适合宿主 *** 作系统文件系统的换行符，或者 "transparent"，默认值，代表会保持blob中保存的结束符不变

使用字符串构造一个blob对象

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug)], {type : 'application/json'});

生成的blob对象如下：

Blob {
  size: 17
  type: "application/json"
  __proto__: Blob
}

Blob 对象含有两个属性：size 和 type。其中 size 属性用于表示数据的大小（以字节为单位），type 是 MIME 类型的字符串。

下边直接上代码：关于其相关的一些知识点大家可以自行补习！

注意post请求的话参数即使为空，参数也需占位{}，否则下载会出现错误

await requests

        .post(

          "/task/task/export/1528923434065911809",

          {},//参数占位

          {

            responseType: "blob",

            headers: { "Content-Type": "application/json;charset=UTF-8" },

          }

        )