画像やエクセルシートをダウンロードするためのタグシミュレーション

1. データストリームを直接ダウンロードし、バックエンドは取得リクエストのURLアドレスを返します。

データストリームの直接ダウンロード

export const ExportMemberData = (taskId,status) => {
 return `${API_PATH}/liz-qy-admin/authsec/task/group/msg/customers/user/export/${taskId}/${status}`
}
var a = document.createElement('a');
a.style.display = 'none';
a.download = 'download';
a.href = ExportMemberData(id,status);
a.click();

直接ダウンロードURL

//ExportManageGroupList POST 
//表をエクスポートする
 handleExport = () => {
 const { searchParmas, stop } = this.state
 if (stop) return
 this.setState({
 stop: true
 }, () => {
 ExportManageGroupList(searchParmas).then(res => {
 if (res.code == 100) {
 var a = document.createElement('a');
 a.style.display = 'none';
 a.download = 'download';
 a.href = res.data;
 a.click();
 this.setState({ stop: false })
 } else {
 throw res
 }
 }).catch(req => {
 this.setState({ stop: false })
 message.error(req.msg ? req.msg : 'サーバーエラー。')
 })
 })
 }

ジャンプダウンロード

downloadQrCode = (record)=>{
 let a = document.createElement('a')
 a.target = '_blank'
 a.href = record.staticUrl + '?d'
 a.click()
}

小塊

export const downloadImage = (imgUrl, download) => {
 function toDataURL(url) {
 return fetch(url).then((response) => {
 return response.blob();
 }).then(blob => {
 return URL.createObjectURL(blob);
 });
 }
 (async function() {
 const a = document.createElement("a");
 imgUrl = imgUrl+'?d='+Math.random()
 a.href = await toDataURL(imgUrl);
 a.setAttribute('download', download ? download:'pic.png')
 a.click();
 })()
}