2021-06-10 vue项目中文件导出方法

VUE项目中文件导出(bobl方法)

只是vue项目中一种文件导出的写法可按需选择

ExportFile() {
    
    
      let url = ""; //这个是向后台请求数据的地址
      let params = {
    
    }; //这个是向后台发送的参数,根据实际情况选择将json转成字符串
      this.$axios
        .post(url, params, {
    
    
          headers: {
    
     "Content-Type": "application/json" },//这个解决跨域问题
          responseType: "blob", //响应数据的类型选择blob
        })
        .then((res) => {
    
    
            let fileName="这是一个表格"; //这个是需要导出的表格的名字
            let blob=new Blob([res.data],{
    
    type:"application/vnd.ms-excel"}); //实例一个blob对象,res.data是后台反馈的二进制数据,type是需要下载的文件的类型此处为表格
            let link =document.createElement("a"); //创建一个a标签dom节点
            link.download=fileName; //下载文件的名字
            link.href=URL.createObjectURL(blob); //下载文件的地址
            link.style.display="none";//a标签默默无闻
            document.body.appendChild(link);//将a标签加入到dom中
            link.click();//添加点击事件进行文件下载
            // 下载完成可以退场
            URL.revokeObjectURL(link.href);//销毁下载地址
            document.body.removeChild(link);//将a标签从dom中移除
        });
    },

如有错误请批评指正，如有侵权请联系作者。