使用js将html的表格导出到excel-1.0

itfound_01

已于 2023-03-09 17:19:30 修改

阅读量2.2k

点赞数

分类专栏： Html 文章标签： javascript html excel

于 2022-12-08 15:33:04 首次发布

本文链接：https://blog.csdn.net/qq_33188431/article/details/128237384

版权

Html 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

工作中存在需要将页面的某个表格导出到excel中,虽然可以使用后端代码或者前端插件实现，但是过程过于繁琐，本文章将详细讲解如何使用js将html中表格快速导出到excel（支持各种前端框架表格，element、layui、bootstarp）。

示例

1.页面

在这里插入图片描述

2.导出结果

在这里插入图片描述

步骤

1. 引用js

原table2excel导出复杂表头可能会有问题，还有数据过长会有显示不全的问题，所以本文章中的table2excel有改造部分，可支持复杂表头以及修复长数据显示不全的问题。

<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/jquery.table2excel.js"></script>

2.使用

 /**
     * 导出
     * @param tableId table所在容器id
     * @param excelName 导出表格名称
     */
    function onImport(tableId, excelName,) {
        $("#" + tableId).table2excel({
            exclude: ".noExl",//过滤位置的 css 类名
            filename: excelName + ".xls",//文件名
            name: "Excel Document Name.xlsx",
            exclude_img: true, //是否表格中的图片
            exclude_links: true,
            exclude_inputs: true,
        });
    }

3. 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格导出demo</title>
    <link rel="stylesheet" href="css/element.css">
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/element.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="js/jquery.table2excel.js"></script>
</head>
<body>
<div id="app">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>简单表头</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="dowloadDemo1()">导出</el-button>
        </div>
        <div id="demo1">
            <el-table
                    :data="tableData1"
                    style="width: 100%">
                <el-table-column prop="date" label="日期" width="180"></el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
            </el-table>
        </div>
    </el-card>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>复杂表头</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="dowloadDemo2()">导出</el-button>
        </div>
        <div id="demo2">
            <el-table
                    :data="tableData2"
                    style="width: 100%">
                <el-table-column prop="date" label="日期" width="150">
                </el-table-column>
                <el-table-column label="配送信息">
                    <el-table-column prop="name" label="姓名" ></el-table-column>
                    <el-table-column label="地址">
                        <el-table-column prop="province" label="省份" ></el-table-column>
                        <el-table-column prop="city" label="市区" ></el-table-column>
                        <el-table-column prop="address" label="地址" ></el-table-column>
                        <el-table-column prop="zip" label="邮编" ></el-table-column>
                    </el-table-column>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
</div>
</body>
<script>
    var index = new Vue({
        el: '#app',
        data: {
            tableData1: [{
                date: '2016-05-02',
                name: '王小虎1',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎2',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎3',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎4',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            tableData2: [{
                date: '2016-05-03',
                name: '王小虎1',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-02',
                name: '王小虎2',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎3',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            },],
        },

        created() {

        },
        methods: {
            dowloadDemo1(name) {
                onImport('demo1', '测试表格1');
            },
            dowloadDemo2(name) {
                onImport('demo2', '测试表格2');
            }
        }
    });

    /**
     * 导出
     * @param tableId table所在容器id
     * @param excelName 导出表格名称
     */
    function onImport(tableId, excelName,) {
        $("#" + tableId).table2excel({
            exclude: ".noExl",//过滤位置的 css 类名
            filename: excelName + ".xls",//文件名
            name: "Excel Document Name.xlsx",
            exclude_img: true, //是否表格中的图片
            exclude_links: true,
            exclude_inputs: true,
        });
    }
</script>
</html>

4. 下载项目

https://download.csdn.net/download/qq_33188431/86937222

itfound_01

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
4
评论
使用js将html的表格导出到excel-1.0

工作中存在需要将页面的某个表格导出到excel中,虽然可以使用后端代码或者前端插件实现，但是过程过于繁琐，本文章将详细讲解如何使用js将html中表格快速导出到word（支持各种前端框架表格，element、layui、bootstarp）。
复制链接

扫一扫