码迷,mamicode.com
首页 > 其他好文 > 详细

test

时间:2020-03-29 10:54:32      阅读:36      评论:0      收藏:0      [点我收藏+]

标签:font   span   input   hone   table   sch   let   ide   数据   

技术图片
<html>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <head>
        <input type="text" name="" id="content" value="" />
        <p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p>
        <button onclick=‘aa()‘>导出</button>
    </head>

    <body>
        <script>
            function aa(){
                var content = $(‘#content‘).val()
                debugger
                console.log(content);
                
            }
            
            
            function tableToExcel() {
                
                
                
                
                
                //要导出的json数据
                const jsonData = [{
                        name: ‘路人甲‘,
                        phone: ‘123456‘,
                        email: [email protected]
                    },
                    {
                        name: ‘炮灰乙‘,
                        phone: ‘123456‘,
                        email: [email protected]
                    },
                    {
                        name: ‘土匪丙‘,
                        phone: ‘123456‘,
                        email: [email protected]
                    },
                    {
                        name: ‘流氓丁‘,
                        phone: ‘123456‘,
                        email: [email protected]
                    },
                ]
                //列标题
                let str = ‘<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>‘;
                //循环遍历,每行加入tr标签,每个单元格加td标签
                for(let i = 0; i < jsonData.length; i++) {
                    str += ‘<tr>‘;
                    for(let item in jsonData[i]) {
                        //增加\t为了不让表格显示科学计数法或者其他格式
                        str += `<td>${ jsonData[i][item] + ‘\t‘}</td>`;
                    }
                    str += ‘</tr>‘;
                }
                //Worksheet名
                let worksheet = ‘Sheet1‘
                let uri = ‘data:application/vnd.ms-excel;base64,‘;

                //下载的表格模板数据
                let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
      xmlns:x="urn:schemas-microsoft-com:office:excel" 
      xmlns="http://www.w3.org/TR/REC-html40">
      <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
        <x:Name>${worksheet}</x:Name>
        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
        </head><body><table>${str}</table></body></html>`;
                //下载模板
                window.location.href = uri + base64(template)
            }
            //输出base64编码
            function base64(s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            }
        </script>
    </body>

</html>
View Code

 

test

标签:font   span   input   hone   table   sch   let   ide   数据   

原文地址:https://www.cnblogs.com/wush-1215/p/12591006.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!