vue +xlsx+exceljs 導出excel文檔

實現功能:分標題行導出數據過多,一個sheet表里表格條數有限制,需要分sheet顯示。

步驟1:安裝插件包

npm install exceljs

npm install xlsx

步驟2:引用包

? ? import XLSX from 'xlsx';
?? ?import ExcelJS from 'exceljs';

步驟3:舉例按關鍵代碼說明

//通用方法
async xlsxExport(titles,columns,data,pageSize){let workbook = new ExcelJS.Workbook();				let pageNo = Math.ceil(data.length*1.0/pageSize);for(var p=0;p<pageNo;p++){//創建Sheet表const worksheet = workbook.addWorksheet('Sheet'+(p+1));				  for(let t=1;t<=titles.length;t++){ //判斷單元格是否已合并if(!worksheet.getRow(t).getCell(1).isMerged){worksheet.mergeCells( t, 0 ,t, columns.length );}//合并單元格填充值worksheet.getRow(t).getCell(1).value=titles[t-1];//單元格增加樣式if(t==1){worksheet.getRow(t).getCell(1).alignment = { vertical: 'middle', horizontal: 'center' };worksheet.getRow(t).getCell(1).font = { bold: true, size: 16 };}else{				worksheet.getRow(t).getCell(1).alignment = {vertical: 'middle', horizontal: 'left' };}}//填充標題列worksheet.addRow(columns);let pdata = [];//組織當前sheet的數據結構data.forEach(item=>{if(item[0]>=p*pageSize && item[0]<=(p+1)*pageSize){pdata.push(item);}});worksheet.addRows(pdata);}//所有sheet填充完,寫入xlsx文件并下載const buffer = await workbook.xlsx.writeBuffer();const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });// 創建下載鏈接const url = URL.createObjectURL(blob);const link = document.createElement('a');link.href = url;link.download = titles[0]+".xlsx";document.body.appendChild(link);link.click();document.body.removeChild(link);URL.revokeObjectURL(url);						}

步驟4:舉例應用

let str2 = `ROWS,A,B,C`;
let titles=["excel導出實例",`當前日期:${this.currTime}];
let columns=["序號","A對應的列標題","B對應的列標題","C對應的列標題"];
let data =[{[對應str2的值]},{[對應str2的值]}];//對應數據值
let pageSize = 1000;//對應sheet表顯示條數
await this.xlsxExport(titles,columns,data,pageSize);

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

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

相關文章

ThinkPad T440P如何從U盤安裝Ubuntu24.04系統

首先制作一個安裝 U 盤。我使用的工具是 Rufus &#xff0c;它的官網是 rufus.ie &#xff0c;去下載最新版就可以了。直接打開這個工具&#xff0c;選擇自己從ubuntu官網下載Get Ubuntu | Download | Ubuntu的iso鏡像制作U盤安裝包即可。 其次安裝之前&#xff0c;還要對 Thi…

第十七次博客打卡

今天學習的內容是動態規劃算法。 動態規劃算法&#xff08;Dynamic Programming&#xff0c;簡稱 DP&#xff09;是一種通過將復雜問題分解為更小的子問題來求解的算法思想。它主要用于解決具有重疊子問題和最優子結構特性的問題。 一、動態規劃的基本概念 1. 最優子結構 一個復…

視覺革命來襲!ComfyUI-LTXVideo 讓視頻創作更高效

探索LTX-Video 支持的ComfyUI 在數字化視頻創作領域&#xff0c;視頻制作效果的提升對創作者來說無疑是一項重要的突破。LTX-Video支持的ComfyUI便是這樣一款提供自定義節點的工具集&#xff0c;它專為改善視頻質量、提升生成速度而開發。接下來&#xff0c;我們將詳細介紹其功…

Java版ERP管理系統源碼(springboot+VUE+Uniapp)

ERP系統是企業資源計劃&#xff08;Enterprise Resource Planning&#xff09;系統的縮寫&#xff0c;它是一種集成的軟件解決方案&#xff0c;用于協調和管理企業內各種關鍵業務流程和功能&#xff0c;如財務、供應鏈、生產、人力資源等。它的目標是幫助企業實現資源的高效利用…

CenOS7切換使用界面

永久切換 在開始修改之前&#xff0c;我們首先需要查看當前的啟動模式。可以通過以下命令來實現&#xff1a; systemctl get-default執行此命令后&#xff0c;系統會返回當前的默認啟動模式&#xff0c;例如graphical.target表示當前默認啟動為圖形界面模式。 獲取root權限&…

Dify使用總結

最近完成了一個Dify的項目簡單進行總結下搭建服務按照官方文檔操作就行就不寫了。 進入首頁之后由以下組成&#xff1a; 探索、工作室、知識庫、工具 探索&#xff1a; 可以展示自己創建的所有應用&#xff0c;一個應用就是一個APP&#xff0c;可以進行測試使用 工作室包含…

計網學習筆記———網絡

&#x1f33f;網絡是泛化的概念 網絡是泛化的概念 &#x1f342;泛化理解 網絡的概念在生活中無處不在舉例&#xff1a;社交網絡、電話網路、電網、計算機網絡 &#x1f33f;網絡的定義 定義&#xff1a; 離散的個體通過通訊手段連成群體&#xff0c;實現資源的共享與交流、個…

《Python星球日記》 第53天:卷積神經網絡(CNN)入門

名人說&#xff1a;路漫漫其修遠兮&#xff0c;吾將上下而求索。—— 屈原《離騷》 創作者&#xff1a;Code_流蘇(CSDN)&#xff08;一個喜歡古詩詞和編程的Coder&#x1f60a;&#xff09; 目錄 一、圖像表示與通道概念1. 數字圖像的本質2. RGB顏色模型3. 圖像預處理 二、卷積…

SpringBoot2集成xxl-job詳解

官方教程 搭建調度中心 Github Gitee 注&#xff1a;版本3.x開始要求Jdk17&#xff1b;版本2.x及以下支持Jdk1.8。如對Jdk版本有訴求&#xff0c;可選擇接入不同版本 clone源代碼執行xxl-job\doc\db\tables_xxl_job.sql # # XXL-JOB v2.4.1 # Copyright (c) 2015-present, x…

HashMap中put()方法的執行流程

HashMap 是 Java 中最常用的數據結構之一&#xff0c;用于存儲鍵值對。其 put() 方法是向哈希表中插入或更新鍵值對的核心操作。本文將詳細解析 put() 方法的執行過程&#xff0c;涵蓋哈希值計算、桶定位、沖突處理和擴容等步驟。 一、put() 方法的執行過程 put() 方法通過一系…

【Oracle認證】MySQL 8.0 OCP 認證考試英文版(MySQL30 周年版)

文章目錄 1、MySQL OCP考試介紹2、考試注冊流程3、考試復習題庫 Oracle 為慶祝 MySQL 30 周年&#xff0c;截止到2025.07.31 之前。所有人均可以免費考取原價245美元 &#xff08;約1500&#xff09;的MySQL OCP 認證。 1、MySQL OCP考試介紹 OCP考試 OCP認證是Oracle公司推…

SpringBoot框架開發網絡安全科普系統開發實現

概述 基于SpringBoot框架的網絡安全科普系統開發指南&#xff0c;該系統集知識科普、案例學習、在線測試等功能于一體&#xff0c;本文將詳細介紹系統架構設計、功能實現及技術要點&#xff0c;幫助開發者快速構建專業的網絡安全教育平臺。 主要內容 系統功能架構 本系統采…

瀏覽器HTTP錯誤、前端常見報錯 和 Java后端報錯

以下是 瀏覽器HTTP錯誤、前端常見報錯 和 Java后端報錯 的綜合整理&#xff0c;包括原因和解決方法&#xff0c;幫助你快速排查問題。 一、HTTP 錯誤&#xff08;瀏覽器報錯&#xff09; 錯誤碼原因解決方法400 Bad Request請求語法錯誤&#xff08;如參數格式錯誤、請求體過…

TypeScript簡介

&#x1f31f; TypeScript入門 TypeScript 是 JavaScript 的超集&#xff0c;由微軟開發并維護&#xff0c;通過靜態類型檢查和現代語言特性&#xff0c;讓大型應用開發變得更加可靠和高效。 // 一個簡單的 TypeScript 示例 interface User {name: string;age: number;greet():…

[ctfshow web入門] web57

信息收集 這下把.也過濾了&#xff0c;臨時文件上傳無法使用了 //flag in 36.php if(isset($_GET[c])){$c$_GET[c];if(!preg_match("/\;|[a-z]|[0-9]|\|\|\#|\|\"|\|\%|\x09|\x26|\x0a|\>|\<|\.|\,|\?|\*|\-|\|\[/i", $c)){system("cat ".$c…

Android 移動應用開發:頁面跳轉與數據傳遞功能

目錄 ? 運行效果說明 &#x1f4c1; 文件一&#xff1a;MainActivity.java&#xff08;語言&#xff1a;Java&#xff09; &#x1f4c1; 文件二&#xff1a;Edit_MainActivity.java&#xff08;語言&#xff1a;Java&#xff09; &#x1f4c1; 文件三&#xff1a;activi…

MySQL如何優雅的執行DDL

一、概述 在MySQL中&#xff0c;DDL&#xff08;數據定義語言&#xff09;語句用于定義和管理數據庫結構&#xff0c;包括創建、修改和刪除數據庫對象&#xff08;如表、索引等&#xff09;。執行DDL操作時&#xff0c;需要謹慎處理&#xff0c;以避免對生產環境的穩定性和性能…

onenet連接微信小程序(mqtt協議)

一、關于mqtt協議 mqtt協議常用于物聯網&#xff0c;是一種輕量級的消息推送協議。 其中有三個角色&#xff0c;Publisher設備&#xff08;客戶端&#xff09;發布主題到服務器&#xff0c;其他的設備通過訂閱主題&#xff0c;獲取該主題下的消息&#xff0c;Publisher可以發…

【Unity筆記】實現支持不同渲染管線的天空盒曝光度控制組件(SkyboxExposureController)——參數化控制

寫在前面 在Unity中&#xff0c;天空盒&#xff08;Skybox&#xff09;不僅承擔視覺上的背景作用&#xff0c;更是場景環境光照與氛圍塑造的重要組成部分。不同時間、天氣、場景轉換等&#xff0c;都需要靈活調整天空的亮度。而**曝光度&#xff08;Exposure&#xff09;**就是…

blender云渲染指南2025版

一、云渲染核心概念 Blender云渲染是將本地渲染任務遷移到云端服務器集群的技術&#xff0c;通過分布式計算實現效率提升100倍以上的解決方案&#xff0c;其核心邏輯是&#xff1a;用戶上傳Blender項目文件至【渲染101】等云平臺&#xff0c;云端調用高性能服務器&#xff08;…