js 通过 exceljs 和 canvas 实现导出带水印的 excel 表

因公司需求改动，但是因为到的地方比较多，所以单独写一个单工作表导出，实际可用多工作表的代码部分


interface IHeader {k: string;v: string;
}
export interface IParams<D extends any> {header: IHeader[];data: D[];sheetName: string;
}/**** 导出 excel（带水印） 公共方法* @param header v 为头，k 为对应 data 数据的 name* 例:const header = [{k: 'region',v: '所属区域',}]* @param data 要导出的数据例:const data = [{region:'广州'},{region:'深圳'}]* @param filename 导出的 excel 文件名称* @param sheetName 指定第一个工作表的名称* @param staff 水印名称* @param params 导出多个工作表* 格式为:* [{header:[],data:[],sheetName:''}]* @returns*/
export const createWsSheet = <T, D>(header: IHeader[],data: T[],filename: string,sheetName = 'sheet1',params: IParams<D>[] = [],staff: string = '水印名称',
): void => {Message.loading('正在导出...');if (!((header && data) && (header.length && data.length))) {Message.error('导出失败');return;}// 创建工作簿const workbook = new ExcelJS.Workbook();// 获取水印const base64 = setWatermark(staff);const imageId1 = workbook.addImage({ base64, extension: 'png' });// 创建带有红色标签颜色的工作表const worksheet = workbook.addWorksheet(sheetName, { properties: { tabColor: { argb: 'FFC0000' } } });// 生成 columnsconst columns = header.map((col: IHeader): { name: string } => ({ name: col.v }));// 生成 rowsconst rows = data.map((row: T): T[] => {return header.map(itm => isNull(row[itm.k]) ? row[itm.k] : '');});// 添加背景图片worksheet.addBackgroundImage(imageId1);// 添加数据worksheet.addTable({name: filename,ref: 'A1',// 表格左上角位置columns,rows});// 多工作表if (params && params.length) {params.forEach((el: IParams<D>) => {if (!((el.header && el.data) && (el.header.length && el.data.length))) {Message.error('导出失败');return;}const worksheetM = workbook.addWorksheet(el.sheetName, { properties: { tabColor: { argb: 'FFC0000' } } });// 生成 columnsconst columnsM = el.header.map((col: IHeader): { name: string } => ({ name: col.v }));// 生成 rowsconst rowsM = el.data.map((row: D): D[] => {return el.header.map(itm => isNull(row[itm.k]) ? row[itm.k] : '');});// 添加背景图片worksheetM.addBackgroundImage(imageId1);// 添加数据worksheetM.addTable({name: el.sheetName,ref: 'A1',// 表格左上角位置columns: columnsM,rows: rowsM});})}workbook.xlsx.writeBuffer().then((res) => {saveAs(new Blob([res], { type: 'application/octet-stream' }), filename)});Message.success('导出成功');
};
/*** 判断该数据是否为空* @param data 要判断的数据* @returns 布尔值:true/false*/
const isNull = (data: any): boolean => {return (data ?? '') !== '';
}/*** 绘画水印* @param str 要做出水印的文字* @returns Base64*/
const setWatermark = (str: string): string => {let id = '1.23452384164.123412416';if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id) as any);}// 创建一个画布let can = document.createElement('canvas');// 设置画布的长宽can.width = 500;can.height = 420;let cans = can.getContext('2d') as any;// 旋转角度cans.rotate(-25 * Math.PI / 180);// 设置字体大小cans.font = "800 40px Microsoft JhengHei";// 设置填充绘画的颜色、渐变或者模式cans.fillStyle = "rgba(130, 142, 162, 0.2)";// 设置文本内容的当前对齐方式cans.textAlign = 'center';// 设置在绘制文本时使用的当前文本基线cans.textBaseline = 'Middle';cans.fillText(str, 180, 350);const dataURL = can.toDataURL('image/png');return dataURL;
}

js 通过 exceljs 和 canvas 实现导出带水印的 excel 表相关推荐

XLSX实现导出带样式的Excel表格的坑
XLSX导出带样式的Excel表格失败导入XLSX xlsx-style的使用项目的要求,需要导出一个结果到Excel表格中,因为所以,没有用Java的方式去实现,而选择了Vue前端直接导出的方式 ...
导出带图片的Excel报表
导出带图片的Excel报表先引用 Microsoft.Office.Tools.Excel.v4.0.Utilities.dll程序集,然后在后台页面引用using Excel = Microsof ...
Java导出带格式的Excel数据到Word表格
在Word中创建报告时,我们经常会遇到这样的情况:我们需要将数据从Excel中复制和粘贴到Word中,这样读者就可以直接在Word中浏览数据,而不用打开Excel文档.在本文中,您将学习如何使用Spi ...
如何通过Java导出带格式的 Excel 数据到 Word 表格
在Word中制作报表时,我们经常需要将Excel中的数据复制粘贴到Word中,这样则可以直接在Word文档中查看数据而无需打开另一个Excel文件.但是如果表格比较长,内容就会存在一定程度的丢失,无法 ...
WPS.JS宏应用案例01：创建带超链接的工作表目录
HI,大家好,我是星光. 之前给大家分享了如何使用函数或VBA创建带超链接的工作表目录,今天再给大家分享一下,如何使用WPS的JS宏实现同样的目的. 复制运行以下代码,即可在当前工作表的A列创建如上图 ...
SpringBoot+MySql+LayUI实现数据导出的功能（Excel表）
前端代码: <div class="comment_add_or_last" style="background-color: #01AAED">& ...
python按某列拆分excel表格_python带格式拆分excel表单，copy库完美搞定
python拆分excel表单,生成单独的excel文件,网上这方面的文章很多.但大多只讲主功能如何实现,让拆分后的表保持和原表单一致的格式,则鲜有人讲.本文通过调用copy库,完美实现带格式拆分表单 ...
python拆分excel 样式不变_python带格式拆分excel表单，copy库完美搞定
python拆分excel表单,生成单独的excel文件,网上这方面的文章很多.但大多只讲主功能如何实现,让拆分后的表保持和原表单一致的格式,则鲜有人讲.本文通过调用copy库,完美实现带格式拆分表单 ...
mysql8.0导出带数据的库表_MySQL8.0数据库导出与备份
方法一:可视化工具Navicat操作 1-1.转存sql文件 1-2.另存为sql文件 2-1.新建数据库 2-2.先双击打开刚才创建好的数据库,然后右击,如果右击的选项为灰色则是没有打 ...

js 通过 exceljs 和 canvas 实现导出带水印的 excel 表

js 通过 exceljs 和 canvas 实现导出带水印的 excel 表相关推荐

最新文章

热门文章