后端返回文件流,前端怎么導(dǎo)出、下載(8種方法可實(shí)現(xiàn))
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
在前端導(dǎo)出和下載后端返回的文件流時(shí),可以使用以下幾種方法: 使用window.open()方法: 在前端使用window.open()方法打開(kāi)一個(gè)新的窗口或標(biāo)簽頁(yè),并將后端返回的文件流作為URL傳遞給該方法。瀏覽器會(huì)自動(dòng)下載該文件。 例如:window.open('http://example.com/download', '_blank'); 使用<a>標(biāo)簽的download屬性: 創(chuàng)建一個(gè)隱藏的<a>標(biāo)簽,設(shè)置href屬性為后端返回的文件流的URL,同時(shí)設(shè)置download屬性為文件的名稱。然后使用Javascript模擬點(diǎn)擊該標(biāo)簽,觸發(fā)文件下載。 例如: const link = document.createElement('a'); link.href = 'http://example.com/download'; link.download = 'filename.ext'; link.click(); 使用Fetch API或XHR請(qǐng)求: 使用Fetch API或XHR(XMLHttpRequest)發(fā)送請(qǐng)求,獲取后端返回的文件流,并使用Blob對(duì)象創(chuàng)建一個(gè)URL。然后將該URL傳遞給<a>標(biāo)簽的href屬性,并使用Javascript模擬點(diǎn)擊該標(biāo)簽,觸發(fā)文件下載。 例如: fetch('http://example.com/download') .then(response => response.blob()) .then(blob => { const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'filename.ext'; link.click(); }); 這些方法可以根據(jù)具體的需求和項(xiàng)目環(huán)境選擇使用。需要注意的是,后端返回的文件流需要正確設(shè)置Content-Disposition響應(yīng)頭,以指定文件的名稱和下載方式。 除了上述提到的方法,還有以下五種方法可以實(shí)現(xiàn)前端導(dǎo)出和下載后端返回的文件流: 使用HTML5的download屬性: 創(chuàng)建一個(gè)<a>標(biāo)簽,設(shè)置href屬性為后端返回的文件流的URL,同時(shí)設(shè)置download屬性為文件的名稱。將該標(biāo)簽插入到DOM中,并使用Javascript模擬點(diǎn)擊該標(biāo)簽,觸發(fā)文件下載。 例如: const link = document.createElement('a'); link.href = 'http://example.com/download'; link.download = 'filename.ext'; document.body.appendChild(link); link.click(); document.body.removeChild(link); 使用FileSaver.js庫(kù): 引入FileSaver.js庫(kù),使用saveAs()方法將后端返回的文件流保存為本地文件。需要將后端返回的文件流轉(zhuǎn)換為Blob對(duì)象。 例如: import { saveAs } from 'file-saver'; fetch('http://example.com/download') .then(response => response.blob()) .then(blob => { saveAs(blob, 'filename.ext'); }); 使用iframe: 創(chuàng)建一個(gè)隱藏的iframe,將其src屬性設(shè)置為后端返回的文件流的URL。瀏覽器會(huì)自動(dòng)下載該文件。 例如: const iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = 'http://example.com/download'; document.body.appendChild(iframe); 使用FormData和XMLHttpRequest: 創(chuàng)建一個(gè)FormData對(duì)象,將后端返回的文件流作為Blob對(duì)象添加到FormData中。然后使用XMLHttpRequest發(fā)送請(qǐng)求,將FormData作為請(qǐng)求體發(fā)送到后端進(jìn)行下載。 例如: const formData = new FormData(); formData.append('file', blob, 'filename.ext'); const xhr = new XMLHttpRequest(); xhr.open('POST', 'http://example.com/download'); xhr.send(formData); 使用axios庫(kù): 使用axios庫(kù)發(fā)送請(qǐng)求,獲取后端返回的文件流,并將其保存為本地文件。需要將后端返回的文件流轉(zhuǎn)換為Blob對(duì)象。 例如: import axios from 'axios'; axios.get('http://example.com/download', { responseType: 'blob' }) .then(response => { const blob = new Blob([response.data]); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'filename.ext'; link.click(); }); 這些方法提供了多種選擇來(lái)實(shí)現(xiàn)前端導(dǎo)出和下載后端返回的文件流。根據(jù)具體的需求和項(xiàng)目環(huán)境,選擇適合的方法進(jìn)行實(shí)現(xiàn)。 ———————————————— 版權(quán)聲明:本文為CSDN博主「一花一world」的原創(chuàng)文章,遵循CC 4.0 BY-SA版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。 原文鏈接:https://blog.csdn.net/ACCPluzhiqi/article/details/132514874 該文章在 2023/10/28 16:48:37 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |