url文件下载避免txt、img浏览器直接打开

使用文件地址直接下载txt、jpg等图片文件时浏览器会直接打开
实现思路：转化为blob文件流进行处理

基于axios进行封装的请求接口

export function downloadFileResource(params, callback) {
  return axios.get(`/api/admin/resources/${params.id}/download`, params.type, null, {
    responseType: 'blob',
    onDownloadProgress: (progress) => {
      callback && callback(progress);
    },
  });
}

export function downloadUrlFile(url, callback) {
  return axios.get(url, null, null, {
    responseType: 'blob',
    onDownloadProgress: (progress) => {
      callback && callback(progress);
    },
  });
}

组件中的处理方式

      const callback = (e) => {
          if (e.lengthComputable) {
            console.log(`下载进度${Math.round((e.loaded / e.total) * 100)}`);
          }
        };
        const types = ['model', 'zip'];
        const res = types.includes(val.type)
          ? await downloadFileResource(params, callback)
          : await downloadUrlFile(`assets/${val.path}`, callback);
        const fileName = types.includes(val.type) ? `${val.name}.${val.fileType}` : val.name;
        const blob = new Blob([res], { type: res.type });
        const downloadElement = document.createElement('a');
        const href = window.URL.createObjectURL(blob); // 创建链接
        downloadElement.href = href; // a标签赋值
        downloadElement.download = fileName; // 文件类型
        document.body.appendChild(downloadElement); // a标签添加到页面
        downloadElement.click(); // 执行a标签点击效果
        document.body.removeChild(downloadElement); // 移除a标签
        window.URL.revokeObjectURL(href); // 释放URL对象

注意
在请求的时候我们手动设置了响应头responseType: 'blob',请求后得到响应后需要动态获取响应中的blob进行设置const blob = new Blob([res], { type: res.type });，如果文件格式不能对应会出现下载的文件不能正确打开