原生javascript 实现导出功能

效果

页面代码

  <div class="mtm pts count" onclick="al({{testpaper.id}}, {{task.activityId}})">{{ '导出' }}</div>

  <script>
  //防止重复点击
  var isMoreClick = false
function al(testId, lessonId) {
  showLoading();
  if(!isMoreClick){
    isMoreClick = false
  }
  
  var exportData = {
    testId: lessonId,
    lessonId: testId
  };
  var url = '后端接口地址' + '?' + 'testId=' + testId + '&lessonId=' + lessonId
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'json';
  xhr.setRequestHeader('Content-Type', 'application/json');

  xhr.onload = function () {
    if (xhr.status === 200) {
      console.log(isMoreClick)
      var responseData = xhr.response;
      isMoreClick = true
      if (responseData && responseData.data) {
        downloadZip(responseData.data);
      } else {
        console.error('未获取到压缩包路径');
      }
    } else {
      console.error('请求失败');
    }
    hideLoading();
  };
  xhr.onerror = function () {
      isMoreClick = true
    console.error('请求发生错误');
    hideLoading();
  };
  xhr.send(JSON.stringify(exportData));
}
//加载效果
function showLoading() {
  const loadingElement = document.createElement('div');
  loadingElement.innerHTML = '正在下载，请耐心等待…';
  loadingElement.style.position = 'fixed';
  loadingElement.style.top = '50%';
  loadingElement.style.left = '50%';
  loadingElement.style.transform = 'translate(-50%, -50%)';
  loadingElement.style.background = '#c5bcbc';
  loadingElement.style.padding = '20px';
  loadingElement.style.borderRadius = '5px';
  loadingElement.classList.add('loading-element');
  document.body.appendChild(loadingElement);
}
function hideLoading() {
  const loadingElement = document.querySelector('.loading-element');
  if (loadingElement) {
    document.body.removeChild(loadingElement);
  }
}
function downloadZip(zipPath) {
  // 创建一个临时链接以便下载
  var baseUrl = '根地址'
  var fullUrl  = baseUrl + zipPath
  var a = document.createElement('a');
  a.href = fullUrl;
  a.setAttribute('download', ''); // 设置下载属性
  a.click();
}

  </script>

写在最后

最慢的步伐不是跬步，而是徘徊；最快的脚步不是冲刺，而是坚持。——摘自《人民日报》