Threejs 3D场景页面显示table页面,并导出table为Excel

咻咻咻咻咻咻咻咻

已于 2024-06-27 16:11:32 修改

阅读量647

点赞数 21

文章标签： 3d excel js

于 2024-06-27 16:10:34 首次发布

本文链接：https://blog.csdn.net/weixin_44223927/article/details/140013817

版权

Threejs 3D场景页面显示table页面,并导出table为Excel

前期问题

1.使用xlsx.js导出Excel表时，需要是纯2D页面，不能有3D场景，否则下载无响应
2.将导出功能单独写在html网页上，从3D场景跳转到图表导出页面导出Excel表后再返回会刷新3D场景，并不想刷新原场景

结论

将图表导出功能单独写一个html页面，在3D场景页面使用"iframe"嵌套

代码

图表导出页面代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./type.css"/><!--连接自定义的css文件-->
    </head>
    <body style="background-color: rgb(161, 161, 161);">
        <div>
            <div >
                <button class="downbtn" style="right: 80px;top:40px;" onclick="CloseWindow()">退出</button>
            </div>

            <div >
                <button class="downbtn"  style="right: 80px;top:500px;"  onclick="ShowExcel('block')">下载</button>
                <table id="table">
                    <thead >
                        <tr style="font-size: 30px;">
                            <th colspan="3">实验数据</th>
                        </tr>
                        <tr style="font-size: 20px;">
                            <th>表头1</th>
                            <th>表头2</th>
                            <th>表头3</th>
                        </tr>
                    </thead>
                    <tbody style="font-size: 15px;">
                        <tr>
                            <td>数据1</td>
                            <td>数据2</td>
                            <td>数据3</td>
                        </tr>
                        <tr>
                            <td>数据4</td>
                            <td>数据5</td>
                            <td>数据6</td>
                        </tr>
                    </tbody>
                </table>
                <div id="excelui">
                    <h2  style="position: absolute; left: 80px; top:60px;color: #585858;">表名：</h2>
                    <input type="text" id="excelname" style="right: 80px; top:80px">
                    <button class="downbtn" style="left: 80px;bottom:40px;" onclick="DownExcel()">确定</button>
                    <button class="downbtn" style="right: 80px;bottom:40px;" onclick="ShowExcel('none')">取消</button>
                </div>
            </div>
        </div>   
    </body>

    <script src="../node_modules/xlsx/xlsx.js"></script><!--引入自己xlsx.js所在位置-->
    <script>
       function ShowExcel(state)
       {
        document.getElementById('excelname').value="";
        document.getElementById("excelui").style.display = state;
       } 
       function DownExcel()
       {
            var name = document.getElementById('excelname').value;
            if(name=="")
              alert("文件名为空，请输入文件名");
            else
            {
                    var wb = XLSX.utils.book_new(); 
                    var table = document.getElementById('table');    
                    var ws = XLSX.utils.table_to_sheet(table);
                    XLSX.utils.book_append_sheet(wb, ws, 'sheet1');    
                    XLSX.writeFile(wb,name+".xlsx");    //导出excel
                document.getElementById("excelui").style.display = 'none';
            }

       }

       function CloseWindow()//关闭当前嵌入的页面
       {
            window.parent.document.getElementById("mainContent").style.display='none';//获取当前页面嵌入时的父节点，关闭父节点
            window.parent.document.getElementById("main").style.display='block';//显示主页面的其他ui
       }
    </script>
</html>

主场景页面代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./type.css"/><!--连接自定义的css文件-->
    </head>
    <body style="background-color: #464646;" >
        <div>
            <div  id="main">
                <button class="shiyanbtn" style="left: 420px;"  onclick="Load('./test.html')">  数据</button>
            </div>
            <div id="mainContent"><!--用于嵌套网页的div-->
                <iframe id="iframe"></iframe>
            </div>
        </div>
    </body>
    <script type="module" src="dropdown.js"></script><!--自己主场景生成模型代码-->
    <script>
        //在iframe内嵌套其他网页
       var iframe = document.getElementById("iframe");
       function Load(url)//url为需要嵌套的网页地址
       {
          document.getElementById("mainContent").style.display='block';
          iframe.src = url;
          document.getElementById("main").style.display = 'none';
       }
    </script>
</html>

场景用到的css格式代码

.shiyanbtn{/* html中使用class设置时样式前为'.'*/
    position: absolute; 
    width: 90px;
    height: 40px;
    border: none;
    background-color: #ffffff;
    font-size: 18px;
    top:7px;
    color: #313131;
    text-align: center;
}
#mainContent
{/* html中使用id设置时样式前为'#'*/
    position: absolute; /*用于嵌套网页的div必须设置，否则嵌套的网页无法覆盖显示在3d场景上*/
    width: 100%;
    height: 100%;
    display: none;
    border: none;
}
#iframe
{
    width: 100%;
    height: 100%;
}
.downbtn{
    position: absolute; 
    width: 100px;
    height: 40px;
    border: none;
    background-color: #fff8f8;
    font-size: 20px;
}
table{ 
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 700px; 
    left: 300px;
    margin: 0 auto;
}
th,td{
    border: 2px solid #353535;
    padding: 8px;
    text-align: center; 
    margin: 0 auto;
}
#excelui{
    position: absolute; 
    top:300px;
    left: 100px;
    width: 400px;
    height: 250px;
    display: none;
    background-color: #575757;
}