私の連絡先情報
郵便メール:
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
<a href="链接" >下载</a>
ファイル リンク (通常はサーバー上のファイル) このリンクは通常、添付ファイルをダウンロードするためではなく、プレビューするためにアドレス バーに入力されます。
添付ファイルのダウンロードに変更する場合は、次の 2 つの方法のいずれかを選択できます。
1. バックエンド処理、バックエンドに応答ヘッダーを追加します。
res.setHeader('Content-Dispostion', 'attachment', 'name.pdf')
2. aタグにdownload属性を追加する
<a href="链接" download="文件名" >下载</a>
欠点: JavaScript で a タグを使用してファイルをダウンロードする場合、これは単純な GET リクエストであるため、ブラウザのダウンロードは a タグのクリック イベントを通じて直接トリガーされます。このファイルのダウンロードにトークンを運ぶ必要がある場合、a タグは無効になり (a タグはトークンを運ぶことができません)、プレビューになります。
解決策: a タグは Cookie を送信できるため、別の解決策があります。ファイルをダウンロードする前に、一時トークンを取得するリクエストを送信し、それを 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));
}
**ファイルが小さい場合は問題ありません。ファイルが大きい場合は、クリックしてダウンロードしますが、数分後にダウンロードが表示されます。この待ち時間はファイルを変換するためのものです。 a タグのストリーミング ダウンロードが実行される前に、サーバー側が blob (res.blob () に非常に長い時間がかかりました) に変換されます (ここでのみ、ダウンロードのインタラクティブな反映がページに表示され始めました)