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

藏色散人
풀어 주다: 2023-02-10 09:57:09
원래의
3768명이 탐색했습니다.

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>
로그인 후 복사
장점:

  • txt, png, pdf 및 기타 유형의 파일을 다운로드할 수 있습니다

  • 수 있습니다. 인증 작업을 위해 헤더에 토큰을 가지고 가세요

  • 파일 다운로드 진행 상황을 확인할 수 있습니다

  • 인터페이스가 성공적으로 반환되는지 판단할 수 있습니다

단점:

  • 호환성 문제, 아래에서는 사용할 수 없습니다. IE10. 공식 웹사이트에는 Safari에 application/octet-stream

  • 백엔드에서 반환된 파일 스트림이 다운로드되기 전에만 얻을 수 있다고 명시되어 있습니다.

    추천 학습: "
  • JavaScript 비디오 튜토리얼
"

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿