vue 导出表格数据（前端工作）

一、预备了解的概念

静态url下载：后台返回一个下载地址url。这种方式是后台得先生成文件保存在服务器某个地方，然后返回给前端url地址，前端直接拿到url地址一行代码去下载文件即可。这种有个问题就是后台得知道什么时候可以删除生成的那个文件。（不推荐使用） 动态url下载：后台返回给前端的是一个二进制流，这种方式好处在于后台不用生成文件去保存，二进制流保存在内存中，不用占用服务器存储空间，不用考虑什么时候删除去文件。（推荐使用） 

1、Content-Disposition

是 HTTP 协议中的一个头部字段，用于指示文件的名称和下载方式。

该字段的格式为：Content-Disposition: ;

其中，type 指文件的类型，可以为 inline 或 attachment。

inline 表示文件应该在浏览器中直接显示，而不是下载。
attachment 表示文件应该下载到本地。
parameter 是一个可选项，用于指定文件名。该参数的格式为：filename=

例如: Content-Disposition: attachment; file

Content-Disposition: attachment; filename=%E8%B5....

2、encodeURI()　　decodeURI()

        //转义一个URI中的字符

　　语法：encodeURI(uri)　　//这个在编码不同的AJAX请求时，解决中文乱码问题经常用到。

        var str1 = "你好javascript";
        var str2 = encodeURI(str1);
        document.write(str2);   //输出%E4%BD%A0%E5%A5%BDjavascript 
        decodeURI()　　//解码一个URI中的字符

　　语法：decodeURI(uri)

        var str1 = "你好javascript";
        var str2 = encodeURI(str1);
        document.write(str2);   //输出%E4%BD%A0%E5%A5%BDjavascript
        var str3 = decodeURI(str2);
        document.write("<br/>" + str3)  //输出    你好javascript

3、vue blob对象

new blob() 

vue中blob对象是一种二进制数据类型，它可以用来表示任意类型的数据。

我们可以使用vue的blob对象来处理各种数据，例如图像文件、音频文件、视频文件等。对于一些需要通过网络传输文件的场景，blob对象也可以起到重要的作用

• new Blob() 的第一个参数为一个数组，第二个参数指定blob的类型
• 返回一个新创建的 Blob 对象，其内容由参数中给定的数组拼接组成。

• 例子：new Blob([content], { type: "text/plain" })

4、URL.createObjectURL()   URL.revokeObjectURL()

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

语法: 

objectURL = URL.createObjectURL(blob || file);

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

语法: 

window.URL.revokeObjectURL(objectURL);

5、setAttribute()

是用于设置自定义属性的方法,有两个参数,第一个是属性名,第二个是属性值 

6、appendChild()

是 DOM API 中的一种方法，用于向一个节点末尾添加一个子节点

 二、具体代码

export default function exportDownload(content) {
   //  content为后端导出接口返回来内容       
     //获取文件的下载方式和名称
     let contentDisposititon = content.headers["content-disposititon"]
     let filtername = decodeURI(contentDisposititon.slipt("filtername=")[1])

     let blob = new Blob([content.data],{type:content.headers["content-type"]})
     let url = window.URL.createObjectUrL(blob)
  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(blob,filtername )
  }else{
     const link = document.createElement('a');
     link.style.display = 'none';
     link.href = url;
     link.setAttribute('download',filtername);
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
  }
 URL.revokeObjectURL(url)
}

三、 写后端的api

四、具体处理代码

exportFunction(){
    //判断是否点击查询
    if(!this.formList) return this.$message({
          message: '请先点击查询',
          type: 'warning'
     });
    // 点击查询后的提示信息
    this.exportMessage = this.$message({
          message: '正在保存奥',
          type: 'warning'
    });
    // 数据处理
    exportMyself(参数).then((result=>{
      // 第二步处理文件流方法
         exportDownload(res)
    })).finally(()=>{
        this.exportMessage.close()
    })
}