Html表格转出Excel表

最新推荐文章于 2024-05-16 18:15:52 发布

uhhuh-495

最新推荐文章于 2024-05-16 18:15:52 发布

阅读量248

点赞数

分类专栏：功能（方法）实现案例文章标签： JavaScrip 前端

本文链接：https://blog.csdn.net/weixin_42166007/article/details/96588846

版权

功能（方法）实现案例专栏收录该内容

26 篇文章 0 订阅

订阅专栏

Html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
    <body>
        <input type="button" value="导出" id="button">
        <table border="1" id="table">
            <caption>转码表</caption>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>转码前</th>
                    <th>转码后</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>
    </body> 
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</html>

css样式：

table {
    border-collapse: collapse;
    border:1px solid #d5d5d2;
    text-align:center;
}
td {
    text-align:center;
    border:1px solid #d5d5d2;
    line-height:30px;
    padding:0px 10px;
    min-width:100px;
}

Js：（注意先引入JQuery）

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

$(function(){

    //转码key
    var keyStr = "ABCDEFGHIJKLMNOP" +
    "QRSTUVWXYZabcdef" +
    "ghijklmnopqrstuv" +
    "wxyz0123456789+/" +
    "=";
    //获取转码数据
    getData('data/data.json',function(data){
        var data = data.drug;
        for(var i = 0; i < data.length; i++){
            var key = encode64(data[i].name);
            var html = "";
            html += '<tr>';
            html += '   <td>'+data[i].id+'</td>';
            html += '   <td>'+data[i].name+'</td>';
            html += '   <td>'+key+'</td>';
            html += '   </tr>';
            $("table tbody").append(html);
        }
    });
    
    //转码数据获取
    function getData(url,_callback){
        $.ajax({
            type:"GET",  //请求方式
            url: url,  //文件位置
            dataType: "json",  //返回数据格式为json,也可以是其他格式
            success: _callback,  //请求成功后要执行的函数
            error: function(error){   //请求失败后要执行的函数
                console.log("错了，大哥！！！");
            }
        });
    }
    
    //转码执行函数
    function encode64(input) {
        input = escape(input);
        var output = "";
        var chr1, chr2, chr3 = "";
        var enc1, enc2, enc3, enc4 = "";
        var i = 0;
        do {
            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(i++);
            enc1 = chr1 >> 2;
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
            enc4 = chr3 & 63;
            if (isNaN(chr2)) {
                enc3 = enc4 = 64;
            }
            else if (isNaN(chr3)) {
                enc4 = 64;
            }
            output = output +
                keyStr.charAt(enc1) +
                keyStr.charAt(enc2) +
                keyStr.charAt(enc3) +
                keyStr.charAt(enc4);
            chr1 = chr2 = chr3 = "";
            enc1 = enc2 = enc3 = enc4 = "";
        } while (i < input.length);
        return output;
    }

    // 导出excel
    $('body').on('click', '#button', function(){
        //获取表格
        var tableHtml = $('#table');
        //不能显示class的样式，所以自己重新添加样式 主要为设置边框 格子大小
        $(tableHtml).css({
            'border':'1px solid #d5d5d2',
            'text-align':'center',
            'border-collapse':'collapse',
        });
        $(tableHtml).find('tr td').css({
            'text-align':'center',
            'border':'1px solid #d5d5d2',
            'line-height':'30px',
            'padding':'0px 10px',
            'min-width':'100px'
        });
        //创建Html文档
        // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
        var html = "<html><head><meta charset='utf-8' /></head><body>" + tableHtml[0].outerHTML + "</body></html>";
        // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
        var blob = new Blob([html], { type: "application/vnd.ms-excel" });
        var urlA = document.createElement('a');  //创建a标签
        urlA.href = URL.createObjectURL(blob);  // 利用URL.createObjectURL()方法为a元素生成blob URL
        urlA.download = "转码表.xls";  // 设置文件名，目前只有Chrome和FireFox支持此属性
        urlA.click();  //添加点击事件
    });

})

Json数据：

{
  "drug":[
      {"id":"1","name":"你好"},
      {"id":"2","name":"他好"},
      {"id":"3","name":"我好"},
      {"id":"4","name":"大家好"},
      {"id":"5","name":"不吃麻辣烫"},
      {"id":"6","name":"真香"}
  ]
}

uhhuh-495

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html表格转出Excel表

Html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
复制链接

扫一扫