1、將后端excel二進制文件導出excel下載
import { read, utils, writeFileXLSX } from "xlsx";const useExportExcel = (excelData: string, fileName: string) => {const wb = read(excelData);const ws = wb.Sheets[wb.SheetNames[0]];// 從工作表生成數據行const data = utils.sheet_to_json(ws);// 從對象數組創建工作表const worksheet = utils.json_to_sheet(data);// 創建新工作簿const workbook = utils.book_new();// 工作表加到工作簿utils.book_append_sheet(workbook, worksheet);writeFileXLSX(workbook, fileName);
};
import { saveAs } from ‘file-saver’; // 適合下圖片、文件、壓縮包等(就是處理后端返回點擊等功能)
const onDownload = async (fileName: string) => {const res = await udfDownload(fileName);const name = fileName.slice(0, fileName.lastIndexOf('-'));saveAs(new Blob([res]), name);
};
下載常用的封裝
const downloadFun = (url: string, downloadFileName: string) => {const uint8Array = new Uint8Array(res?.result); // 需要看是否需要處理Uint8Arrayconst zipBlob = new Blob([uint8Array], { type: 'application/zip' });const url = URL.createObjectURL(zipBlob);const downloadLink = document.createElement("a");downloadLink.style.display = "none";downloadLink.download = downloadFileName;downloadLink.href = url;document.body.appendChild(downloadLink);downloadLink.click();document.body.removeChild(downloadLink);window.URL.revokeObjectURL(url);
};
https://blog.csdn.net/Zhuangvi/article/details/121063203(Vue 之 利用new Blob() 對后端返回文件流 或 base64字符串下載導出文件時不同文件類型的 type 值整理及函數封裝調用示例)
import JSZip from ‘jszip’; 處理zip文件
function downloadFile(hrefUrl, fileName){let a = document.createElement('a')a.href = hrefUrla.download = fileName // 下載后文件名document.body.appendChild(a)a.click() // 點擊下載document.body.removeChild(a) // 下載完成移除元素
}
// 封裝blob對象
function dataURLToBlob(base64Str, mimeTypeStr) {let bstr = window.atob(base64Str); // 解碼 base-64 編碼的字符串,base-64 編碼使用方法是 btoa()let length = bstr.length;let u8arr = new Uint8Array(length); // 創建初始化為0的,包含length個元素的無符號整型數組while (length--) {u8arr[length] = bstr.charCodeAt(length); // 返回在指定的位置的字符的 Unicode 編碼}return new Blob([u8arr], { type: mimeTypeStr }); // 返回一個blob對象
}
// 后端返回base64公共導出
function downloadFileByBase64(base64Str, mimeTypeStr, fileName){let myBlob = dataURLToBlob(base64Str, mimeTypeStr)let myUrl = window.URL.createObjectURL(myBlob)downloadFile(myUrl, fileName)
}
// 后端返回文件流公共導出
function downloadFileByFileFlow(blobData, mimeTypeStr, fileName) {let blob = new Blob([blobData], { type: mimeTypeStr })let hrefUrl = window.URL.createObjectURL(blob) // 創建下載的鏈接downloadFile(hrefUrl, fileName);
}