vue中下載文件的方法示例詳解

更新時(shí)間：2023年11月14日 14:18:56 作者：簡單Janeee

這篇文章主要介紹了vue中下載文件的方法,通過實(shí)例代碼講解了下載后端返回文件和下載本地文件，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

1. 下載后端返回文件

1.1 后端為post請求返回二進(jìn)制流文件

Blob

Blob對象標(biāo)識(shí)一個(gè)不可變、原始數(shù)據(jù)的類文件對象。Blob表示的不一定是JavaScript原生格式的數(shù)據(jù)

responseType

responseType它表示服務(wù)器響應(yīng)的數(shù)據(jù)類型，由于后臺(tái)返回來的是二進(jìn)制數(shù)據(jù)，所以要把它設(shè)為‘blob’

通過設(shè)置responseType為blob，可以直接拿到二進(jìn)制文件轉(zhuǎn)化為Blob，兩種使用 Blob 實(shí)現(xiàn)文件下載的方式

URL.createObjectURL

在瀏覽器端，實(shí)現(xiàn)直接下載文件，就是使用a標(biāo)簽來只想文件的下載地址。window.location.href的本質(zhì)也是這樣，因此在拿到二進(jìn)制文件對應(yīng)的Blob對象后，需要為這個(gè)Blob對象創(chuàng)建一個(gè)指向它的下載地址的URL

URL.createObjectURL 方法則可以實(shí)現(xiàn)接收 File 或 Blob 對象，創(chuàng)建一個(gè) DOMString，包含了對應(yīng)的 URL，指向 Blob 或 File 對象，它看起來會(huì)是這樣：

“blob:http://localhost:8080/a48aa254-866e-4c66-ba79-ae71cf5c1cb3”

完整使用：

export const downloadFile = (fileStream, name, extension, type = "") => {
  const blob = new Blob([fileStream], {type});
  const fileName = `${name}.${extension}`;
  if ("download" in document.createElement("a")) {
    const elink = document.createElement("a");
    elink.download = fileName;
    elink.style.display = "none";
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    URL.revokeObjectURL(elink.href);
    document.body.removeChild(elink);
  } else {
    navigator.msSaveBlob(blob, fileName);
  }
};

FileReader

FileReader 對象也可以使得我們對 Blob 對象生成一個(gè)下載地址 URL，它和 URL.createObject 一樣可以接收 File 或 Blob 對象。
這個(gè)過程，主要由兩個(gè)函數(shù)完成readAsDataURL和onload，前者用于將Blob或File對象轉(zhuǎn)為對應(yīng)的URL，后者用于接收前者完成后的URL，它會(huì)在e.target.result上
完整使用：

const readBlob2Url  =  (blob, type) =>{
  return new Promise(resolve => {
    const reader = new FileReader()
    reader.onload = (e) => {
      resolve(e.target.result)
    }
    reader.readAsDataURL(blob)
  })
}

1.2 后端直接返回get請求文件

<a href=‘get請求返回的地址’></a>

2. 下載本地文件

前端項(xiàng)目中下載某個(gè)地址的文件模塊，文件不想放到后端去下載，在文件大小不太大的情況下，可以把文件放在前端項(xiàng)目中，無論開發(fā)環(huán)境還是生產(chǎn)環(huán)境，都能在同樣路徑下找到那個(gè)文件

1.在vue-cli3.x的版本中，將需要下載的文件放到public文件夾中

2.下載文件

<script>
downloadUrl: `${process.env.BASE_URL}file/xxx_template.xlsx`, // 模板下載文件地址
</script>
<template>
<a :href="downloadUrl">點(diǎn)擊下載</a>
</template>

參考資料：
詳解，從后端導(dǎo)出文件到前端（Blob）下載過程

到此這篇關(guān)于vue中下載文件的方法的文章就介紹到這了,更多相關(guān)vue下載文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: