node 實現導出, 在導出excel中包含圖片(附件)

如果想查看?node mySql 實現數據的導入導出,以及導入批量插入的sql語句,連接如下

node mySql 實現數據的導入導出,以及導入批量插入的sql語句-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/snows_l/article/details/139998373

一、效果如圖:

二、實現方法

利用里?exceljs 插件的?addImage 方法進行插入, 關鍵代碼如下:

const workbook = new Excel.Workbook();
const worksheet = workbook.addWorksheet('收入明細');
// 設置表頭
// worksheet.addRow(['標題', '月份', '收入金額', '備注', '收入截圖']);
let baseTableTitle = [{ header: '標題', key: 'title', width: 20 },{ header: '月份', key: 'date', width: 12 },{ header: '收入金額(元)', key: 'money', width: 16 },{ header: '就職于', key: 'source', width: 12 },{ header: '備注', key: 'remark', width: 24 }
];
if (includePic == 'true') {baseTableTitle.push({ header: '收入截圖', key: 'pic', width: 16 });
}
worksheet.columns = baseTableTitle;// 循環寫入數據
data.forEach(async (item, index) => {const rowData = worksheet.addRow([item.title, item.date, item.money, item.sourceStr, item.remark]);// 指定行高rowData.height = 50;
});// 插入圖片
if (includePic == 'true') {for (let i = 0; i < data.length; i++) {// 插入圖片到Excelconst imageId = workbook.addImage({filename: '../public' + data[i].pic, // 圖片路徑 不能出現中文名字extension: 'jpeg'});// E代表第5列,i+2代表第i+2行,F${i+2}:F${i+2}代表第i+2行第6列worksheet.addImage(imageId, `F${i + 2}:F${i + 2}`);}
}// buffer 返回給前端即可
const buffer = await workbook.xlsx.writeBuffer();

三、完整代碼

/** @Description: ------------ fileDescription -----------* @Author: snows_l snows_l@163.com* @Date: 2024-04-15 14:29:31* @LastEditors: snows_l snows_l@163.com* @LastEditTime: 2024-06-24 22:34:26* @FilePath: /Website/Server/src/router/wages.js*/
const express = require('express');
const db = require('../../utils/connDB');
const router = express.Router();
const Excel = require('exceljs');// 導出
router.get('/wages/export', async (req, res) => {let { eDate, sDate, source, includePic } = req.query;let sql = `SELECT * FROM wages`;if (eDate && sDate) {sql += ` WHERE date >= '${sDate}-01' AND date <= '${eDate}-28'`;}if (source) {sql += ` ${eDate && sDate ? 'AND' : 'WHERE'}  source = '${source}'`;}sql += ` ${(eDate && sDate) || source ? 'and' : 'where'} del_flag = ? ORDER BY date DESC`;const params = [0];try {db.queryAsync(sql, params).then(ress => {const data = ress.results;dictSql = `select* from sys_dict where dictType = 'wages_source' and pid <> 0 order by sort ASC;`;db.queryAsync(dictSql).then(async dictRes => {const dictData = dictRes.results;// 處理就職于字典data.forEach(item => {item.sourceStr = dictData.find(dict => dict.value === item.source).label;});/*** 使用 XLSX 庫導出excel文件 支持普通的xlsx格式*/// 將數據轉換為工作表// const ws = XLSX.utils.json_to_sheet(data);// // 創建工作簿并添加工作表// const wb = XLSX.utils.book_new();// XLSX.utils.book_append_sheet(wb, ws, '收入');// //生成Excel文件的二進制數據// const excelBuffer = XLSX.write(wb, {//   type: 'buffer',//   bookType: 'xlsx'// });// const realName = encodeURI('收入報表.xlsx', 'GBK').toString('iso8859-1');// // 設置響應頭// res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');// res.setHeader('Content-Disposition', 'attachment; filename=' + realName);// // 發送Excel文件// res.send(excelBuffer);/*** 使用 exceljs 庫導出excel文件*/// 下載圖片并保存到臨時文件// const downloadImage = async (url, filePath) => {//   const response = await axios.get(url, { responseType: 'arraybuffer' });//   fs.writeFileSync(filePath, response.data);// };const workbook = new Excel.Workbook();const worksheet = workbook.addWorksheet('收入明細');// 設置表頭// worksheet.addRow(['標題', '月份', '收入金額', '備注', '收入截圖']);let baseTableTitle = [{ header: '標題', key: 'title', width: 20 },{ header: '月份', key: 'date', width: 12 },{ header: '收入金額(元)', key: 'money', width: 16 },{ header: '就職于', key: 'source', width: 12 },{ header: '備注', key: 'remark', width: 24 }];if (includePic == 'true') {baseTableTitle.push({ header: '收入截圖', key: 'pic', width: 16 });}worksheet.columns = baseTableTitle;// 循環寫入數據data.forEach(async (item, index) => {const rowData = worksheet.addRow([item.title, item.date, item.money, item.sourceStr, item.remark]);// 指定行高rowData.height = 50;});// 插入圖片if (includePic == 'true') {for (let i = 0; i < data.length; i++) {// 插入圖片到Excelconst imageId = workbook.addImage({filename: '../public' + data[i].pic, // 圖片路徑 不能出現中文名字extension: 'jpeg'});// E代表第5列,i+2代表第i+2行,F${i+2}:F${i+2}代表第i+2行第6列worksheet.addImage(imageId, `F${i + 2}:F${i + 2}`);}}const buffer = await workbook.xlsx.writeBuffer();// 處理中文文件名const realName = encodeURI('收入報表.xlsx', 'GBK').toString('iso8859-1');// 設置響應頭res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');res.setHeader('Content-Disposition', 'attachment; filename=' + realName);// 發送Excel文件res.send(buffer);});});} catch (error) {return res.send({code: 500,data: null,msg: '導出失敗'});}
});module.exports = router;

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

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

相關文章

中介子方程三十四

XXFXXuXXWXXuXXdXXrXXαXXuXpXXKXηXiXXαXXiXηXKXXpXuXXαXXrXXdXXuXWXπXXWXeXyXeXbXπXpXXNXXqXeXXrXXαXXuXpXXKXηXiXXαXXiXηXKXXpXuXXαXXrXXeXqXXNXXpXπXbXeXyXeXWXXπXWXuXXdXXrXXαXXuXpXXKXηXiXXαXXiXηXKXXpXuXXαXXrXXdXXuXXWXXuXXFXXEXXyXXEXXrXXαXXuXpXXK…

paraview跨節點并行渲染

參考&#xff1a; https://cloud.tencent.com/developer/ask/sof/101483588 ParaView 支持使用其內置的網絡拓撲來進行跨節點的并行渲染。以下是一個簡單的步驟來設置和運行跨節點的并行渲染&#xff1a; 確保你的計算環境支持多節點計算&#xff0c;比如通過SSH、MPI或其他集…

阿里云擴容

官網&#xff1a;https://help.aliyun.com/zh/ecs/user-guide/extend-the-partitions-and-file-systems-of-disks-on-a-linux-instance?spm5176.ecs-console-storage_disk.help.dexternal.72d24df5QOL4ss 博客&#xff1a;http://t.csdnimg.cn/cUykr

Android APP通過View修改鼠標樣式

app view上修改鼠標樣式比較簡單&#xff0c;使用如下方法修改為自定義圖片&#xff1a; getWindow().getDecorView().setPointerIcon(PointerIcon.load(getResources(), R.drawable.pointer_spot_touch_icon)); 設置鼠標樣式setPointerIcon的調用棧 frameworks/base/core/jav…

C語言:流量控制

前言 流量控制可以讓發送端根據接收端的實際接受能力控制發送的數據量。它的具體操作是&#xff0c;接收端主機向發送端主機通知自己可以接收數據的大小&#xff0c;于是發送端會發送不會超過該大小的數據&#xff0c;該限制大小即為窗口大小&#xff0c;即窗口大小由接收端主…

【Linux詳解】進程的狀態 | 運行 阻塞 掛起 | 僵尸和孤兒狀態

目錄 操作系統中 運行狀態 阻塞狀態 進程狀態轉換 Linux系統中 查看進程狀態 深度睡眠狀態 T 暫停狀態 Z 僵尸狀態 孤兒狀態 文章手稿 xmind: 引言 介紹系統中的進程狀態及其管理方式。將通過結合操作系統原理和實際代碼示例&#xff0c;詳細說明進程的各種狀態、轉換…

鴻蒙開發Ability Kit(程序框架服務):【FA模型切換Stage模型指導】 app和deviceConfig的切換

app和deviceConfig的切換 為了便于開發者維護應用級別的屬性配置&#xff0c;Stage模型將config.json中的app和deviceConfig標簽提取到了app.json5中進行配置&#xff0c;并對部分標簽名稱進行了修改&#xff0c;具體差異見下表。 表1 配置文件app標簽差異對比 配置項FA模型…

Excel中的“點選輸入”——次級下拉列表創建

在Excel中&#xff0c;用“數據驗證”功能可以設置下拉列表&#xff0c;二級下拉列表需要設置公式。 (筆記模板由python腳本于2024年06月16日 18:36:37創建&#xff0c;本篇筆記適合經常使用Excel處理數據的coder翻閱) 【學習的細節是歡悅的歷程】 Python 官網&#xff1a;http…

基于 Spring AOP 實現安全檢查

在現代應用程序中&#xff0c;安全性是一個至關重要的方面。通過對系統中的關鍵操作進行安全檢查&#xff0c;可以有效防止未授權的訪問和操作。Spring AOP&#xff08;面向切面編程&#xff09;提供了一種優雅的方式來實現安全檢查&#xff0c;而無需修改業務邏輯代碼。本文將…

后端之路第三站(Mybatis)——入門配置

一、Mybatis是啥&#xff1f; 就是一個用java來操控數據庫的框架語言 之前學的datagrip或者navicat這些軟件里我們操作數據庫&#xff0c;原理是我們編寫完的操作語句發送到服務器傳送到數據庫系統&#xff0c;然后數據庫執行完之后再發送給服務器返回給datagrip或者navicat顯…

【linux/shell案例實戰】shell界面命令快捷鍵

快捷鍵及含義&#xff1a; Ctrl&#xff0b;u剪切光標之前的內容。Ctul&#xff0b;k剪切光標之后的內容。Ctrl&#xff0b;e讓光標移動到命令最前&#xff0c;Ctrl&#xff0b;a讓光標移動到命令最后Ctrl&#xff0b;y 粘貼剛才所刪除的內容。Ctrl&#xff0b;d 刪除光標所在…

GPT-5:AI的博士時代與我們的未來

目錄 引言第一部分&#xff1a;GPT-5技術突破預測1. NLP技術的革新1.1 算法進步對理解力提升的影響1.2 技術突破推動行業發展 2. 行業推動力2.1 教育行業的變革2.2 醫療行業的創新2.3 法律行業的效率提升 第二部分&#xff1a;智能系統與人類的協作1. 輔助決策的角色1.1 決策支…

游戲AI的創造思路-技術基礎-sigmoid函數詳解

在前面的機器學習和深度學習的內容中&#xff0c;大量出現了sigmoid函數&#xff0c;所以本篇為大家介紹下sigmoid函數&#xff0c;希望對大家理解前面的算法和后面的Transformer有所幫助 目錄 3.8. sigmoid函數 3.8.1. 定義 3.8.2. 性質 3.8.3. 應用 3.8.4. 缺點 3.8.5.…

Flutter實現頁面間傳參

帶參跳轉 步驟 在router中配置這個路由需要攜帶的參數,這里的參數是 arguments,注意要用花括號包裹參數名稱 在相應組件中實現帶參構造函數 在state類中可以直接使用${widget.arguments}來訪問到傳遞的參數 在其他頁面中使用Navigator.pushNamed()帶參跳轉

【昇思初學入門】第八天打卡-模型保存與加載

模型保存與加載 學習心得 保存 CheckPoint 格式文件&#xff0c;在模型訓練過程中&#xff0c;可以添加檢查點(CheckPoint)用于保存模型的參數&#xff0c;以便進行推理及再訓練使用。如果想繼續在不同硬件平臺上做推理&#xff0c;可通過網絡和CheckPoint格式文件生成對應的…

C++中常用的標志庫

標準庫 C標準庫是一個強大的工具集&#xff0c;它包含了一組豐富的類和函數&#xff0c;可以幫助開發者進行各種操作&#xff0c;如輸入輸出、字符串操作、數據結構管理、算法實現等。以下是一些常用的C標準庫及其使用方法。 1. 輸入輸出庫 <iostream> 用于標準輸入輸…

2024年最新通信安全員考試題庫

61.架設架空光纜&#xff0c;可使用吊板作業的情況是&#xff08;&#xff09;。 A.在2.2/7規格的電桿與墻壁之間的吊線上&#xff0c;吊線高度5m B.在2.2/7規格的墻壁與墻壁之間的吊線上&#xff0c;吊線高度6m C.在2.2/7規格的電桿與電桿之間的吊線上&#xff0c;吊線高度…

[leetcode]24-game

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:static constexpr int TARGET 24;static constexpr double EPSILON 1e-6;static constexpr int ADD 0, MULTIPLY 1, SUBTRACT 2, DIVIDE 3;bool judgePoint24(vector<int> &nums) {vector&l…

【C++LeetCode】【熱題100】三數之和【中等】-不同效率的題解【6】

題目&#xff1a; 暴力方法&#xff1a; class Solution { public:vector<vector<int>> threeSum(vector<int>& nums) {vector<vector<int>> res;std::unordered_set<std::string> uniqueValues;//保證結果唯一for(int i0;i<n…

工商業儲能柜用的Acrel-2000ES儲能能量管理系統-安科瑞 蔣靜

概述 Acrel-2000ES儲能能量管理系統&#xff0c;專門針對工商業儲能柜、儲能集裝箱研發的一款儲能EMS&#xff0c;具有完善的儲能監控與管理功能,涵蓋了儲能系統設備(PCS、BMS、電表、消防、空調等)的詳細信息&#xff0c;實現了數據采集、數據處理、數據存儲、數據查詢與分析…