Vue 文件下载

  在项目中经常会实现文件下载的功能，以下代码基本实现了下载功能的处理。

vue标签代码

<el-table-column label="操作" width="250">

        <template slot-scope="{row}">

          <el-button

            size="mini"

            type="primary"

            @click="handleCreate(row)" :disabled="row.file_path !=null">生成凭证</el-button>

          <el-button

            size="mini"

            type="success"

            @click="handleDownload(row)" :disabled="row.file_path ==null">下载凭证</el-button>

        </template>

      </el-table-column>

下面两个接口第一个是获取凭证，第二个是下载凭证，如果后端使用不同调用接口数量也不一样

// 生成

export function docCreateFile(data){

    return request({

        url:'doc/createFile',

        method:'post',

        data

    })

}

// 凭证下载

export function docDownload(data){

    return request({

        url:'doc/download',

        method:'get',

        params:data

       

    })

}

在vue中使用这两个接口，只有这个是不够的，还需要再写一个下载数据的方法

 

handleCreate(row){

      docCreateFile({id:row.id}).then(res=>{

        let {code,data} = res.data;

        if(code == 20000){

          console.log('data',data)

          this.getData(); //查询数据

          this.$notify({

            title: '生成凭证',

            message: '生成凭证成功',

            duration: 2000,

            type: 'success'

          });

        }

      })

    },

    //下载凭证

    handleDownload(row){

      docDownload({id:row.id}).then(res=>{

        let {code,data} = res.data;

        if(code == 20000){

          this.$notify({

            title: '下载凭证',

            message: '下载凭证成功',

            duration: 2000,

            type: 'success'

          });

          //再次发送请求

          this.downloadUrlFile(`${this.url}static/${data.file_path}`); //调用了下载数据的方法把url地址传过去。

        }

      })

    },

下载数据方法，我这边使用了Ajax

 //下载数据

    downloadUrlFile(url){

      const xhr = new XMLHttpRequest();

      xhr.open('GET',url);

      xhr.responseType = 'blob'; //响应返回的数据是二进制字节流

      xhr.setRequestHeader('token',getToken());

      xhr.send();

      xhr.onload = ()=>{

        if(xhr.status==200){

          //console.log(xhr.responseURL);  //http://localhost:5058/static/1632890047147.docx

          let fileName = xhr.responseURL.substring(xhr.responseURL.lastIndexOf("/")+1);

          console.log(fileName);

          this.saveAs(fileName,xhr.response);

        }

      }

    },

最后创建一个a标签进行点击下载文件

 

 //<a href="路径" download="名称" ></a>

    saveAs(name,data){

      let blob = new Blob([data]) ; //Blob对象可以看成是存放二进制数据的容器

      console.log('blob',blob)

      let save_link = document.createElement("a"); //动态创建a标签

      save_link.href = window.URL.createObjectURL(blob);//从二进制数据中获取url

      save_link.download = name;

      save_link.click(); //触发a标签；

    }

代码有点多，我可能方法有点复杂。