热门搜索:
您现在的位置是：首页 > 文章详情

HTML转pdf

日期：2018-08-29点击：506

<body>

<div class="chart" id="chart">

<img src="../images/group10.png" alt="图片加载失败" />

<img src="../images/permission.png" alt="图片加载失败" />

Hello

</div>

<span id="screenImage" class="btn-screen" >截屏</span>

<a id="downImage" href="" class="btn-screen" >下载</a>

<img id="screenShotImg" src="../images/favicon.jpg" alt="图片" class="screen" />

</body>

<script src="../js/jquery-2.1.4.js"></script>

<script src="../plug/canvas/html2canvas.js"></script>

<script src="../plug/canvas/jspdf.min.js"></script>

<script>

$(document).ready(function() {

$('#screenImage').click(function(e) {

var createBox = $('#chart');

html2canvas(createBox).then(function(canvas) {

var imgUrl = canvas.toDataURL('image/png', 1.0);

var param = new Date().getTime();

$('#screenShotImg').attr('src', imgUrl);

$('#downImage').attr('href', imgUrl);

$('#downImage').attr('download', 'screen_' + param);

var canvasWidth = canvas.width;

var totalHeight = canvas.height;

var pageHeight = canvasWidth/595.28 * 841.89;

var deviation = 0;

document.body.appendChild(canvas);

var doc = new jsPDF('','pt','a4');

if(pageHeight >= totalHeight){

doc.addImage(imgUrl, 'PNG', 0, 0, 595.28, 841.89);

}else{

while(totalHeight > 0){

doc.addImage(imgUrl, 'PNG', 0, deviation, 595.28, 595.28/canvas.width * canvas.height);

totalHeight -= pageHeight;

deviation -= 841.89;

if(totalHeight > 0){

doc.addPage();

}

}

}

doc.save(param + '.pdf');

});

 

});

});

</script>

原文链接：https://yq.aliyun.com/articles/630628
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。

相关文章

    文章评论

    共有0条评论来说两句吧...

    文章二维码

    扫描即可查看该文章

    点击排行

    推荐阅读

    最新文章