vue-实现文件下载

1.利用浏览器的导出功能

window.location.href = 服务器文件路径

相当于后端告诉前端文件的地址，直接使用浏览器去下载

2.以流的形式下载文件 

查了一些资料，主要用的代码如下，原文章：入口

在此基础上增加了params，以传参

// 下载模板
    handleExportTem () {
      this.btnSendTem = true
      // 加载loading
      this.loading = true
      this.loadingText = '正在导出模板...'
      this.$axios({
        baseURL: './',
        url: 'xx',
        method: 'post',
        responseType: 'blob', // 服务器返回的数据类型
        params: { // 其他参数
          excel: 'excel02'
        },
        data: {}
      }).then((res) => {
        // 关闭loading
        this.loading = false
        console.log(res)
        // 此处有个坑。这里用content保存文件流，最初是content=res，但下载的test.xls里的内容如下图1，
        // 检查了下才发现，后端对文件流做了一层封装，所以将content指向res.data即可
        // 另外，流的转储属于浅拷贝，所以此处的content转储仅仅是便于理解，并没有实际作用=_=
        const content = res.data
        const blob = new Blob([content]) // 构造一个blob对象来处理数据
        const fileName = 'monthAssess.xlsx' // 导出文件名
        // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
        // IE10以上支持blob但是依然不支持download
        if ('download' in document.createElement('a')) { // 支持a标签download的浏览器
          const link = document.createElement('a') // 创建a标签
          link.download = fileName // a标签添加属性
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click() // 执行下载
          URL.revokeObjectURL(link.href) // 释放url
          document.body.removeChild(link) // 释放标签
        } else { // 其他浏览器
          navigator.msSaveBlob(blob, fileName)
        }
        this.btnSendTem = false
      }).catch((error) => {
        console.log(error)
        // 关闭loading
        this.loading = false
        this.btnSendTem = false
      })
    },