jquery导出页面table为excel

jq导出exceljquery tableExportjquery将页面table导出为exceltableExport.jquery

慢半拍、

1453人浏览 · 2020-05-07 10:13:27

慢半拍、 · 2020-05-07 10:13:27 发布

这用到的是tableExport.jquery.plugin这个库，这是官方github，这是它的npm库的介绍，上面都有说明和用法

重点

这个导出的格式是.xls
如果想导出格式为.xlsx，就是这里，点吧

今天简单说一下，将页面上的table导出为excel，如下图：
在这里插入图片描述

代码也超级简单，只用到两个js文件，都在我给的官方地址可以找到，导出的配置也在：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-1.10.2.min.js"></script>
    <script src="./js/tableExport.min.js"></script>
</head>
<body>
    <button onClick ="$('#tableData').tableExport({ type: 'excel', escape: 'false', fileName: '哈哈哈哈'})">导出excel</button>


    <table border="2" id="tableData">
        <tr>
            <td>不发给他</td>
            <td>豆腐乳</td>
            <td>古田会议他</td>
            <td>官方灯管合同</td>
        </tr>
        <tr>
            <td>VG环保厅内</td>
            <td>从大V粉带吧</td>
            <td>跟团游假如有</td>
            <td>从大V粉带吧</td>
        </tr>
        <tr>
            <td>从大V粉带吧</td>
            <td>歌剧院</td>
            <td>不阖家团圆</td>
            <td>还能</td>
        </tr>
        <tr>
            <td>从大V粉带吧</td>
            <td>你核桃仁母乳</td>
            <td>从大V粉带吧</td>
            <td>被害人你就有人</td>
        </tr>
        <tr>
            <td>从大V粉带吧</td>
            <td>从大V粉带吧</td>
            <td>从大V粉带吧</td>
            <td>从大V粉带吧</td>
        </tr>
    </table>
</body>
</html>

当然它的用法不止于此，他也可以用到vue上，有npm库，导出形式也不止excel这一种，有下图这么多种，每种的用法依赖都不一样，都有说明：
在这里插入图片描述
就酱~