Skip to content

01、处理文件大小展示

js
/**
 * @description 计算文件大小
 * @param {number} fileSize 文件大小
 * @return {string} 计算后的文件大小值
 **/
export const fileHandle = (fileSize = 0) => {
  if (!fileSize) return null;
  let size = 0,
    unit = "";
  if (fileSize > 1073741824) {
    size = (fileSize / 1073741824).toFixed(4) * 1;
    unit = "GB";
  } else if (fileSize > 1048576) {
    size = (fileSize / 1048576).toFixed(4) * 1;
    unit = "MB";
  } else if (fileSize > 1024) {
    size = (fileSize / 1024).toFixed(4) * 1;
    unit = "KB";
  } else {
    size = fileSize;
    unit = "B";
  }
  return size + unit;
};

02、通过文件 url 下载并重命名

js
/**
 * @description 下载文件
 * @param {string} fileUrl 文件链接地址
 * @param {string} fileName 下载文件名称
 **/
const downloadFile = (fileUrl, fileName) => {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  // 响应类型设置为blob
  xhr.responseType = "blob";
  // 请求成功
  xhr.addEventListener("load", function () {
    if (xhr.status === 200) {
      const a = document.createElement("a");
      a.href = window.URL.createObjectURL(xhr.response);
      a.download = fileName;
      // 将a标签添加到body中是为了更好的兼容性,谷歌浏览器可以不用添加
      document.body.appendChild(a);
      a.click();
      // 移除
      a.remove();
      // 释放url
      window.URL.revokeObjectURL(a.href);
    }
  });
  // 监听下载进度
  xhr.addEventListener("progress", function (e) {
    let percent = Math.trunc((e.loaded / e.total) * 100);
  });
  // 错误处理
  xhr.addEventListener("error", function (e) {
    // todo
  });
  // 发送请求
  xhr.send();
};