欢迎来到资源库(www.zyku.net)

JavaScript

当前位置:首页 > 网页制作 > JavaScript > JS

使用JS将当前html网页导出为pdf教程

时间:2021-09-09|栏目:JavaScript|点击:|我要投稿

很多网页都有一个导出pdf的按钮,点击后可以将网页内容导出为pdf文件下载下来,尤其是评测类的网站使用比较广泛,可以把评测报告导出为pdf下载下来,那么html网页导出为pdf是如何实现的呢,下面就一起来看看。

需要引入三个js文件:

<script src="./js/libs/jquery-2.0.2.js"></script>
<script src="./js/exportpdf/jspdf.debug.js"></script>
<script src="./js/exportpdf/html2canvas.js"></script>

代码部分:

function downloadSG(){
        html2canvas($('#appmsg'), {
        height:5000,
        onrendered: function(canvas) {
            var imgData = canvas.toDataURL('img/notice/png');
            var doc = new jsPDF('p', 'px','a3');
            //第一列 左右边距  第二列上下边距  第三列是图片左右拉伸  第四列 图片上下拉伸
            doc.addImage(imgData, 'PNG', -9, 0,650,1500);
            doc.addPage();
            doc.addImage(imgData, 'PNG', -9, -900,650,1500);
            doc.save('test.pdf');
        }
    });
}

关键代码解析:

html2canvas 是将当前页面转换成图片;

$('#appmsg') 是要转换为图片的页面范围;

height:5000,这个高度要根据页面的大小灵活调整;

var doc = new jsPDF('p', 'px','a3'); p:横向,a3:纸张大小,默认是a4;

doc.addImage(imgData, 'PNG', -9, 0,650,1500);将转换后的图片放到pdf文档上,后面四个参数可根据实际效果灵活调整;

doc.addPage(); 一页pdf显示不完整的时候,新增一页;

(资源库 www.zyku.net)

JS PDF

上一篇:JS中split字符串分割

栏    目:JavaScript

下一篇:js判断字符串中是否包含某个字符串

本文标题:使用JS将当前html网页导出为pdf教程

本文地址:https://www.zyku.net/js/2835.html

关于我们 | 版权申明 | 寻求合作 |

重要申明:本站所有的文章、图片、评论等内容,均由网友发表或上传并维护或收集自网络,仅供个人学习交流使用,版权归原作者所有。

如有侵犯您的版权,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:95148658 | 邮箱:mb8#qq.com(#换成@)

苏ICP备2020066115号-1

本网站由提供CDN加速/云存储服务