자바스크립트를 이용하여 한 번의 다운로드로 여러 작업을 구현하는 방법 소개

이 기사는 PHP 시너지 구현에 대한 자세한 설명을 제공합니다(코드 포함). 필요한 친구가 참고할 수 있기를 바랍니다.

실제 경험

최근 개발 프로젝트에는 파일 다운로드가 필요합니다. 생각해보면 꽤 간단합니다. 이전에도 배경은 다운로드 인터페이스를 제공하고 프런트엔드는 window.location.href만 사용했습니다. 그런데 개발 중에 일부 파일에 첨부파일이 있는 것을 발견했습니다. 다운로드 버튼을 클릭하면 두 개의 파일을 다운로드해야 하며, 압축된 패키지를 사용할 수 없습니다. 생각해 보면 다운로드를 클릭하고 두 개의 다운로드 요청을 보내면 완료됩니다.

그냥 해보면 5를 2로 나눈 획이 적혀있어서 깜놀했는데 첫 요청이 자동으로 취소되더니 갑자기 10,000 바보가 지나갔네요(외국서버라서) , 다운로드가 느리고 첫 번째 요청이 취소됨), 이는 다른 다운로드 버튼을 빠르게 클릭하면 동일한 문제가 발생한다는 것을 의미하며 이는 좋지 않으며 자체 다운로드 탐색 여정을 시작했습니다.

a tag & location.href

a 태그와 href가 다운로드 링크를 가리키면 파일을 다운로드하는 것과 동일하다는 것을 알고 있습니다. 단일 파일 다운로드는 괜찮지만 다운로드 버튼 몇 개를 빠르게 클릭하면 됩니다. , 일부 다운로드가 실패합니다. 취소되면 괜찮지 않습니다. Baidu로 계속 진행하세요.

이전 코드:

const download = (url)=>{
   window.location.href = url;
}

window.open

window.open이 새 창을 열 수 있다는 것을 알고 있으니 다운로드가 가능할까요? 너무 기대되서 빨리 시도해 보았더니 정말 다운로드가 가능하네요. 빨리 새창을 열겠습니다. 새창이 닫혀서 사용감이 너무 안좋아서 과감히 포기했습니다.

iframe

iframe도 서버에 요청을 보낼 수 있다는 생각이 문득 들었습니다. 너무 신나서 빨리 다시 시도해 봤는데, 위배감 없이 다운로드가 가능하네요.

export const downloadFile = (url) => {
  const iframe = document.createElement("iframe");
  iframe.style.display = "none"; // 防止影响页面
  iframe.style.height = 0; // 防止影响页面
  iframe.src = url; 
  document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
  // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
  setTimeout(()=>{
    iframe.remove();
  }, 5 * 60 * 1000);
}

ps: iframe은 서로 영향을 미치지 않으며 지속적으로 다운로드할 수 있습니다!

다른 솔루션

물론 양식 다운로드, 바이너리 스트림 다운로드 등 다른 방법도 있습니다. 시간이 있으면 직접 공부해 보세요.

위 내용은 자바스크립트를 이용하여 한 번의 다운로드로 여러 작업을 구현하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!