1. 代码说明

我使用的是Element, 一套为开发者、设计师和产品经理准备的基于Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。

下载文件部分

下载文件，使用el-button按钮，增加点击事件，绑定函数exportTower,
传递el-table表格中的那一行的name属性，然后拼凑出完整的url
之后调用download函数实现保存文件的功能

export函数

exportTower(index, rows) {
        let name = rows.name
        let url =  this.downloadExcel + '?name=' + name
        this.download(url, name)
      }

download函数

download(data, name) {
        return fetch(data).then(res => {
          res.blob().then(blob => {
            let link = document.createElement('a')
            let url = window.URL.createObjectURL(blob)
            link.style.display = 'none'
            link.download = name
            link.href = url
            document.body.appendChild(link)
            link.click()
            window.URL.revokeObjectURL(url)
          })
        })
      }

上传文件部分

上传文件，使用el-upload按钮
action，必选参数，上传的地址
on-success，文件上传成功时的钩子
on-error，文件上传失败时的钩子
on-progress， 文件上传时的钩子
multiple，是否支持多选文件
with-credentials， 支持发送 cookie 凭证信息
show-file-list，是否显示已上传文件列表
file-list，上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
limit，最大允许上传个数
accept，接受上传的文件类型（thumbnail-mode模式下此参数无效）
show-file-list，是否显示已上传文件列表

onProgress

      // 上传过程的钩子
      onProgress(){
        this.$message({message: '正在上传文件', type: 'success'})
      },

handleSuccess

      // 上传成功的钩子
      handleSuccess(response){
        this.fileList = []
        let {msg, status} = response
        if(status === '200'){
          this.$message({message: msg, type: 'success'})
        }else{
          this.$message({message: msg, type: 'error'})
        }
      },

handleError

      // 上传失败的钩子
      handleError(){
        this.fileList = []
        this.$message("导入失败，文件格式出错")
      },

2. 文件示例

<template>

 ................
 ................
      <el-table
        :data="countData"
        max-height="800"
        style="width: 80%;margin: auto"
      >
        <el-table-column>
          ............
        </el-table-column>
        <el-table-column>
          ............
        </el-table-column>
        <el-table-column>
          ............
        </el-table-column>
        <el-table-column prop="operate" label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button-group>
              <el-button size="mini" @click="exportTower(scope.$index, scope.row)" class="blue-button">导出</el-button>
              <el-upload
                class="upload-demo"
                :with-credentials="true"
                ref="upload"
                name="file"
                :action="uploadExcel"
                :file-list="fileList"
                :multiple="false"
                :limit="1"
                :show-file-list="false"
                accept="xlsx"
                :on-success="handleSuccess"
                :on-progress="onProgress"
                :on-error="handleError">
                <el-button size="mini" class="red-button">导入</el-button>
              </el-upload>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
..............
..............
</template>

<script>
  export default {
    name: "fileDeal",
    data() {
      return {
        fileList: [],
        uploadExcel: '',
        downloadExcel: '',
      }
    },
    created(){
      this.uploadExcel = 'http://xxx.xxx.xxx.xxx'
      this.downloadExcel = 'http://xxx.xxx.xxx.xxx'
    },
    methods: {
      // 上传过程的钩子
      onProgress(){
        this.$message({message: '正在上传文件', type: 'success'})
      },
      // 上传成功的钩子
      handleSuccess(response){
        this.fileList = []
        let {msg, status} = response
        if(status === '200'){
          this.$message({message: msg, type: 'success'})
        }else{
          this.$message({message: msg, type: 'error'})
        }
      },
      // 上传失败的钩子
      handleError(){
        this.fileList = []
        this.$message("导入失败，文件格式出错")
      },
      // 下载文件
      download(data, name) {
        return fetch(data).then(res => {
          res.blob().then(blob => {
            let link = document.createElement('a')
            let url = window.URL.createObjectURL(blob)
            link.style.display = 'none'
            link.download = name
            link.href = url
            document.body.appendChild(link)
            link.click()
            window.URL.revokeObjectURL(url)
          })
        })
      },
      // 导出文件
      exportTower(index, rows) {
        let name = rows.name
        let url =  this.downloadExcel + '?name=' + name
        this.download(url, name)
      }
    },
  }
</script>

<style lang="less" scoped>
  .upload-demo{
    display: inline;
  }
  .blue-button {
    color: #ffffff;
    background-color: #2A82E0;
    border: 0;
  }

  .red-button {
    color: #ffffff;
    background-color: #F56C6C;
    border: 0;
  }


</style>