可搜索、可排序、可导出的固定资产台账纯前端实现：用JSON存数据，动态条件过滤（every+空值跳过），按类型分治排序（数字/日期/字符串），Blob导出含BOM的制表符分隔Excel。
用原生 HTML + JS 实现可搜索、可排序的固定资产台账表格
纯 HTML 页面也能做出实用的资产台账，关键不是“有没有后台”，而是数据组织方式和交互逻辑是否合理。你不需要框架，但得把 table 的结构写对，把 input 和 select 的事件绑定准，否则搜索卡顿、排序错乱、导出空数据都是常态。
真实场景里，台账数据通常不超过 2000 条（再大就该上系统了），所以用 JSON 数组存前端完全可行。示例数据结构建议长这样：
const assets = [
{ id: "GD001", name: "戴尔XPS13", category: "笔记本电脑", brand: "Dell", price: 6800, status: "在用", dept: "技术部", date: "2023-04-12" },
{ id: "GD002", name: "惠普激光打印机", category: "打印机", brand: "HP", price: 1299, status: "闲置", dept: "行政部", date: "2022-11-05" }
];
注意字段名统一用英文小写+下划线（如 purchase_date），避免空格或中文键名，后续 JS 处理时不会报 obj["购入日期"] 这类语法错误。
按部门/状态/类别多条件过滤时，别用嵌套 if，用 every() + 动态条件对象
用户常点“技术部 + 在用 + 笔记本电脑”，结果漏掉部分匹配项，问题出在手动写三层 if (dept === xxx && status === yyy && category === zzz) —— 一旦某个条件为空（比如没选部门），整个判断就崩了。
立即学习“前端免费学习笔记（深入）”；
正确做法是构建动态条件对象，再用 every() 判断每条数据是否满足所有非空条件：
function filterAssets(data, conditions) {
return data.filter(item =>
Object.entries(conditions).every(([key, value]) =>
!value || String(item[key]).includes(String(value))
)
);
}
// 调用：filterAssets(assets, { dept: "技术部", status: "在用" })
-
conditions是从表单实时读取的对象，未选项目值为""或null -
String(item[key])统一转字符串，避免price数字字段调用.includes()报错 - 不推荐用
indexOf > -1，IE11 已淘汰，现代浏览器includes()更直觉
点击表头排序时，区分数字、日期、字符串类型做不同处理
直接对所有字段都用 a[key].localeCompare(b[key]) 排序，会导致价格 10000 排在 2000 前面（字符串比大小），日期 2023-1-5 和 2023-10-12 顺序错乱。
解决方法：给每个字段加类型标记，排序时分支处理：
const fieldTypes = {
id: "string",
price: "number",
date: "date",
name: "string"
};
<p>function sortAssets(data, key, direction = "asc") {
return data.sort((a, b) => {
let aVal = a[key], bVal = b[key];
if (fieldTypes[key] === "number") {
return direction === "asc" ? aVal - bVal : bVal - aVal;
} else if (fieldTypes[key] === "date") {
return direction === "asc"
? new Date(aVal) - new Date(bVal)
: new Date(bVal) - new Date(aVal);
} else {
return direction === "asc"
? String(aVal).localeCompare(String(bVal))
: String(bVal).localeCompare(String(aVal));
}
});
}</p>注意：date 字段必须是标准格式（YYYY-MM-DD），否则 new Date("2023-1-5") 在 Safari 下可能解析失败，建议后端返回时就补零。
导出 Excel 时别依赖第三方库，用 Blob + application/vnd.ms-excel 最轻量
很多教程推 xlsx 库，但一个台账页面为导出功能引入 300KB JS 文件，得不偿失。原生方案够用：
生成 CSV 字符串 → 转成 Blob → 创建下载链接：
function exportToExcel(data, filename = "固定资产台账.xls") {
const headers = ["编号", "名称", "类别", "品牌", "价格", "状态", "所属部门", "购入日期"];
const rows = data.map(row =>
[row.id, row.name, row.category, row.brand, row.price, row.status, row.dept, row.date].map(cell =>
`"${String(cell).replace(/"/g, '""')}"` // 处理含双引号和逗号的单元格
).join("\t")
);
const csvContent = [headers.join("\t"), ...rows].join("\n");
const blob = new Blob(["\ufeff" + csvContent], { type: "application/vnd.ms-excel" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
}
- 用
\t制表符而非,逗号分隔，避开 Excel 对 CSV 中逗号的解析歧义 -
\ufeff是 UTF-8 BOM，确保 Excel 打开中文不乱码 - 不要用
data:text/csvbase64 方案，iOS Safari 不支持
真正难的不是代码，是字段定义是否覆盖了盘点、折旧、责任人这些实际要查的维度。如果连“使用人”都没留字段，再好的排序导出也救不了业务需求。
