美文网首页
js-excel in html

js-excel in html

作者: xueyueshuai | 来源:发表于2024-06-30 13:40 被阅读0次

html中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Download Excel in HTML</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.2/xlsx.full.min.js"></script>
</head>
<body>
  <form>
    <input type="file" id="excelFile" accept=".xlsx, .xls" />
    <input type="button" value="Read Excel" onclick="readExcel()" />
  </form>

  <div id="excelContent"></div>

  <button onclick="downloadExcel()">Download Excel</button>


  <script>

    function readExcel() {
      var fileInput = document.getElementById('excelFile');
      var excelContentDiv = document.getElementById('excelContent');

      var file = fileInput.files[0];
      var reader = new FileReader();

      reader.onload = function (e) {
        var data = new Uint8Array(e.target.result);
        var workbook = XLSX.read(data, { type: 'array' });
        var sheetName = workbook.SheetNames[0];
        var sheet = workbook.Sheets[sheetName];

        var excelData = null;
        excelData = XLSX.utils.sheet_to_json(sheet, { header: 0 });
        // excelData = XLSX.utils.sheet_to_json(sheet, { header: 1 });
        console.log(excelData)

        excelContentDiv.innerHTML = JSON.stringify(excelData);
      };

      reader.readAsArrayBuffer(file);
    }

    function downloadExcel() {
      let exportExcelData = [[1,1],[22,2222]];
      if (exportExcelData) {
        let ws = XLSX.utils.aoa_to_sheet(exportExcelData);
        let wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "Sheet 1");
        XLSX.writeFile(wb, '1.xlsx');
      } else {
        alert("No Excel data available. Please upload an Excel file first.");
      }
    }
  </script>
</body>
</html>

相关文章

  • 基础编程语言学习线路图

    HTML HTML教程HTML简介HTML编辑器HTML基础HTML元素HTML属性 HTML标题HTML段落HT...

  • HTML头部-10

    HTML 元素 HTML 元素 HTML 元素 HTML 元素 HTML 元素 HTML ...

  • html 大纲

    html 通用 html 简介 html 常用标签 html 属性 html 表格 html 字体 html 表单...

  • web 前端学习线路图

    一、HTML 教程 HTML教程HTML简介HTML编辑器HTML基础HTML元素HTML属性 HTML标题HTM...

  • 2018-06-04——HTML简介

    HTML 简介 HTML 标签 ·HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 ·HTML...

  • HTML 基础

    HTML 标题 HTML 段落 HTML 链接 HTML 图像 HTML 文本格式化标签 HTML ...

  • html常用的基本标签

    HTML基础包括web工作原理,HTML概述,HTML基本标签和HTML高级标签。 〈html〉...〈/html...

  • Html 学习笔记

    HTML基础 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag) HTML 标签通...

  • HTML:基础(2)元素

    HTML 元素 HTML 文档由 HTML 元素定义。 HTML 元素语法 HTML 元素以开始标签起始 HTML...

  • 2018-10-29 第二阶段 day1 htm

    1.html说明 说明html版本html5-- ...

网友评论

      本文标题:js-excel in html

      本文链接:https://www.haomeiwen.com/subject/kaifqjtx.html