Vue实现下载文件功能（通过a标签、点击按钮、二维码下载文件功能）

效果图：

业务需求：每行数据都有自己的文件路径保存在数据库中，如何获取文件保存在数据库的路径并下载该文件？

常见基础

1、通过a标签下载文件

<a href="http://127.0.0.1/我和我的祖国.jpg" download="我和我的祖国.jpg" target="_blank">点击下载a>

动态下载不会写怎么办？

可以尝试用以下的方法：

2、window.open()

<el-button
	  size="mini"
	  type="text"
	  icon="el-icon-thumb"
	  @click="getFileSrc(scope.row)"
	  v-hasPermi="['system:order:download']"
	  >下载el-button
>

methods:{
	/** 下载文件存储路径 */
    getFileSrc(row) {
      window.open(row.fileSrc,"_blank");
    },
}

3、按钮 + 动态a标签

<el-button type="primary" size="small" @click="exportDetail()">导出明细el-button>

// 导出Excel表格明细
exportDetail() {
    let anchor = document.createElement("a");
    let query = '?id=' + this.id + '&name=' + this.name
    let url = '/xxx/xxx/xxxList/export'
    anchor.href = window.SITE_CONFIG['apiURL'] + url + query
    anchor.setAttribute("target", '_blank');
    anchor.innerHTML = "downloading...";
    anchor.style.display = "none";
    document.body.appendChild(anchor);
    setTimeout(() => {
      anchor.click();
      document.body.removeChild(anchor);
      setTimeout(() => { self.URL.revokeObjectURL(anchor.href); }, 250);
    }, 66);
}

4、二维码

<div class="box">
  <span>二维码span>
  <div class="vueQr"><img :src="preview.qrcodeUrl">div>
  <div class="btn">
    <a :href="preview.qrcodeUrl" :download="preview.title">下载二维码a>
  div>
div>