澳门威利斯人_威利斯人娱乐「手机版」

来自 网络资讯 2019-08-17 13:01 的文章
当前位置: 澳门威利斯人 > 网络资讯 > 正文

威尼斯人线上娱乐JS实现div模块的截图并下载功能

前日集团项目里有那般多少个急需,把网页的某一部分能够一键截图。那几个意义实在就是对人工的三个优化,假诺是人工做的话,相信大家都领悟怎么办(用截图工具在钦命区域截图,然后保留到地头,再上传的服务器上去)。笔者那些保护就一蹴即至那几个批量的人工的优化。好,废话相当的少说了。直接上逻辑和代码。'

类型支出中遇见了一个变态须求,供给把一整个页面导出为pdf格式,并且要封存页面上的兼具的报表、svg图片和体制。

当须求贯彻html页面部分模块截图并有所保存图片成效时,前台直接生成截图并下载会方便的多。多的不说,直接看代码

其一题指标消除方案:html to canvas to png. 近些日子有三个如此的插件: html2canvas,

轻松,便是希望像截图同样,把任何页面截下来,然后保留成pdf。

率先我们要求引进2个js文件:

   html2canvas($targetElem, {
     useCORS: true,
     onrendered: function(canvas) {
     }
     });

咋不上天呢……

 <script type="text/javascript" src="js/html2canvas.js"></script>
 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

这一个'$targetElem'正是特别要退换的html, useCO卡宴S 用来设置图片是还是不是跨域(如html图片域名和当前网址不是同一个域名,必要安装那天性情), onrendered 是改变完毕后进行的不二等秘书诀。

查了一下,能够完成html转pdf的办法也许挺多的,大致有以下三种:

参加css 样式,首假若变化"X"关闭图片Logo:

里面有一种景况供给思虑:即便html标签里有svg标签, 如今htm2canvas不援救svg标签。

1、超过二分之一浏览器就有那个职能。唯独我们客户要的可不是那一个,人家要的是能够在系统中主动触发的导出为pdf效用,所以这种方案pass。

body{background: #ccc}
#dw{position: absolute;top: 10px;left:10%;height: 620px;width:1030px;background: #fff; border:1px solid black;padding: 10px}
.close{
 position:relative;
 left: 10px;
 width:0.2em;
 height:1em;
 background: #333;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
 display: inline-block;
}
.close:after{
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width:0.2em;
 height:1em;
 background: #333;
 -webkit-transform: rotate(270deg);
 -moz-transform: rotate(270deg);
 -o-transform: rotate(270deg);
 -ms-transform: rotate(270deg);
 transform: rotate(270deg);
}

这么些情景下就必要先把svg管理成html2canvas能管理标签。

2、利用第三方工具。本人找到了一种采纳wkhtmltopdf这种工具来导出的方案,本人在大家的花色中试了弹指间,效果不佳,而且对svg图片的帮衬也极度。pass。

写入随意div 模块,作者不管地点给的点击截图按键

我那政策是 svg 转变到 canvas ,html2canvas 调换达成,再回复svg。这里本身还亟需以此插件canvg(svg转canvas)

3、还应该有一种是运用iText类后台生成java文件。但因为急需导出的这一个页面是动态页面,而且直接把页面传给后台会抛弃大量样式,所以照旧pass。

<!-- 要截图的div main 蓝色区域 -->
<div id="main" style="width: 50%; margin-left: 100px;padding: 50px;height: 400px;background: #5a90a0">
  <div style="height: 200px;width: 200px;background: #ccc;"></div>
  <div style="height: 30px;width: 168px;border:2px solid black;background: red;text-align: center;" onclick="doScreenShot()">截图</div>
</div>
<!-- 生成图片展示的DIV dw-->
<div id="dw" >
  <div style="float: right;width: 25px;height: 25px;" title="关闭" onclick="closeok()">
    
  </div> 
</div>

本文由澳门威利斯人发布于网络资讯,转载请注明出处:威尼斯人线上娱乐JS实现div模块的截图并下载功能

关键词: 澳门威利斯人