τα στοιχεία επικοινωνίας μου
Ταχυδρομείο[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
<a href="链接" >下载</a>
Ένας σύνδεσμος αρχείου (συνήθως ένα αρχείο στο διακομιστή Αυτός ο σύνδεσμος εισάγεται γενικά στη γραμμή διευθύνσεων για προεπισκόπηση και όχι για λήψη συνημμένου).
Εάν θέλετε να το αλλάξετε σε λήψη συνημμένου, μπορείτε να επιλέξετε μία από τις ακόλουθες δύο μεθόδους:
1. Επεξεργασία Backend, προσθέστε μια κεφαλίδα απάντησης στο backend
res.setHeader('Content-Dispostion', 'attachment', 'name.pdf')
2. Προσθέστε το χαρακτηριστικό λήψης στην ετικέτα a
<a href="链接" download="文件名" >下载</a>
Μειονεκτήματα: Όταν χρησιμοποιείτε την ετικέτα για τη λήψη ενός αρχείου σε JavaScript, η λήψη του προγράμματος περιήγησης ενεργοποιείται απευθείας μέσω του συμβάντος κλικ της ετικέτας a Η κεφαλίδα του αιτήματος δεν μπορεί να οριστεί επειδή πρόκειται για ένα απλό αίτημα GET. Εάν η λήψη αυτού του αρχείου απαιτεί τη μεταφορά ενός διακριτικού, τότε η ετικέτα a δεν θα είναι αποτελεσματική (η ετικέτα a δεν μπορεί να φέρει το διακριτικό) και θα γίνει προεπισκόπηση.
Λύση: Η ετικέτα a μπορεί να μεταφέρει cookies, επομένως υπάρχει μια άλλη λύση Πριν κάνετε λήψη του αρχείου, στείλτε ένα αίτημα για να αποκτήσετε ένα προσωρινό διακριτικό και να το μεταφέρετε μέσω του cookie όπως το τρεχούμενο νερό αποθηκεύεται στον τοπικό δίσκο, έτσι ώστε η λήψη να εμφανίζεται απευθείας και το αρχείο δεν θα αποθηκευτεί προσωρινά στο πρόγραμμα περιήγησης.
Γράψτε μια μέθοδο λήψης (ουσιαστικά εξακολουθεί να χρησιμοποιείτε την ετικέτα 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));
}
**Εάν το αρχείο είναι μικρό, θα είναι εντάξει, εάν το αρχείο είναι μεγάλο, θα κάνετε κλικ για λήψη, αλλά δεν θα υπάρξει απάντηση η πλευρά του διακομιστή σε μια μάζα (res.blob () Χρειάστηκε πολύς χρόνος) μέχρι να πραγματοποιηθεί η λήψη ροής της ετικέτας a (μόνο εδώ άρχισε να εμφανίζεται στη σελίδα η διαδραστική αντανάκλαση της λήψης)