exceljs-xlsx-template
Version:
Generate .xlsx file from .xlsx template. Support for Browser and Node.js
115 lines (111 loc) • 4.16 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Fill Excel Template</title>
</head>
<body>
<div>示例一：本地模板文件解析 <input type="file" /></div>
<div>
示例二：URL模板文件解析
<button type="button">盖公章&解析图片</button>
</div>
<script src="../dist/bundle.js"></script>
<script>
const { renderXlsxTemplate, placeholderRange } = ExceljsXlsxTemplate;
const xlsxFile = new URL("./assets/template.xlsx", location.href).toString();
const officialsealFile = new URL("./assets/officialseal.png", location.href).toString();
const imageUrl = "https://s2.loli.net/2025/03/07/ELZY594enrJwF7G.png";
const data = [
{
name: "John",
items: [
{ no: "No.1", name: "JavaScript" },
{ no: "No.2", name: "CSS" },
{ no: "No.3", name: "HTML" },
{ no: "No.4", name: "Node.js" },
{ no: "No.5", name: "Three.js" },
{ no: "No.6", name: "Vue" },
{ no: "No.7", name: "React" },
{ no: "No.8", name: "Angular" },
{ no: "No.9", name: "UniApp" },
],
projects: [
{ name: "Project 1", description: "Description 1", image: imageUrl },
{ name: "Project 2", description: "Description 2", image: imageUrl },
{ name: "Project 3", description: "Description 3", image: imageUrl },
],
},
{
invoice_number: "54548",
last_name: "John",
first_name: "Doe",
phone: "00874****",
invoice_date: "15/05/2008",
items: [
{
name: "description",
unit_price: 300,
},
{
name: "HTML",
unit_price: 400,
},
],
subtotal: 700,
tax: 140,
grand_total: 840,
},
];
// 示例一
const fileInput = document.querySelector("input[type=file]");
fileInput.addEventListener("change", async (event) => {
const file = event.target.files[0];
if (!file) return;
try {
renderXlsxTemplate(file, data, `${Date.now()}.xlsx`);
} catch (error) {
console.error("Error processing Excel file:", error);
}
});
// 示例二
const button = document.querySelector("button");
button.addEventListener("click", () => {
try {
renderXlsxTemplate(xlsxFile, data, `${Date.now()}.xlsx`, {
parseImage: true,
async beforeSave(workbook) {
// 获取工作表
const worksheet = workbook.getWorksheet("新报关单");
if (worksheet) {
// 获取印章占位符位置信息
const range = placeholderRange(worksheet, "{{#officialseal}}");
if (range) {
// 加载图片印章
const officialsealRresponse = await fetch(officialsealFile);
if (!officialsealRresponse.ok) {
console.error(`Failed to download image file, status code: ${officialsealRresponse.status}`);
return;
}
const officialsealArrayBuffer = await officialsealRresponse.arrayBuffer();
// 将图片添加到工作簿
const imageId = workbook.addImage({
buffer: officialsealArrayBuffer,
extension: "png",
});
// 插入图片到表格中
worksheet.addImage(imageId, {
tl: { col: range.start.col, row: range.start.row - 4 },
ext: { width: 200, height: 200 },
});
}
}
},
});
} catch (error) {
console.error("Error processing Excel file:", error);
}
});
</script>
</body>
</html>