前端導入導出

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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/716138.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/716138.shtml
英文地址,請注明出處:http://en.pswp.cn/news/716138.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Android 將圖片網址url轉化為bitmap

1. 圖片網址url轉化為bitmap 1.1. 方法一 通過 HttpURLConnection 請求 要使用一個線程去訪問,因為是網絡請求,這是一個一步請求,不能直接返回獲取,要不然永遠為null,在這里得到BitMap之后記得使用Hanlder或者EventBu…

React之useState hook

實現useState js實現一個useState,簡單的原理就是賦值然后更新渲染,大概偽代碼如下: function useState(initValue) {let value initValue;function setValue(v) {if (typeof v "function") {value v(initValue);} else {value…

StarRocks實戰——首汽約車實時數倉實踐

目錄 前言 一、引入背景 二、OLAP引擎選型 三、架構演進 四、實時數倉構建 五、業務實踐價值未來規劃 原文大佬的這篇首汽約車實時數倉實踐有借鑒意義,這里摘抄下來用作學習和知識沉淀。 前言 首汽約車(以下簡稱“首約”)是首汽集團打造…

物體檢測-系列教程20:YOLOV5 源碼解析10 (Model類前向傳播、forward_once函數、_initialize_biases函數)

😎😎😎物體檢測-系列教程 總目錄 有任何問題歡迎在下面留言 本篇文章的代碼運行界面均在Pycharm中進行 本篇文章配套的代碼資源已經上傳 點我下載源碼 14、Model類 14.2 前向傳播 def forward(self, x, augmentFalse, profileFalse):if augm…

MySQL 8.0 架構 之錯誤日志文件(Error Log)(2)

文章目錄 MySQL 8.0 架構 之錯誤日志文件(Error Log)(2)MySQL錯誤日志文件(Error Log)錯誤日志相關參數log_errorlog_error_services過濾器(Filter Error Log Components)寫入/接收器…

Vue+SpringBoot打造大學計算機課程管理平臺

目錄 一、摘要1.1 項目介紹1.2 項目錄屏 二、功能模塊2.1 實驗課程檔案模塊2.2 實驗資源模塊2.3 學生實驗模塊 三、系統設計3.1 用例設計3.2 數據庫設計3.2.1 實驗課程檔案表3.2.2 實驗資源表3.2.3 學生實驗表 四、系統展示五、核心代碼5.1 一鍵生成實驗5.2 提交實驗5.3 批閱實…

131. 分割回文串(力扣LeetCode)

文章目錄 131. 分割回文串題目描述回溯代碼 131. 分割回文串 題目描述 給你一個字符串 s,請你將 s 分割成一些子串,使每個子串都是 回文串 。返回 s 所有可能的分割方案。 回文串 是正著讀和反著讀都一樣的字符串。 示例 1: 輸入&#xf…

Android 架構MVI、MVVM、MVC、MVP

目錄 一、MVC(Model-View-Controller) 二、 MVP(Model-View-Presenter) 三. MVVM(Model-View-ViewModel) 四. MVI(Model-View-Intent) 五.MVI簡單實現 先簡單了解一下MVC、MVP和…

索引使用規則6——單列索引聯合索引

1、單列索引 單列索引:即一個索引只包含單個列 舉個例子 1.1、給phone和那么建立索引 create index index_name on tb_qianzhui(name); create index index_phone on tb_qianzhui(phone);1.2、查詢發現可能的索引有好幾個,但是最終選擇了phone的索引…

軟考 系統分析師系列知識點之詳細調查(2)

接前一篇文章:軟考 系統分析師系列知識點之詳細調查(1) 所屬章節: 第10章. 系統分析 第2節. 詳細調查 在系統規劃階段,通過初步調查,系統分析師已經對企業的組織結構、系統功能等有了大致的了解。但是&…

蘿卜大雜燴 | 提高數據科學工作效率的 8 個 Python 庫

本文來源公眾號“蘿卜大雜燴”,僅用于學術分享,侵權刪,干貨滿滿。 原文鏈接:提高數據科學工作效率的 8 個 Python 庫 在進行數據科學時,可能會浪費大量時間編碼并等待計算機運行某些東西。所以我選擇了一些 Python 庫…

Vue3中的Hooks詳解

vue3帶來了Composition API,其中Hooks是其重要組成部分。之前我寫過一篇關于vue3 hooks的文章比較簡單 Vue3從入門到刪庫 第十一章(自定義hooks) 所以本文將深入探討Vue3中Hooks,幫助你在Vue3開發中更加得心應手。 一、Vue3 Hoo…

貪吃蛇(C語言)步驟講解

一:文章大概 使用C語言在windows環境的控制臺中模擬實現經典小游戲 實現基本功能: 1.貪吃蛇地圖繪制 2.蛇吃食物的功能(上,下,左,右方向控制蛇的動作) 3.蛇撞墻死亡 4.計算得分 5.蛇身加…

[C語言]——C語言常見概念(1)

目錄 一.C語言是什么、 二.C語言的歷史和輝煌 三.編譯器的選擇(VS2022為例) 1.編譯和鏈接 2.編譯器的對比 3.VS2022 的優缺點 四.VS項目和源文件、頭文件介紹 五.第?個C語言程序 ??????? 一.C語言是什么、 ?和?交流使?的是?然語?&…

【python】爬取鏈家二手房數據做數據分析【附源碼】

一、前言、 在數據分析和挖掘領域中,網絡爬蟲是一種常見的工具,用于從網頁上收集數據。本文將介紹如何使用 Python 編寫簡單的網絡爬蟲程序,從鏈家網上海二手房頁面獲取房屋信息,并將數據保存到 Excel 文件中。 二、效果圖&#…

【JS】解構賦值注意點,解構賦值報錯

報錯代碼 const 小明 { email: 6, pwd: 66 } const 小剛 { email: 9, pwd: 99 }const { email } 小明 const { email } 小剛 報錯圖 原因 2個常量重復,重復在同一個作用域內是不能重復的,例如大括號內{const a 1; const a 2} 小伙伴A提問 問&…

Redis-基礎篇

Redis是一個開源、高性能、內存鍵值存儲數據庫,由 Salvatore Sanfilippo(網名antirez)創建,并在BSD許可下發布。它不僅可以用作緩存系統來加速數據訪問,還可以作為持久化的主數據存儲系統或消息中間件使用。Redis因其數…

leetcode:37.解數獨

題目理解:本題中棋盤的每一個位置都要放一個數字(而N皇后是一行只放一個皇后),并檢查數字是否合法,解數獨的樹形結構要比N皇后更寬更深。 代碼實現:

SpringBoot+Redis 解決海量重復提交問題,yyds!

在實際的開發項目中,一個對外暴露的接口往往會面臨很多次請求,我們來解釋一下冪等的概念:任意多次執行所產生的影響均與一次執行的影響相同。按照這個含義,最終的含義就是 對數據庫的影響只能是一次性的,不能重復處理。如何保證其…

?動類型轉換、強制類型轉換

為何short s1 1;是對的,而float f3.4;是錯的? 整數直接量,默認是int型。所以int a 4L; 會報錯,但是long l 4; 這樣不會,因為這樣會形成一個自動類型的轉換,int類型自動轉換為long類型 小數直接量&#…