집 > 기사 > 웹 프론트엔드 > 자바스크립트에서 다운로드 기능을 구현하는 방법

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

藏色散人원래의: 2023-02-10 09:18:193692검색

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
백엔드에서 반환된 파일 스트림이 다운로드되기 전에만 얻을 수 있다고 명시되어 있습니다.
추천 학습: "

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

JavaScript safari Token 接口 JS 对象 location href issue

성명：

이전 기사：자바스크립트에서 날짜를 숫자로 변환하는 방법다음 기사：자바스크립트에서 날짜를 숫자로 변환하는 방법