亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開(kāi)發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

后端返回文件流,前端怎么導(dǎo)出、下載(8種方法可實(shí)現(xiàn))

freeflydom
2023年10月28日 16:48 本文熱度 1999

在前端導(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)文章
正在查詢...
點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點(diǎn),圍繞調(diào)度、堆場(chǎng)作業(yè)而開(kāi)發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi),不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved