• Sheet.JS 使用-html版


    在使用后台管理系统中用到了一些表格、想到将浏览器中的表格(table) 和 excel/xlsx格式的文件、JSON数据格式的相互转换也是很常见的功能。

    搜索了一下 Sheet.JS是很常用的一个工具

    概述|SheetJS社区版https://docs.sheetjs.com/docs/接下来使用Sheet.JS 在html页面中实现一些基础功能

    页面中的table 导出为excel/xlsx格式的文件

    1.引用

    2.给表格加上ID-TableToExport   导出按钮加上ID-sheetjsexport

    1. <div class="warp">
    2. <table style="width: 100%; line-height: 2" id="TableToExport">
    3. <thead style="background: #f10251; color: white">
    4. <tr>
    5. <th>版本th>
    6. <th>姓名th>
    7. <th>项目th>
    8. <th>成绩th>
    9. <th>操作th>
    10. tr>
    11. thead>
    12. <tbody id="j">tbody>
    13. table>
    14. <button id="sheetjsexport"><b>Export as XLSXb>button>
    15. div>

    表格内的内容可以自己编辑 这里是使用 原生JS 循环创建元素

    1. <script>
    2. var datas = [
    3. {
    4. id: 2014,
    5. name: "Uzi",
    6. project: "对线能力",
    7. results: "S",
    8. },
    9. {
    10. id: 2016,
    11. name: "Faker",
    12. project: "团队荣誉",
    13. results: "SR",
    14. },
    15. {
    16. id: 2018,
    17. name: "The shy",
    18. project: "伤害转化",
    19. results: "A+",
    20. },
    21. {
    22. id: 2020,
    23. name: "sofm",
    24. project: "土匪打野",
    25. results: "A+",
    26. },
    27. ];
    28. // 获取表格主体
    29. var tbody = document.querySelector("tbody");
    30. // 有几条数据就创建几行
    31. for (var i = 0; i < datas.length; i++) {
    32. var tr = document.createElement("tr");
    33. tbody.appendChild(tr);
    34. // 有几个具体的键值对 就创建几个单元格 遍历对象
    35. for (var k in datas[i]) {
    36. var td = document.createElement("td");
    37. //给 rd 添加内容
    38. td.innerHTML = datas[i][k];
    39. tr.appendChild(td);
    40. }
    41. // 创建最后带删除的单元格
    42. var td = document.createElement("td");
    43. td.innerHTML = '删除';
    44. tr.appendChild(td);
    45. // 点击删除事件
    46. var as = document.querySelectorAll("a");
    47. for (var w = 0; w < as.length; w++) {
    48. as[w].onclick = function () {
    49. // 点击a 删除 当前a 所在的单元格-行 node.removeChild(child)
    50. tbody.removeChild(this.parentNode.parentNode);
    51. };
    52. }
    53. }
    54. /*
    55. for(var k in obj){
    56. k 是属性名
    57. obj[k] 是属性值
    58. }
    59. */
    60. script>

    效果: 简单的样式可以自己写

    接下来就是点击导出按钮的逻辑

    1.为按钮添加点击事件  2.将id=TableExport的表格转成流数据 3.写入文件(内容,名字)

    1. <script>
    2. document
    3. .getElementById("sheetjsexport")
    4. .addEventListener("click", function () {
    5. /* Create worksheet from HTML DOM TABLE 从HTML DOM TABLE创建工作表
    6. raw:表示导出数据是否是未加工的。
    7. */
    8. var wb = XLSX.utils.table_to_book(
    9. document.getElementById("TableToExport"),
    10. { raw: true }
    11. );
    12. /* Export to file (start a download) 导出到文件(开始下载)
    13. 这句话是 导出文件 保存(文件的数据内容,名字)
    14. */
    15. XLSX.writeFile(wb, "SheetJSTable.xlsx");
    16. });
    17. script>

     

     

     导入表格文件在网页当中显示

     上传文件的按钮和表格展示容器---- accept 限制上传文件类型

       

       

       

     处理逻辑

    1.获取按钮和容器

    2.监听按钮上传文件的 change 事件

    3.得到第一个文件转成arrayBuffer(二进制数据格式、更加高效)

    4.读取数据、获得数据内的第一个sheet、最后设置容器内的innerHTML

    想了解更多可以单独打印 file data wb ws 看看都变成了什么样子

    1. <script>
    2. const btn = document.querySelector("#inputFile");
    3. const TableContainer = document.querySelector("#TableContainer");
    4. btn.addEventListener("change", async function (e) {
    5. const file = e.target.files[0];
    6. const data = await file.arrayBuffer();
    7. /* parse and load first worksheet */
    8. const wb = XLSX.read(data);
    9. const ws = wb.Sheets[wb.SheetNames[0]];
    10. // setHTML(XLSX.utils.sheet_to_html(ws, { id: "TableContainer" }));
    11. TableContainer.innerHTML = XLSX.utils.sheet_to_html(ws);
    12. });
    13. script>

     

     

  • 相关阅读:
    python项目实战——银行取款机系统(二)
    基于ABP实现DDD--实体创建和更新
    Blazor前后端框架Known-V1.2.14
    CentOS系统下,配制nginx访问favicon.ico
    【Python机器学习】无监督学习——不同类型的预处理
    数据加密标准(DES)概念及工作原理
    云原生监控系统Prometheus:基于Prometheus构建智能化监控告警系统
    Vue3异步组件和Suspense
    HTTPS的传输过程
    JavaScript Promise 的真正工作原理
  • 原文地址:https://blog.csdn.net/benlalagang/article/details/127818003