通过html2canvas+jspdf将html页面生成PDF下载

通过html2canvas+jspdf将html页面生成PDF下载

月光魔力鸭

2019-03-03 08:53 阅读 982 喜欢 0 html转pdf html转图片 canvas

这里讲一种实现起来比较简单的html转pdf下载的实现。

依赖插件

html2canvas jspdf

思路

通过html2canvas,我们可以将指定的一个dom元素,渲染到canvas中,然后从canva中获得该图片,并将图片通过jspdf来生成。

代码

function createPdf (selector,pagesize,direction,title){
    var key = pagesize +''+direction;
    var settings = {
        '00' : {
            pdf : {orientation : 'portrait',format : 'a4',unit : 'px'},
            width : 448,
            height : 632.5
        },
        '01' : {
            pdf : {orientation : 'landscape',format : 'a4',unit : 'px'},
            width : 632.5,
            height : 448
        },
        '10' : {
            pdf : {orientation : 'portrait',format : 'a3',unit : 'px'},
            width : 632.5,
            height : 894.2
        },
        '11' : {
            pdf : {orientation : 'landscape',format : 'a3',unit : 'px'},
            width : 894.2,
            height : 632.5
        }
    };
    var set = settings[key];
    var doc = new jsPDF(set.pdf);
    var arr = [];//根据顺序保存
    var $arr = $(selector);
    function tempCreate(){
        if($arr.length == 0){//没有啦
            //执行生成
            tempPdf();
        }else{
            var $dom = $arr.splice(0,1);
            html2canvas($dom[0]).then(canvas => {
                var dataurl = canvas.toDataURL('image/png');
                arr.push(dataurl);
                tempCreate();
            });
        }
    }
    function tempPdf(){
        arr.forEach((item,i)=>{
            if(i !== 0){
                doc.addPage();
            }
            doc.addImage(item,'png',-1,-1,set.width,set.height);//根据不同的宽高写入
        })
        //根据当前的作业名称
        doc.save(title+'.pdf');
    }
    tempCreate();
}

需要指定容器(依赖jquery),然后指定纸张A4或 A3,以及横纵向。

//调用
createPdf('.single-page',0,0,'test')

当然,如果是数据量很大的话,就不建议在前台生成了,最好还是放在后端去做。个人测试过,做A4的图片生成PDF,当数量大约在100左右的时候,浏览器就崩溃了,如果只是几页的数据的话,这个方式还是很方便的。

Ps:浏览器要是现代浏览器哈。

参考资料

html2canvas : http://html2canvas.hertzen.com/ jspdf :https://github.com/MrRio/jsPDF

转载请注明出处: https://chrunlee.cn/article/html-to-pdf-download.html


感谢支持!

赞赏支持
提交评论
评论信息(请文明评论)
暂无评论,快来快来写想法...
推荐
最大公因数,也称最大公约数、最大公因子,指两个或多个整数共有约数中最大的一个。a,b的最大公约数记为(a,b),同样的,a,b,c的最大公约数记为(a,b,c),多个整数的最大公约数也有同样的记号。求最大公约数有多种方法,常见的有质因数分解法、短除法、辗转相除法、更相减损法。与最大公约数相对应的概念是最小公倍数,a,b的最小公倍数记为[a,b]。
通过修改数据库编码处理存储emoj表情导致的报错问题。
在使用echarts 来做统计报表的时候,由于数量较多,准备将同类型的相同属性抽取出来,然后用来做默认属性的。结果发现一个问题
在文件上传的时候,经常会对文件的mime进行限制,比如图片 image/jpg 等,让用户可以选择图片,而不是其他的文件。
现象:在IOS中,jsp页面绑定的点击事件,点击后延迟很大,接近1000ms,反应很慢
本文概括了递归、闭包、原型、继承,理清这些基本的概念,有助于你接纳更多的东西,我们会在下一个章节对函数进行更深入的讨论。
在我们web开发过程中经常会碰到针对table的一些dom操作,这里整理一下关于这方面的知识点。当然我们可以通过jquery这样的插件来处理,或许会更简单一些,不过现在简单说下原生JS是如何操作的
web网站上总会有在文本域中提交代码的操作,那么如何处理呢?