html实现资产管理台账页面_html固定资产台账管理查询页面【深度解析】-html教程-PHP中文网

可搜索、可排序、可导出的固定资产台账纯前端实现：用json存数据，动态条件过滤（every+空值跳过），按类型分治排序（数字/日期/字符串），blob导出含bom的制表符分隔excel。

html实现资产管理台账页面_html固定资产台账管理查询页面【深度解析】

用原生 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 顺序错乱。

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

解决方法：给每个字段加类型标记，排序时分支处理：

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);
}