프런트엔드 파일을 다운로드하는 방법

프런트 엔드 파일을 다운로드하는 방법

2024-07-12

방법 1: 태그를 사용하여 직접 다운로드

<a href="链接" >下载</a>
1

파일 링크(보통 서버에 있는 파일) 이 링크는 일반적으로 첨부 파일을 다운로드하기 위한 것이 아니라 미리 보기 위해 주소 표시줄에 입력됩니다.

첨부파일 다운로드로 변경하시려면 다음 두 가지 방법 중 하나를 선택하시면 됩니다.
1. 백엔드 처리, 백엔드에 응답 헤더 추가

res.setHeader('Content-Dispostion', 'attachment', 'name.pdf')

1
2

2. a 태그에 다운로드 속성을 추가합니다.

<a href="链接" download="文件名" >下载</a>
1

방법 1의 단점:

단점: a 태그를 사용하여 JavaScript로 파일을 다운로드하는 경우 a 태그의 클릭 이벤트를 통해 브라우저 다운로드가 직접 트리거됩니다. 이는 단순한 GET 요청이므로 요청 헤더를 설정할 수 없습니다. 이 파일을 다운로드하는 데 토큰이 필요한 경우 a 태그는 유효하지 않으며(a 태그는 토큰을 전달할 수 없음) 미리 보기가 됩니다.
해결 방법: a 태그는 쿠키를 전달할 수 있으므로 파일을 다운로드하기 전에 임시 토큰을 가져오라는 요청을 보내고 쿠키를 통해 전달하십시오. 흐르는 물처럼 로컬 디스크에 저장되므로 다운로드를 직접 볼 수 있고 파일이 브라우저에 캐시되지 않습니다.

제목 방법 2: XMLHttpRequest 또는 Fetch API 요청을 사용합니다.

다운로드할 메소드 작성(기본적으로 다운로드하려면 여전히 a 태그를 사용함)
이 방법은 토큰을 전달할 수 있는 Ajax 요청일 수 있으며, 요청된 서버 파일을 Blob으로 변환하고, 다운로드용 태그를 생성하고, 가상 링크 요소를 생성하고, 클릭하여 다운로드를 시뮬레이션할 수 있습니다. 이 메서드는 프런트 엔드 스레드를 차지합니다.


import fetch from 'isomorphic-fetch';
const exportFile = (url, options) => {
  const projectId = sessionStorage.getItem(PROJECT_ID);
  const downLoadURL = projectId ? BATCH_ACTION_URL_PREFIX.V2 : BATCH_ACTION_URL_PREFIX.V1;
  const defaultOptions = {
    credentials: 'same-origin',
  };
  const newOptions = { ...defaultOptions, ...options };
  if (
    newOptions.method === 'POST' ||
    newOptions.method === 'PUT' ||
    newOptions.method === 'DELETE'
  ) {
    const projectId = sessionStorage.getItem(PROJECT_ID);
    const appId = sessionStorage.getItem(APP_ID);
    const shopId = sessionStorage.getItem(SHOP_ID);
    const params = {};
    projectId && Object.assign(params, { projectId });
    appId && Object.assign(params, { appId });
    shopId && Object.assign(params, { shopId });
    newOptions.body = { ...newOptions.body, ...params };
    if (!(newOptions.body instanceof FormData)) {
      newOptions.headers = {
        Accept: 'application/json',
        'Content-Type': 'application/json; charset=utf-8',
        ...newOptions.headers,
      };
    } else {
      // newOptions.body is FormData
      newOptions.headers = {
        Accept: 'application/json',
        ...newOptions.headers,
      };
    }
  }
  const token = window.localStorage.getItem(TOKEN);
  if (token) {
    newOptions.headers = {
      'X-Authorization': `Bearer ${token}`,
      ...newOptions.headers,
    };
  }
  const lang = localStorage.getItem(LOCALE_KEY);
  if (lang) {
    newOptions.headers = {
      'Accept-Language': lang,
      ...newOptions.headers,
    };
  }
  const requestURL = `${downLoadURL}/${url}`;
  return request(requestURL, newOptions).then(res => {
    let filename;
    if (res.headers) {
      filename = (
        res.headers.get('Content-Disposition') || res.headers.get('content-disposition')
      ).split('attachment;filename=')[1];
    }
    if (res.blob) {
      res.blob().then(blob => {
        var alink = document.createElement('a');
        alink.style.display = 'none';
        alink.target = '_blank';
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          // 兼容IE/Edge
          window.navigator.msSaveOrOpenBlob(blob, filename);
        } else {
          alink.href = window.URL.createObjectURL(blob);
          alink.download = filename;
        }
        document.body.appendChild(alink);
        alink.click();
        URL.revokeObjectURL(alink.href); // 释放URL 对象
        document.body.removeChild(alink);
      });
      return res;
    } else {
      if (res.code === 0) {
        return res;
      } else {
        message.warning(res.message);
      }
    }
  });
};

export default exportFile;


export default function request(url: string, options: Object) {
  const defaultOptions = {
    credentials: 'same-origin',
  };
  const newOptions = { ...defaultOptions, ...options };
  if (
    newOptions.method === 'POST' ||
    newOptions.method === 'PUT' ||
    newOptions.method === 'DELETE' ||
    newOptions.method === 'PATCH'
  ) {
    if (!(newOptions.body instanceof FormData)) {
      newOptions.headers = {
        Accept: 'application/json',
        'Content-Type': 'application/json; charset=utf-8',
        ...newOptions.headers,
      };
      newOptions.body = JSON.stringify(newOptions.body);
    } else {
      // newOptions.body is FormData
      newOptions.headers = {
        Accept: 'application/json',
        ...newOptions.headers,
      };
    }
  }

  return fetch(url, newOptions).then(response => checkStatus(response, url, options));
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

방법 2의 단점:

**파일이 작으면 괜찮습니다. 파일이 크면 클릭하여 다운로드할 수 있지만 몇 분 후에 다운로드가 나타납니다. a 태그의 스트리밍 다운로드가 수행되기 전에 서버 측을 blob(res.blob() 매우 오랜 시간이 걸렸습니다)(여기서만 다운로드의 대화형 반영이 페이지에 나타나기 시작했습니다)

기술나눔