jquery实现表格导入到Excel(加图片)
话不多说直接上代码
第一步:导入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(加图片)的更多相关文章
- 网页表格导入导出Excel
用JS实现网页表格数据导入导出excel. 首先是JS文件中的代码 (function($){ function getRows(target){ var state = $(target).data ...
- 如何使用免费控件将Word表格中的数据导入到Excel中
我通常使用MS Excel来存储和处理大量数据,但有时候经常会碰到一个问题—我需要的数据存储在word表格中,而不是在Excel中,这样处理起来非常麻烦,尤其是在数据比较庞大的时候, 这时我迫切地需要 ...
- 使用 EPPlus 封装的 excel 表格导入功能 (.net core c#)
使用 EPPlus 封装的 excel 表格导入功能 前言 最近做系统的时候有很多 excel导入 的功能,以前我前后端都做的时候是在前端解析,然后再做个批量插入的接口 我觉着这样挺好的,后端部分可以 ...
- 使用 EPPlus 封装的 excel 表格导入功能 (二) delegate 委托 --永远滴神
使用 EPPlus 封装的 excel 表格导入功能 (二) delegate 委托 --永远滴神 前言 接上一篇 使用 EPPlus 封装的 excel 表格导入功能 (一) 前一篇的是大概能用但是 ...
- phpexcel 导入导出excel表格
phpexcel中文实用手册 转载:http://www.cnblogs.com/freespider/p/3284828.html 下面是总结的几个使用方法 include 'PHPExcel.ph ...
- 前端Excel表格导入导出,包括合并单元格,表格自定义样式等
表格数据导入 读取导入Excel表格数据这里采用的是 xlsx 插件 npm i xlsx 读取excel需要通过 XLSX.read(data, {type: type}) 方法来实现,返回一个叫W ...
- 效率最高的Excel数据导入---(c#调用SSIS Package将数据库数据导入到Excel文件中【附源代码下载】) 转
效率最高的Excel数据导入---(c#调用SSIS Package将数据库数据导入到Excel文件中[附源代码下载]) 本文目录: (一)背景 (二)数据库数据导入到Excel的方法比较 ...
- 网站开发进阶(二十五)js如何将html表格导出为excel文件
js如何将html表格导出为excel文件 赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! jsp页面数据导出成excel的方法很 ...
- 前端把html表格生成为excel表格
最近公司改后台管理系统.要求导出台账项目等等为excel表格,找半天还真有,他是通过query.table2excel.js 实现,原谅我原生不会弄这个当然大家有可以给我留言. <!DOCTYP ...
随机推荐
- SSM 框架集成
1.SSM是什么? SSM是指目前最主流的项目架构的三大框架: SpringMVC : spring的 Web层框架,是spring的一个模块 Spring :容器框架 MyBatis :持久层框架 ...
- [HDU4135]CO Prime(容斥)
也许更好的阅读体验 \(\mathcal{Description}\) \(t\)组询问,每次询问\(l,r,k\),问\([l,r]\)内有多少数与\(k\)互质 \(0<l<=r< ...
- 2019牛客多校第二场H-Second Large Rectangle
Second Large Rectangle 题目传送门 解题思路 先求出每个点上的高,再利用单调栈分别求出每个点左右两边第一个高小于自己的位置,从而而得出最后一个大于等于自己的位置,进而求出自己的位 ...
- Hadoop学习(3)-mapreduce快速入门加yarn的安装
mapreduce是一个运算框架,让多台机器进行并行进行运算, 他把所有的计算都分为两个阶段,一个是map阶段,一个是reduce阶段 map阶段:读取hdfs中的文件,分给多个机器上的maptask ...
- 关于ArcGIS api for JavaScript的一些内容
2018-3-19 ArcGIS api for JavaScript 在3.4之后就已经抛弃了过时的写法,采用了AMD的写法,AMD规范即异步模块加载机制,这种规范让JS就像其它面向对象语言(比如J ...
- PHP正则匹配到2个字符串之间的内容,匹配HTML便签内容
PHP正则匹配到2个字符串之间的内容 $preg= '/xue[\s\S]*?om/i'; preg_match_all($preg,"学并思网址xuebingsi.com",$r ...
- MacBook Air多出一块磁盘?
今天将MAC的系统升级到Mojave,启动之后发现系统挂载的磁盘变了,我记得升级之前文件系统是挂载在/dev/disk0上的,但是升级之后,文件系统挂载在/dev/disk1上了. 用diskutil ...
- Go语言圣经习题练习_1.6并发获取多个URL
练习 1.10: 找一个数据量比较大的网站,用本小节中的程序调研网站的缓存策略,对每个URL执行两遍请求,查看两次时间是否有较大的差别,并且每次获取到的响应内容是否一致,修改本节中的程序,将响应结果输 ...
- CSS和html如何结合起来——选择符及优先级
1.选择符 兼容性 统配选择符 * 元素选择符 body 类选择符 .class id选择符 #id 包含原则符 p strong (所有 ...
- Android Studio "cannot resolve symbol R" 问题
初接触Android Studio,又遇到了 "cannot resolve symbol R"问题(以前在 Eclipse 也遇到过),网上方法不一,后来在stackoverfl ...