js操作 |
您所在的位置：网站首页 › 滚动条标签 › js操作 |
js操作
|
接到一个需求，客户要求将一个详情表格数据（单元格存在图片）转成一个图片并下载或者直接打印的功能； 思路是这样的，有一个js文件（html2canvas.min.js）可以将指定的元素转成canvas，而casvas可以转成图片，这样就可以下载了。 打印的话使用的是js中window对象的print()方法；具体代码与效果请往下看： 页面基本布局 #div2img{ height: 300px; overflow-y: auto; } #div2img table tr{ height: 40px; line-height: 40px; } 转图片 姓名 性别 年龄 地址 头像 张三 男 32 上海 张三1 男 32 上海 张三2 男 32 上海 $(function(){ $(".button").on("click", function(event) { //要实现的功能 }); });现在基本的页面布局完成了，具体打印的代码如下 //调用html2canvas.min.js中的方法，document.getElementById("div2img")指的是要转成canvas的元素 html2canvas(document.getElementById("div2img")).then(canvas => { //创建一个打开的窗口，也就是新打开的标签页 var mywindow = window.open("打印窗口","_blank"); //给新打开的标签页添加画布内容（这里指的是id=div2img元素的内容） mywindow.document.body.appendChild(canvas); //焦点移到新打开的标签页 mywindow.focus(); //执行打印的方法（注意打印方法是打印的当前窗口内的元素，所以前面才新建一个窗口：print()--打印当前窗口的内容。） mywindow.print(); //操作完成之后关闭当前标签页（点击确定或者取消都会关闭） mywindow.close(); });转成图片下载是将canvas转成图片连接并绑定到一个可点击的标签（我用的是a标签），如果有滚动条的情况下请看文章最后的修改内容，具体代码如下： //调用html2canvas.min.js中的方法，document.getElementById("div2img")指的是要转成canvas的元素 html2canvas(document.getElementById("div2img")).then(canvas => { //转成图片并下载 var domA = document.createElement("a"); //设置下载下来的文件名字，默认的是“下载” domA.download = '钻孔详情'; //图片连接，canvas转成的图片连接（image/png指的是图片文件格式，png可以改成jpg、jpeg） domA.href = canvas.toDataURL("image/png"); //触发点击事件，这是真正开始下载的一步 domA.click(); });到这就完成了，看下效果把：（注意：我用的谷歌浏览器，其他的浏览器兼容性未测试！！！） 完成布局之后的页面是这样的：
打印的效果触发：
转成图片下载效果是
下载下来的图片是
至此，该需求已完成。注意这是我测试的一个demo，不是我实际应用再项目中的代码，希望对大家有所帮助！！！ 2020-09-03更新 发现一个问题，就是如果元素有滚动条的情况下，截取的时候没有包含滚动条隐藏掉的那些内容；我的思路是这样的，我获取元素的可滚动高度(scrollHeight)，就是真实内容的高度（包含原来滚动条隐藏的内容），把这个高度设置给这个元素的可视高度（clientHeight）,这个时候在进行转成图片就可以了，完成这一步之后再把高度转过来就行了！具体修改内容请看下面的代码，依然是卸载按钮点击触发的事件内，代码调整如下 //获取进行下载的元素 let dom = document.getElementById('div2img'); //获取元素的真实高度（包含滚动条隐藏的内容） let height = dom.scrollHeight; //记录一下可视窗口高度（原有的高度样式） let domheight = dom.clientHeight; //设定元素的高度为真实高度 $(dom).css("height", height+"px"); html2canvas(dom,{ height: height //canvas 窗口的高度 }).then(function(canvas) { //转成图片进行下载 var domA = document.createElement("a"); domA.download = '下载';//下载下来的图片命名 domA.href = canvas.toDataURL("image/png"); domA.click(); //恢复元素的高度 $(dom).css("height", domheight+"px"); });最后这个示例的代码下载地址：https://download.csdn.net/download/it_java_shuai/12803858 |
【本文地址】
今日新闻 |
推荐新闻 |