pc-component-v5/packages/common/DownloadService.js

import Common from './Common.js';
import Notify from './Notify.js';
const showFullscreenLoading = () => {
  // 创建全屏遮罩
  const overlay = document.createElement('div');
  overlay.style.position = 'fixed';
  overlay.style.top = '0';
  overlay.style.left = '0';
  overlay.style.width = '100vw';
  overlay.style.height = '100vh';
  overlay.style.backgroundColor = '#96e5b8';
  overlay.style.zIndex = '9999';
  overlay.style.opacity = '0.6';
  overlay.style.display = 'flex';
  overlay.style.justifyContent = 'center';
  overlay.style.alignItems = 'center';
  overlay.id = 'fullscreen-loading';

  // 创建旋转动画元素
  const spinner = document.createElement('div');
  spinner.style.width = '50px';
  spinner.style.height = '50px';
  spinner.style.border = '5px solid rgb(20, 214, 140)';
  spinner.style.borderRadius = '50%';
  spinner.style.opacity = '1';
  spinner.style.borderTopColor = '#fff';
  spinner.style.animation = 'spin 1s linear infinite';

  // 添加CSS动画关键帧
  const style = document.createElement('style');
  style.textContent = `
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
  `;

  overlay.appendChild(spinner);
  document.body.appendChild(style);
  document.body.appendChild(overlay);
};

const hideFullscreenLoading = () => {
  const overlay = document.getElementById('fullscreen-loading');
  if (overlay) {
    overlay.remove();
    // 移除动态添加的style标签
    document.querySelector('style').remove();
  }
};
/**
 * 报表下载服务
 */
export default {


  /**
   * GET 方式下载文件
   * @param {*} url 
   * @param {*} fileName 
   */
  downloadFile: function (url, fileName) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    const token = localStorage.getItem('#token');
    xhr.setRequestHeader('token', token);
    xhr.setRequestHeader('Content-type', 'application/json');
    xhr.responseType = 'blob';
    showFullscreenLoading();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          let res = xhr.response;
          let type = xhr.getResponseHeader('Content-Type');
          let blob = new Blob([res], { type: type });
          const blobUrl = URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.download = fileName;
          link.style.display = 'none';
          link.href = blobUrl;
          document.body.appendChild(link);
          link.click();
          URL.revokeObjectURL(blobUrl);
          document.body.removeChild(link);
        }
        hideFullscreenLoading();
      }
    };
    xhr.onerror = function () {
      hideFullscreenLoading();
      Notify.error('文件下载失败');
    };
    xhr.send();
  },


  /**
   * 报表下载
   * @param {Object} fileName
   * @author GuoZhiBo 20200410
   */
  reportDownload: function (fileName) {
    var downloadUrl = Common.getApiURL('file/reportDownload') + '?fileName=' + window.encodeURIComponent(fileName);
    this.downloadFile(downloadUrl, fileName);
  },

  /**
   * 文件下载
   * @param {Object} className 类名称
   * @param {Object} fileName 文件名称
   * @author GuoZhiBo 20211008
   */
  fileDownload: function (className, fileName) {
    var downloadUrl = Common.getApiURL('file/fileDownload') + '?className=' + className
      + '&fileName=' + window.encodeURIComponent(fileName);
    this.downloadFile(downloadUrl, fileName);
  },

  /**
   * POST 方式下载文件
   * @param {http请求的地址} url 
   * @param {post请求需要的参数} params 
   */
  postDownloadFile: function (url, params) {
    var form = document.createElement('form');
    form.style.display = 'none';
    form.action = url;
    form.method = 'post';
    document.body.appendChild(form);
    // 动态创建input并给value赋值
    for (var key in params) {
      var input = document.createElement('input');
      input.type = 'hidden';
      input.name = key;
      input.value = params[key];
      form.appendChild(input);
    }
    form.submit();
    form.remove();
  },
};