前端下载单个文件

后端说 返回给你们这个链接了，前面拼接上域名就可以在线查看或播放，所以下载要我们前端自己实现不要请求接口了

1.接口返回数据列表是这个样子的

image.png

我们前端自己拼接好后在浏览器上直接打开就是这个文件，下面是下载代码

<i-table :columns="columns" :data="fileList" @on-selection-change="onSelectionChange">
  <template slot-scope="{ row }" slot="action">
    <i-button v-if="['.png', '.jpg', '.jpeg', '.bmp', '.tif', '.gif'].includes(row.fileName.substring(row.fileName.lastIndexOf('.')))"
      type="info" size="small" @click="handlePreview(row)">预览</i-button>
      <i-button type="info" size="small" @click="handleDownload(row)">下载</i-button>
      <i-button type="error" size="small" @click="handleDelete(row)">删除</i-button>
  </template>
</i-table>

js部分

<script>
export default {
  methods: {
    // 单个下载
    handleDownload(file) {
      const a = document.createElement('a')
      a.setAttribute('href', `${this.url}${file.path}`)
      a.setAttribute('download', `${file.fileName}`)
      document.body.appendChild(a)
      a.style.display = 'none'
      a.click()
      document.body.removeChild(a)
    }
  }
}
</script>