자바스크립트에서 다운로드 기능을 구현하는 방법-프런트엔드 Q&A-php.cn

자바스크립트에서 다운로드 기능을 구현하는 방법

藏色散人

풀어 주다： 2023-02-10 09:57:09

원래의

3749명이 탐색했습니다.

JavaScript에서 다운로드 기능을 구현하는 방법: 1. a 태그를 통해 다운로드 2. "window.open" 메서드를 통해 다운로드 3. "location.href" 메서드를 통해 다운로드 4. 파일 전송을 통해 다운로드 블롭 객체 함수.

자바스크립트에서 다운로드 기능을 구현하는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, javascript 버전 1.8.5, Dell G3 컴퓨터.

자바스크립트에서 다운로드 기능을 어떻게 구현하나요?

js는 파일 다운로드 기능을 구현합니다.

1. 태그 다운로드

<body>
<button onClick="download()">a标签下载</button>
<script>
function download(url = &#39;http:www.xxx.com/download?name=file.pdf&#39;, fileName = &#39;未知文件&#39;) {
      const a = document.createElement(&#39;a&#39;);
      a.style.display = &#39;none&#39;;
      a.setAttribute(&#39;target&#39;, &#39;_blank&#39;);
      /*
       * download的属性是HTML5新增的属性
       * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
       * 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
       * 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
       */
      fileName && a.setAttribute(&#39;download&#39;, fileName);
      a.href = url;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
</script>
</body>

로그인 후 복사

장점:

txt, png, pdf, exe, xlsx 및 기타 유형의 파일을 직접 다운로드할 수 있습니다.

단점:

태그는 가져오기 요청만 할 수 있으므로 URL에는 길이 제한이 있습니다
다운로드 진행 상황을 확인할 수 없습니다
도메인 간 제한 사항
인증 작업을 위해 헤더에 토큰을 담을 수 없습니다
인터페이스를 확인할 수 없습니다. 성공 여부
IE 호환성 문제

2. window.open 다운로드

<body>
  <button onclick="download(&#39;http://www.xxx.com/download?name=file.pdf&#39;)">window.open下载</button>
  <script>
    function download(url) {
      window.open(url, &#39;_self&#39;);
      /**
       *  _blank：在新窗口显示目标网页
       *  _self：在当前窗口显示目标网页
       *  _top：框架网页中在上部窗口中显示目标网页
      /**
    }
  </script>
</body>

로그인 후 복사

장점:

간단하고 편리함

단점:

거기 URL 길이 제한 문제가 발생합니다
URL 인코딩 문제에 주의가 필요합니다
다운로드 진행 상황을 확인할 수 없습니다
인증 작업을 위해 헤더에 토큰을 담을 수 없습니다
인터페이스 성공
브라우저에서 직접 미리보기가 가능한 파일을 직접 다운로드할 수 없습니다. 유형(txt, png, pdf는 직접 미리보기됩니다)

3. location.href 다운로드

<body>
  <button onclick="download(&#39;http://www.xxx.com/download?name=file.pdf&#39;)">location.href下载
  </button>
  <script>
    function download(url) {
      window.location.href = url;
    }
  </script>
</body>

로그인 후 복사

장점

간단하고 편리하며 직접적입니다
대용량 파일(G 이상) 다운로드 가능

단점

URL 길이 제한 문제가 있습니다
URL 인코딩 문제에 주의가 필요합니다
다운로드 진행 상황을 확인할 수 없습니다
인증 작업을 위해 헤더에 토큰을 포함할 수 없습니다.
브라우저로 직접 다운로드할 수 없습니다. 직접 미리 볼 수 있는 파일 형식(txt, png, pdf는 직접 미리 볼 수 있습니다)
인터페이스가 성공적으로 반환되었는지 판단하는 것은 불가능합니다

3. 파일 전송 blob 개체 다운로드

 <button onclick="download()">文件流转blob对象下载</button>
 <script>
 download() {
 axios({
 url: &#39;http://www.xxx.com/download&#39;,
 method: &#39;get&#39;,
 responseType: &#39;blob&#39;,
 }).then(res => {
 const fileName = res.headers.content-disposition.split(&#39;;&#39;)[1].split(&#39;filename=&#39;)[1];
 const filestream = res.data;  // 返回的文件流
 // {type: &#39;application/vnd.ms-excel&#39;}指定对应文件类型为.XLS (.XLS的缩写就为application/vnd.ms-excel)
 const blob = new Blob([filestream], {type: &#39;application/vnd.ms-excel&#39;});
 const a = document.createElement(&#39;a&#39;);
 const href = window.URL.createObjectURL(blob); // 创建下载连接
    a.href = href;
    a.download = decodeURL(fileName );
    document.body.appendChild(a);
        a.click();
        document.body.removeChild(a); // 下载完移除元素
        window.URL.revokeObjectURL(href); // 释放掉blob对象
 })
 }
 </script>

로그인 후 복사

장점: