在前端導(dǎo)出和下載后端返回的文件流時(shí)，可以使用以下幾種方法：

1. 使用window.open()方法：

   • 在前端使用window.open()方法打開一個(gè)新的窗口或標(biāo)簽頁，并將后端返回的文件流作為URL傳遞給該方法。瀏覽器會(huì)自動(dòng)下載該文件。
   • 例如：window.open('http://example.com/download', '_blank');

2. 使用<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();
   

3. 使用Fetch API或XHR請求：

   • 使用Fetch API或XHR（XMLHttpRequest）發(fā)送請求，獲取后端返回的文件流，并使用Blob對象創(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)出和下載后端返回的文件流：

4. 使用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);
   

5. 使用FileSaver.js庫：

   • 引入FileSaver.js庫，使用saveAs()方法將后端返回的文件流保存為本地文件。需要將后端返回的文件流轉(zhuǎn)換為Blob對象。
   • 例如：

   import { saveAs } from 'file-saver';
   
   fetch('http://example.com/download')
     .then(response => response.blob())
     .then(blob => {
       saveAs(blob, 'filename.ext');
     });
   

6. 使用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);
   

7. 使用FormData和XMLHttpRequest：

   • 創(chuàng)建一個(gè)FormData對象，將后端返回的文件流作為Blob對象添加到FormData中。然后使用XMLHttpRequest發(fā)送請求，將FormData作為請求體發(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);
   

8. 使用axios庫：

   • 使用axios庫發(fā)送請求，獲取后端返回的文件流，并將其保存為本地文件。需要將后端返回的文件流轉(zhuǎn)換為Blob對象。
   • 例如：

   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();
     });
   

這些方法提供了多種選擇來實(shí)現(xiàn)前端導(dǎo)出和下載后端返回的文件流。根據(jù)具體的需求和項(xiàng)目環(huán)境，選擇適合的方法進(jìn)行實(shí)現(xiàn)。文章來源地址http://www.zghlxwxcb.cn/news/detail-680661.html

到了這里，關(guān)于后端返回文件流，前端怎么導(dǎo)出、下載（8種方法可實(shí)現(xiàn)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！