ExcelJS纯前端插入数据和图片在表格中 |
您所在的位置：网站首页 › 在excel里怎么添加照片 › ExcelJS纯前端插入数据和图片在表格中 |
|
ExcelJS简介 ExcelJS可以读取，操作并写入电子表格数据和样式到 XLSX 和 JSON 文件 安装（本文以在vue框架中使用为例） npm install exceljs file-saver -S 导入 import Excel from "exceljs"; import * as FileSaver from "file-saver";//用于客户端读写数据使用示例 HTML标签 导出js代码 添加工作表 methods：{ async exportStatics() { const EXCEL_TYPE = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"; // 创建工作簿 let workbook = new Excel.Workbook(); // 设置工作簿的属性 workbook.creator = "Me"; workbook.lastModifiedBy = "Her"; workbook.created = new Date(1985, 8, 30); workbook.modified = new Date(); workbook.lastPrinted = new Date(); // 工作簿视图，工作簿视图控制在查看工作簿时 Excel 将打开多少个单独的窗口 workbook.views = [ { x: 0, y: 0, width: 1000, height: 2000, firstSheet: 0, activeTab: 1, visibility: "visible", }, ]; // let worksheet = workbook.addWorksheet("sheet1"); const imgArr = [base64格式的图片1，base64格式的图片2] // 通过 base64 将图像添加到工作簿 imgArr .forEach((item，index) => { // 通过 base64 将图像添加到工作簿 const imageId1 = workbook.addImage({ base64: getFullCanvasDataURL(item), extension: "png",// 图片扩展名，支持“jpeg”，“png”，“gif” }); 在一定范围内添加图片 worksheet.addImage( imageId1, `${String.fromCharCode(65 + index * 6)}1:${String.fromCharCode( 70 + index * 6 )}16` ); }); const heard = { enterpriseName:'公司名称', applicationName: '应用名称', }; const listHearder = Object.keys(heard); // 按行的格式插入表头 worksheet.insertRow( 17,// 行的位置 listHearder.map((item) => heard[item]) ); //插入表格数据 const tableData = [{enterpriseName:"长亮科技",applicationName:"test"},{enterpriseName:"长亮科技1",applicationName:"test1"}]; tableData.forEach((item, index) => { worksheet.insertRow( index + 18, listHearder.map((ite) => item[ite]) ); }); //导出表格数据 workbook.xlsx.writeBuffer().then((data) => { const blob = new Blob([data], { type: EXCEL_TYPE }); console.log(blob.stream(), 6664744) FileSaver.saveAs(blob, "download.xlsx"); }); }, }以表格方式添加工作表 const rows = [] tableData.forEach((item, index) => { rows.push(listHearder.map((ite) => item[ite])) }); worksheet.addTable({ name: 'MyTable', ref: 'A20', bold: true, headerRow: true, totalsRow: false, style: { theme: '', showRowStripes: false, }, columns: listHearder.map((item) => { return { name: heard[item]} }), rows }); // 给表格添加边框 const renderTabBorder = (index, ind, obj) => { worksheet.getCell(`${String.fromCharCode(65 + index)}${ind + 20}`).border = { ...obj, top: { style: 'thin' }, right: { style: 'thin' }, }; } const len = rows.length + 1 for (let ind = 0; ind if (index === 0 && ind !== rows.length) { renderTabBorder(index, ind, { left: { style: 'thin' }, }) } else if (ind === rows.length && index !== 0) { renderTabBorder(index, ind, { bottom: { style: 'thin' } }) } else { renderTabBorder(index, ind, { left: { style: 'thin' }, bottom: { style: 'thin' } }) } }) } workbook.xlsx.writeBuffer().then((data) => { const blob = new Blob([data], { type: EXCEL_TYPE }); console.log(blob.stream(), 6664744) FileSaver.saveAs(blob, "download.xlsx"); }); },注意：将表格添加到工作表将通过放置表格的标题和行数据来修改工作表。 结果就是表格覆盖的工作表上的所有数据（包括标题和所有的）都将被覆盖。 表格属性 表属性 描述 是否需要 默认值 name 表格名称 Y displayName 表格的显示名称 N name ref 表格的左上方单元格 Y headerRow 在表格顶部显示标题 N true totalsRow 在表格底部显示总计 N false style 额外的样式属性 N {} columns 列定义 Y rows 数据行 Y 表格样式属性 列属性 描述 是否需要 默认值 name 列名，也用在标题中 Y filterButton 切换标题中的过滤器控件 N false totalsRowLabel 用于描述统计行的标签（第一列） N ‘Total’ totalsRowFunction 统计函数名称 N ‘none’ totalsRowFormula 自定义函数的可选公式 N 统计函数 下表列出了由列定义的 totalsRowFunction 属性的有效值。如果使用 ‘custom’ 以外的任何值，则无需包括关联的公式，因为该公式将被表格插入。 统计函数 描述 none 此列没有统计函数 average 计算列的平均值 countNums 统计数字条目数 count 条目数 max 此列中的最大值 min 此列中的最小值 stdDev 该列的标准偏差 var 此列的方差 sum 此列的条目总数 custom 自定义公式。 需要关联的 totalsRowFormula 值。 表格样式主题 有效的主题名称遵循以下模式： “TableStyle[Shade][Number]” Shades（阴影），Number（数字）可以是以下之一： Light, 1-21 Medium, 1-28 Dark, 1-11 对于无主题，请使用值 null。 注意：exceljs 尚不支持自定义表格主题。 修改表格 表格支持一组操作函数，这些操作函数允许添加或删除数据以及更改某些属性。由于这些操作中的许多操作可能会对工作表产生副作用，因此更改必须在完成后立即提交。 表中的所有索引值均基于零，因此第一行号和第一列号为 0。 添加或删除标题和统计 const table = worksheet.getTable('MyTable'); // 关闭标题行 table.headerRow = false; // 打开统计行 table.totalsRow = true; // 将表更改提交到工作表中 table.commit();添加和删除行 const table = worksheet.getTable('MyTable'); // 删除第二行 table.removeRows(1, 2); // 在索引 2 处插入新行 table.addRow(["平安银行", "test", 'Mid'], 2); // 在表格底部追加新行 table.addRow(["广发银行", "test3", 'End']); // 将表更改提交到工作表中 table.commit();添加和删除列 const table = worksheet.getTable('MyTable'); // 删除第二列 table.removeColumns(1, 1); // 在索引 1 处插入新列（包含数据） table.addColumn( {name: '公司名称'}, ['招商银行', '邮政储蓄'], 2 ); // 将表更改提交到工作表中 table.commit();有效边框样式 thin dotted dashDot hair dashDotDot slantDashDot mediumDashed mediumDashDotDot mediumDashDot medium double thick |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |