下载文件(请求接口发送url)

今天做了一个下载文件的功能,浅录一下啦。

功能背景:

表单提交,点击submit。根据接口返回参数判断,如果当前返回成功,则不考虑。返回失败,则展示错误弹框,点击download file按钮,将返参errorFiledId作为入参,调用下载文件接口且将文件下载到本地。

下载文件命名 = fileName + 当前年月日

// 获取当前的年月日
  const GMTToStr = () => {
    const date = new Date();
    const Str = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    return Str;
  };

  // 下载文件并保存到本地
  const callback = data => {
    // 创建a标签,使用 html5 download 属性下载,
    const link = document.createElement('a');
    // 创建url对象
    const objectUrl = window.URL.createObjectURL(new Blob([data]));
    link.style.display = 'none';
    link.href = objectUrl;
    // 自定义文件名称, fileName
    link.download = 'File Error' + GMTToStr();
    document.body.appendChild(link);
    link.click();
    // 适当释放url
    window.URL.revokeObjectURL(objectUrl);
  };


  // 返回file信息则进行download file操作
  const handleDownloadFile = () => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `/download/${errFiledId}`, true);
    xhr.responseType = 'blob';
    xhr.onload = () => {
      // 返回文件流,进行下载处理
      callback(xhr.response);
    };
    xhr.send();
  };

最后结果如下图所示:

下载文件(请求接口发送url)_第1张图片

 

 下载文件(请求接口发送url)_第2张图片

 

你可能感兴趣的:(ajax,javascript,ajax)