cx-html2excel
v0.2.2
Published
[![npm version](https://badge.fury.io/js/cx-html2excel.svg)](https://www.npmjs.com/package/cx-html2excel)
Downloads
9
Readme
cx-html2excel
A library that exports the html table tag to excel, depends on exceljs, supports various styles, alignments, images, merged cells, colors, borders, cell formats, etc.
preview: yuanfengc.com/cx-html2excel
Usage
1. npm
npm install cx-html2excel file-saver exceljs
import { generateExcel } from 'cx-html2excel';
import { saveAs } from 'file-saver';
async function handleExport() {
let table_elt = document.getElementById('table-id');
let buffer = await generateExcel([{name: 'sheetName', elet: table_elt}], {UTC: true});
saveAs(
new Blob([buffer], { type: 'application/vnd.openxmlformats' }),
'excel.xlsx'
);
}
2. script
<script src="demo/exceljs.bare.js"></script>
<script src="demo/FileSaver.js"></script>
<script src="dist/cx-html2excel.js"></script>
<script>
async function handleExport() {
let table_elt = document.getElementById('table-id');
let buffer = await html2excel.generateExcel([{name: 'sheetName', elet: table_elt}], { UTC: true });
saveAs(
new Blob([buffer], { type: 'application/vnd.openxmlformats' }),
'excel.xlsx'
);
}
</script>
DOM
<table id='table-id' style="border-collapse: collapse; border-spacing: 0;">
<colgroup>
<col style='width: 191px' />
<col style='width: 299px' />
<col style='width: 155px' />
<col style='width: 200px' />
<col style='width: 174px' />
<col style='width: 172px' />
<col style='width: 167px' />
<col style='width: 200px' />
<col style='width: 167px' />
<col style='width: 200px' />
<col style='width: 119px' />
<col style='width: 119px' />
</colgroup>
<tr style='height: 26px'></tr>
<tr>
<td colSpan="2" style="border: 1px solid rgb(7, 83, 247); font-weight: 700;">
螺丝起子
</td>
<td colSpan="3" style="border: 1px solid rgb(7, 83, 247); color: #abc; font-size: 8px">
莫斯科骡子
</td>
<td colSpan="3" style="border: 1px solid rgb(7, 83, 247); color: rgb(237, 16, 42);">
玛格丽特
</td>
</tr>
<tr>
<td style="border: 1px solid rgb(7, 83, 247)">
伏特加
</td>
<td style="border: 1px solid rgb(247, 7, 95)">
青柠汁
</td>
<td style="border: 1px solid rgb(247, 87, 7); text-align: center; color: aqua;">
伏特加
</td>
<td style="border: 1px solid rgb(3, 8, 19); text-align: right; color: bisque;">
橙汁
</td>
<td style="border: 1px solid rgb(247, 239, 7); text-align: left; color: chartreuse;">
姜汁
</td>
<td style="border: 1px solid rgb(147, 7, 247)">
龙舌兰
</td>
<td style="border: 1px solid rgb(7, 247, 23)">
君度橙酒
</td>
<td style="border: 1px solid rgb(247, 7, 35)">
青柠汁
</td>
</tr>
<tr>
<td colspan="2" data-z="0.00%" style="border-right: 1px solid #000">
6.876%
</td>
<td colspan="1" data-z="_(* #,##0.00_);_(* (#,##0.00);_(* "-"??_);_(@_)">
31,243,256.067
</td>
<td colspan="1" data-v="whisky + vodka" style="border-top: 1px solid #000">
oolong
</td>
<td colspan="2" style="border-left: 1px solid #000">
2024/03/14
</td>
<td data-t="s" style="border-bottom: 1px solid #000;">
0984563
</td>
<td style="border-right: 1px solid #000;">
0984563
</td>
</tr>
<tr>
<td colspan="8">
<img src="./demo/logo192.png">
</td>
</tr>
</table>
API
generateExcel(
tables: [{name: 'sheetName', elet: table_elt}],
options?: {
rows: true,
font: true,
alignment: true,
border: true,
numfmt: true,
chart: true,
display: true,
fill: true
dateNF: 'm/d/yy',
UTC: false
}): Promise<any>