话不多说直接上代码

第一步：导入jquery插入表格的插件

github.com/rainabba/jq…

就是把这个js下载到本地就可以了

第二步：添加一个按钮

也就是导出按钮

<button type="button" class="btn btn-default bt_derive">导出</button>

以及添加html部分，也就是表格

<div class="table-responsive">
        <button type="button" class="btn btn-default bt_derive">导出</button>
        <table class="table table-hover" id="test_table">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>产品图片</th>
                    <th>产品名称</th>
                    <th>产品描述</th>
                    <th style="width: 140px;" class="noExl">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>
                        <img width="110" height="50" src="http://www.baidu.com/static/images/haokan.webp" alt=""
                            style="display: none;">
                        <img src="/static/images/haokan.webp" alt="" width="300px">
                    </td>
                    <td>Dimensions</td>
                    <td>好看的图片</td>
                    <td class="noExl"><button>删除</button></td>
                </tr>

            </tbody>
        </table>
    </div>

注意，代码中我是加了两个img标签的，一个是带有域名地址的图片，一个是你本地的图片

代码中“noExl”类，表示这个table列隐藏，不在excel中显示出来

第三步：导出按钮的点击事件

js部分

 //按钮的点击事件
    $(".bt_derive").click(function () {\
        $(".table").table2excel({\
            exclude: ".noExl",\
            name: "Excel Document Name",\
            filename: "myFileName",\
            exclude_img: false,\
            exclude_links: true,\
            exclude_inputs: true\
        });\
    });\
});

如果你写一张图片，也就是没有写加域名地址的图片，那么导出来会是这样的

成功的状态应该是这样的（隐藏那个图片的目的就在这里，你本地的图片是导入不到excel里面的）

注意！！！，导入到Excel里面的图片会非常的大，你也可以设置他的样式，但是不能再style里面设置，这样会无效，只能<img  str='XXXX' width='50px'/>这样设置。

到这里就结束了，功能还是挺简单的，遇到了就记录下来了，有问题欢迎留言