jexcel_将excel数据导入到页面

jexcel_将excel数据导入到页面<1>

       还需解决的课题：下载jszip.js和xlsx.js　　

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="有效代码_将excel数据导入到网页.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <%--CSS--%>
    <link href="/web_page_ssc/css/jexcel.css" rel="stylesheet" />
    <link href="/web_page_ssc/css/jsuites.css" rel="stylesheet" />

    <%--JS--%>
    <%--Jexcel包--%>
    <script src="../web_page_ssc/js/jexcel.js"></script>
    <script src="../web_page_ssc/js/jsuites.js"></script>   

    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/jszip.js"></script>
    <script src="https://bossanova.uk/jspreadsheet/v3/xlsx.js"></script>

</head>
<body>
    <form id="form1" runat="server">
        <div id="spreadsheet1"></div>
    </form>
</body>
<script>
　　// ？？？疑问，为何不显示修改后的excel
    jexcel.fromSpreadsheet('/temp/2023-05-05-092829.xlsx', function (result) {
        if (!result.length) {
            console.error('jspreadsheet: Something went wrong.');
        } else {
            if (result.length == 1) {
                jspreadsheet(document.getElementById('spreadsheet1'), result[0]);
            } else {
                jexcel.createTabs(document.getElementById('spreadsheet1'), result);
            }
        }
    });

</script>
</html>

 jexcel_将excel数据导入到页面<2> OK

  1 <html xmlns="http://www.w3.org/1999/xhtml">
  2 <head runat="server">
  3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4 
  5     <title>上传文件</title>
  6 
  7     <%--将EXCEL数据JSON化--%>
  8     <script type="text/javascript" src='../web_page_ssc/js/xlsx.core.min.js'></script>
  9     <%--CSS--%>
 10     <link href="/web_page_ssc/css/jexcel.css" rel="stylesheet" />
 11     <link href="/web_page_ssc/css/jsuites.css" rel="stylesheet" />
 12     <%--<link href="/web_page_ssc/css/jexcel.datatables.css" rel="stylesheet"/>--%>
 13 
 14     <%--JS--%>
 15     <script src="../web_page_ssc/js/jquery.min.js"></script>
 16     <%--Jexcel包--%>
 17     <script src="../web_page_ssc/js/jexcel.js"></script>
 18     <script src="../web_page_ssc/js/jsuites.js"></script>
 19 
 20     <style>
 21         .lqwvje-btn {
 22             display: inline-block;
 23             height: 38px;
 24             line-height: 38px;
 25             padding: 0 18px;
 26             background-color: #009688;
 27             color: #fff;
 28             white-space: nowrap;
 29             text-align: center;
 30             font-size: 14px;
 31             border: none;
 32             border-radius: 2px;
 33             cursor: pointer;
 34         }
 35     </style>
 36 </head>
 37 <body>
 38     <form id="form1" runat="server">
 39         <div>
 40             <label id="realBtn" class="lqwvje-btn">
 41                 <input type="file" id="testFile" hidden="hidden" />
 42                 上传文件
 43             </label>
 44         </div>
 45 
 46         <div id="spreadsheet2"></div>
 47 
 48     </form>
 49         
 50     <script type="text/javascript">
 51          52         //首先监听input框的变动，选中一个新的文件会触发change事件
 53         document.querySelector("#testFile").addEventListener("change", function () {
 54             //获取到选中的文件
 55             var file = document.querySelector("#testFile").files[0];
 56 
 57             //判断文件大小
 58             //if (file.size > 1024 * 1024) {
 59             //    alert('当前文件大小:' + Math.floor(file.size / 1024) + 'KB,上传文件不能大于1024KB');
 60             //    return false;
 61             //}
 62 
 63             //判断文件类型
 64             var type = file.name.split('.');
 65             if (type[type.length - 1] !== 'xlsx' && type[type.length - 1] !== 'xls') {
 66                 alert('只能选择excel文件导入');
 67                 return false;
 68             }
 69             const reader = new FileReader();
 70             reader.readAsBinaryString(file);
 71             reader.onload = function (e) {
 72                 const data1 = e.target.result;
 73                 const zzexcel = window.XLS.read(data1, {
 74                     type: 'binary'
 75                 });
 76                 const result = [];
 77                 for (let i = 0; i < zzexcel.SheetNames.length; i++) {
 78                     const newData = window.XLS.utils.sheet_to_json(zzexcel.Sheets[zzexcel.SheetNames[i]]);
 79                     result.push(...newData)
 80                 }
 81                 
 82                 var data2 = JSON.stringify(result) //用变量v_myJson接收JSON数据，JSON.stringify(result)将对象变为字符串
 83                 var myJSON = JSON.parse(data2);    //JSON.parse()将字符串变为对象
 84                 
 85                 //console.log(myJSON);  //F12的控制台中看取出的数据
 86                 //alert(myJSON);      //弹窗中看取出的数据
 87 
 88                 //alert(JSON.stringify(result));
 89                 //for (var i = 0; i < result.length; i++) {
 90                 //    console.log(JSON.stringify(result[i])); //一条一条输出数据（对应EXCEL中一行数据）
 91                 //}               
 92                                
 93 
 94                 jspreadsheet(document.getElementById('spreadsheet2'), {
 95                     //装入数据
 96                     data: myJSON,
 97                     //设置列属性
 98                     columns: [
 99                         { type: 'text', width: 30 },
100                         { type: 'text', width: 81 },
101                         { type: 'text', width: 82 },
102                         { type: 'text', width: 83 },
103                         { type: 'text', width: 84 },
104                         { type: 'text', width: 85 },
105                         { type: 'text', width: 86 },
106                         { type: 'text', width: 87 },
107                         { type: 'text', width: 88 },
108                     ]
109                 });
110             }
111         });
112 
113 
114     </script>
115 </body>
116 </html>

 

posted @ 2023-05-05 11:46  AutomationAnywhere  阅读(128)  评论(0)    收藏  举报