话不多说直接上代码

第一步:导入jquery的插件https://github.com/rainabba/jquery-table2excel

HTML部分:

第二步添加一个按钮

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

以及添加一个表格,这里需要注意一个地方,下面表格中有一个class类(class="noExl")他的目的就是让不要显示的列显示出来

<div class="table-responsive">
                <table class="table table-hover" id="test_table">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>模具编号></th>
                            <th>模具名称</th>
                            <th模具照片</th>
                            <th>产品图号</th>
                            <th>产品名称</th>
                            <th>入账时间</th>
                            <th>生产班次</th>
                            <th>操作工</th>
                            <th>操作工号</th>
                            <th工单号</th>
                            <th>地域</th>
                            <th>模具状态</th>
                            <th  class="noExl">模具详细</th>
                            <th  class="noExl">模具保养</th>
                            <th  class="noExl">模具维修</th>
                            <th style="width: 140px;"  class="noExl">操作</th>
                        </tr>
                    </thead>
                    <tbody>

<!--因为我这个表格是动态的,所以没有数据,但都是一样的-->
                    </tbody>
                </table>
            </div>

js部分:

第三步:

$(function () {

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

代码到这里基本就完成了,但是因为有需求,这个表格里面有图片,所以下面写出我导入图片的思路;

刚开始是这样的:

照片直接就没显示出来

就想着,显示不出来肯定是地址不对,刚开始代码是这样

给你们看下,我打印出来的图片地址是什么样的,也就是这个

console.log(data.T_blog[i].mouldPhoto)

很明显这是我本地图片的地址,难怪会显示不出来,所以,我想到了一个这样的方法

在前面在拼接一张图片,但是我给它隐藏,所以我们页面上就不会显示出来,但是它的地址,我们要给它换成自己域名地址,比如说 http://www.baidu.com,然后,后面再加上我图片的地址,因为我那个地址是本地的,有../,所以我用了substr方法

https://www.w3school.com.cn/jsref/jsref_substr.asp

我截取出来的图片地址也就变成了http://www.twinhu.com/NBMADE/pic/2019-08-20/图吧/1566298303000.jpg,

这样,导入到Excel里面图片就能显示出来,

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

这个功能可能会有许多问题,欢迎大家评论,不足之处请大家谅解。

   

jquery实现表格导入到Excel(加图片)的更多相关文章

  1. 网页表格导入导出Excel

    用JS实现网页表格数据导入导出excel. 首先是JS文件中的代码 (function($){ function getRows(target){ var state = $(target).data ...

  2. 如何使用免费控件将Word表格中的数据导入到Excel中

    我通常使用MS Excel来存储和处理大量数据,但有时候经常会碰到一个问题—我需要的数据存储在word表格中,而不是在Excel中,这样处理起来非常麻烦,尤其是在数据比较庞大的时候, 这时我迫切地需要 ...

  3. 使用 EPPlus 封装的 excel 表格导入功能 (.net core c#)

    使用 EPPlus 封装的 excel 表格导入功能 前言 最近做系统的时候有很多 excel导入 的功能,以前我前后端都做的时候是在前端解析,然后再做个批量插入的接口 我觉着这样挺好的,后端部分可以 ...

  4. 使用 EPPlus 封装的 excel 表格导入功能 (二) delegate 委托 --永远滴神

    使用 EPPlus 封装的 excel 表格导入功能 (二) delegate 委托 --永远滴神 前言 接上一篇 使用 EPPlus 封装的 excel 表格导入功能 (一) 前一篇的是大概能用但是 ...

  5. phpexcel 导入导出excel表格

    phpexcel中文实用手册 转载:http://www.cnblogs.com/freespider/p/3284828.html 下面是总结的几个使用方法 include 'PHPExcel.ph ...

  6. 前端Excel表格导入导出,包括合并单元格,表格自定义样式等

    表格数据导入 读取导入Excel表格数据这里采用的是 xlsx 插件 npm i xlsx 读取excel需要通过 XLSX.read(data, {type: type}) 方法来实现,返回一个叫W ...

  7. 效率最高的Excel数据导入---(c#调用SSIS Package将数据库数据导入到Excel文件中【附源代码下载】) 转

    效率最高的Excel数据导入---(c#调用SSIS Package将数据库数据导入到Excel文件中[附源代码下载])    本文目录: (一)背景 (二)数据库数据导入到Excel的方法比较   ...

  8. 网站开发进阶(二十五)js如何将html表格导出为excel文件

    js如何将html表格导出为excel文件        赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! jsp页面数据导出成excel的方法很 ...

  9. 前端把html表格生成为excel表格

    最近公司改后台管理系统.要求导出台账项目等等为excel表格,找半天还真有,他是通过query.table2excel.js 实现,原谅我原生不会弄这个当然大家有可以给我留言. <!DOCTYP ...

随机推荐

  1. [Github]watch和star的区别

    1. Watch Issues 以及它们的评论 Pull Requests 及评论 对任何提交的评论 如果没有watch,只有在参与了讨论的情况下会接收到提醒 : 被 @ 提及 被分配 Issues ...

  2. python基础之元祖、嵌套,for循环、 enumerate、range的试用案例

    元祖又叫做只读列表,可循环查询.可切片,元祖里的直接元素不能更改,但是若里面有嵌套的列表,则可以修改列表里的元素 tu = (1,2,3,'sun',[3,4,5,'cat']) tu[4][3] = ...

  3. WebGL中深度碰撞方法总结

    z-fighting问题是三维渲染中常见的问题,本文根据实际工作中遇到的一些场景,进行了系统的总结 一个实际工作中的问题 当两个面离得太近就会发生深度碰撞问题,比如: 遇到深度检测问题,最重要的是先搞 ...

  4. linux初学者-虚拟机联网篇

    linux初学者-虚拟机联网篇 在虚拟机的使用过程中,本机可以连接WIFI直接上网,但是有时候需要用到虚拟机的联网,那么在本机联网的情况下,虚拟机怎么联网呢?接下来将介绍如何在本机已经连接到WIFI的 ...

  5. Python实现性能自动化测试竟然如此简单

    一.思考❓❔ 1.什么是性能自动化测试? 性能 系统负载能力 超负荷运行下的稳定性 系统瓶颈 自动化测试 使用程序代替手工 提升测试效率 性能自动化 使用代码模拟大批量用户 让用户并发请求 多页面多用 ...

  6. Skier 游戏

    # Listing_10-1.py # Copyright Warren Sande, 2009 # Released under MIT license http://www.opensource. ...

  7. Mac 使用小结

    小白使用 Mac 的点点滴滴总结,更新中…… 1. 显示/隐藏 文件的命令: a) 显示文件: defaults write com.apple.finder AppleShowAllFiles -b ...

  8. Kubernetes容器集群管理环境 - 完整部署(上篇)

    Kubernetes(通常称为"K8S")是Google开源的容器集群管理系统.其设计目标是在主机集群之间提供一个能够自动化部署.可拓展.应用容器可运营的平台.Kubernetes ...

  9. ElasticSearch6.x版本聚合分析整理

    ElasticSearch6.x版本聚合分析整理 ES将聚合分析主要分为如下4类 Bucket,分桶类型,类似SQL中的GROUP BY语法 Metric,指标分析类型,如计算最大值 , 最小值,平均 ...

  10. Hadoop 系列(二)—— 集群资源管理器 YARN

    一.hadoop yarn 简介 Apache YARN (Yet Another Resource Negotiator) 是 hadoop 2.0 引入的集群资源管理系统.用户可以将各种服务框架部 ...