vue中文本文件下载

由于浏览器限制，不同源情况下，在chrome版本65以上，a标签的download属性只能做到文件预览，而且只会预览浏览器支持的文件格式，所以实际上a标签是做不到下载的，那么我们可以换下面的方式来做下载，同样还是使用a标签

项目使用vue写的，所以粘vue代码：

页面按钮：

<template slot-scope="scope">
      <a :href="href" v-if="scope.row.url" :download="scope.row.name">
              <el-button @click="downLoad(scope.row)" size="small" >下载附件
              </el-button>
      </a>
      <span v-else>未上传</span>
</template>

封装的http请求：

//文件下载
export const downloadFile = (params) => {
        return axios({
            url: params,
            method: 'get',
            responseType: 'blob', // 这一步也很关键，一定要加上 responseType 值为 blob
            header:{//一般来说下载是不需要token的，不过具体看业务需求
                'token': getToken() || 1,
            }
        })
    }

页面方法：

 let path = this.fileUrl + row.awardFilePath;
      downloadFile(path).then(data => {
          if (!data) {
              return;
          }
          let url = window.URL.createObjectURL(data.data);
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          // download 属性定义了文件名称，并且是必填，不然会页面会自动识别为跳转路径，而不是文件下载地址
          link.setAttribute("download", row.awardFileName);
          document.body.appendChild(link);
          link.click();
          //销毁添加的a标签
          setTimeout(() => {
              link.parentNode.removeChild(link)
          }, 200)
  });

原理主要是根据文件的静态访问地址，访问到服务器上的文件，然后转换成html5 BLOB二进制文件流返回，再使用window.URL.createObjectUrl转换成url地址，作为a标签的href属性值，配合download属性实现下载。