前端实现文件下载

本页面是使用饿了么开发的,html源码如下:

          <el-tab-pane class="second" label="附件列表" name="second" >
            <el-table :data="detailFileList" stripe style="width: 100%" @row-click='onRowClick'>
              <el-table-column prop="originalFileName" label="文件名"></el-table-column>
              <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                  <a href="#">下载</a>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

js代码如下:

        // 下载
        onRowClick (row) {
          let param = {
            id: row.id
          }
          talkApi.getFileDownload(param).then(resp => {
            if (resp && resp.code == 200) {
              window.open(resp.data)
            } else {
              this.$message.error('下载失败')
            }
          })
        },

关键代码如下:

              window.open(resp.data)

使用说明一下resp.data 是后端返回的链接,前端通过 window.open()来实现下载文件

方法二:可以直接通过a标签来实现下载的功能

              <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                  <a :href="FILE_URL + '/auxiliary/netdisc-manager/download?id=' + scope.row.id">下载</a>
                </template>
              </el-table-column>
```直接这样子方可实现下载