下载事件，vue下载文件

下载的内容的类型可能很多，各种文件（例如：.txt，.jpg，.png，.docx，.xlsl）

一、如果已知是.docx,.xlsl这个格式可以下载最简单的就是a标签（限制太麻烦）

//如果是Excel,word,zip这种格式的文件a标签可以直接下载,或者href为相对地址时
<a download="filename"   href="文件地址">点击下载</a>
//如果是jpg,png,txt这种的格式就变成了打开
<a download="filename"   href="文件地址" target="_blank">点击下载</a>
//还有重定向的写法,pdf无法打开的又可以打开,
const w = window.open('about:blank');
w.location.href = pdfurl //pdfurl为完整的pdf的url
window.location.href = ExcelUrl //这种也能下载不能再网址上直接打开的文件

二 、要下载任意格式的文件，下载万能，可以封装一下做整个项目使用

    downloadNow() {
      let _this = this;
     //请求参数
      let params = {};
     //请求路径
    //axios,import axios from 'axios'
      axios.post(url, params, { responseType: "blob" })
    //.get(url, { responseType: 'blob' })//不需要参数的urlget请求
        .then(response=> {
          let blob = new Blob([response.data]);
          let fileName = "文件名.pdf";
          if ("download" in document.createElement("a")) {
            // 非IE下载
            let elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
          this.$message.success("生成文件成功");
        })
        .catch(err => {
          console.log(err);
          this.$message.error("服务器出现问题,请稍后再试");
        });
    }

三、封装一个公用方法使用

用了fecth请求和ant design，如果用axios和element只需fecth那一行,提示换成eml的这种this.$message('这是一条消息提示');

//这个用fetch和ant的UI组件
import fetch from 'dva/fetch';
import { stringify } from 'qs';
import { message } from 'antd';//ant提示的ui组件

// 导出项目列表
export default function download({ url = '', params = {}, fileName = 'file', method = 'POST', callbackFn }) {
  // header里加入x-auth-token信息，用于通过后台校验
  const token = sessionStorage.getItem(key);
  let newUrl = `${  url}`;
  const option = {
    method,
    credentials: 'include',
    headers: new Headers({
      'Content-Type': 'application/json',
      'x-auth-token': token,
    })
  }
  if (method === 'GET' || method === 'get') {
    newUrl = `${newUrl}?${stringify(params)}`;
  } else {
    Object.assign(option, { body: JSON.stringify(params) });
  }
  // 可以根据需求传特定的一些参数
  fetch(newUrl, option).then((response) => { //用axios的把fetch修改为axios.post,上面记得 
 //引入axios
    const resCopy = response.clone();
    resCopy.json().then(json => {
      if (typeof (json) === 'object' && json.code !== 200) {
        message.error(json.msg);//报错提示用对应的ui组件写法
        if (callbackFn && typeof (callbackFn) === 'function') {
          callbackFn(response)
        }
      }
    }).catch((error) => {
      response.blob().then(blob => {
        const blobUrl = window.URL.createObjectURL(blob);
        if ('download' in document.createElement('a')) {
            //非IE下载
            const a = document.createElement('a');
            // let a = document.getElementById('a_id');
            // 无法从返回的文件流中获取文件名
            // let filename = response.headers.get('Content-Disposition');
            a.href = blobUrl;
            a.download = fileName;
            a.click();
            window.URL.revokeObjectURL(blobUrl);
            document.removeChild(a);
        }else{
          // IE下载
          navigator.msSaveBlob(blob, fileName);

        }

      });
    })
    if (callbackFn && typeof (callbackFn) === 'function') {
      callbackFn(response)
    }
  }).catch((error) => {
    console.log(error);
    if (callbackFn && typeof (callbackFn) === 'function') {
      callbackFn(error)
    }
  });
};

//使用
import download from '@/utils/download';//导入封装的js
  export(params) {
    let url = '/export';//接口
    this.setState({ exportLoading: true })//导出加载状态，不同语言框架和ui框架不一样,但都是通
//过true和false控制显示和隐藏
    download({
      url,
      params,
      method: 'POST',
      fileName: `列表${moment(new Date()).format("YYYY-MM-DD")}.xlsx`,
      callbackFn: () => {
        this.setState({ exportLoading: false })
      }
    })

  };