Κοινή χρήση τεχνολογίας

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Μέθοδος 1: Άμεση λήψη με ετικέτα

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

Ένας σύνδεσμος αρχείου (συνήθως ένα αρχείο στο διακομιστή Αυτός ο σύνδεσμος εισάγεται γενικά στη γραμμή διευθύνσεων για προεπισκόπηση και όχι για λήψη συνημμένου).

Εάν θέλετε να το αλλάξετε σε λήψη συνημμένου, μπορείτε να επιλέξετε μία από τις ακόλουθες δύο μεθόδους:
1. Επεξεργασία Backend, προσθέστε μια κεφαλίδα απάντησης στο backend

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

1
2

2. Προσθέστε το χαρακτηριστικό λήψης στην ετικέτα a

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

Μειονεκτήματα της μεθόδου 1:

Μειονεκτήματα: Όταν χρησιμοποιείτε την ετικέτα για τη λήψη ενός αρχείου σε JavaScript, η λήψη του προγράμματος περιήγησης ενεργοποιείται απευθείας μέσω του συμβάντος κλικ της ετικέτας a Η κεφαλίδα του αιτήματος δεν μπορεί να οριστεί επειδή πρόκειται για ένα απλό αίτημα GET. Εάν η λήψη αυτού του αρχείου απαιτεί τη μεταφορά ενός διακριτικού, τότε η ετικέτα a δεν θα είναι αποτελεσματική (η ετικέτα a δεν μπορεί να φέρει το διακριτικό) και θα γίνει προεπισκόπηση.
Λύση: Η ετικέτα a μπορεί να μεταφέρει cookies, επομένως υπάρχει μια άλλη λύση Πριν κάνετε λήψη του αρχείου, στείλτε ένα αίτημα για να αποκτήσετε ένα προσωρινό διακριτικό και να το μεταφέρετε μέσω του cookie όπως το τρεχούμενο νερό αποθηκεύεται στον τοπικό δίσκο, έτσι ώστε η λήψη να εμφανίζεται απευθείας και το αρχείο δεν θα αποθηκευτεί προσωρινά στο πρόγραμμα περιήγησης.

Μέθοδος τίτλου δύο: Χρησιμοποιήστε αίτημα 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

Μειονεκτήματα της δεύτερης μεθόδου:

**Εάν το αρχείο είναι μικρό, θα είναι εντάξει, εάν το αρχείο είναι μεγάλο, θα κάνετε κλικ για λήψη, αλλά δεν θα υπάρξει απάντηση η πλευρά του διακομιστή σε μια μάζα (res.blob () Χρειάστηκε πολύς χρόνος) μέχρι να πραγματοποιηθεί η λήψη ροής της ετικέτας a (μόνο εδώ άρχισε να εμφανίζεται στη σελίδα η διαδραστική αντανάκλαση της λήψης)