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

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

月光魔力鸭

2019-03-03 08:53 阅读 2601 喜欢 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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
我们经常会有判断一个数值是素数的需求,那么我们如何来实现呢?
在通过chrome浏览器来调用摄像头的时候发现getUserMedia报错,但是本地开发却没有问题,主要原因是https环境的问题。chrome 不允许在非https和非localhost下的非安全环境进行调用。
最大公因数,也称最大公约数、最大公因子,指两个或多个整数共有约数中最大的一个。a,b的最大公约数记为(a,b),同样的,a,b,c的最大公约数记为(a,b,c),多个整数的最大公约数也有同样的记号。求最大公约数有多种方法,常见的有质因数分解法、短除法、辗转相除法、更相减损法。与最大公约数相对应的概念是最小公倍数,a,b的最小公倍数记为[a,b]。
在web开发过程中,现在JSON 已经到了俯拾皆是的地步了,操作JSON对于JS来说非常简单,那么我们对于JSON的转化是如何应对的呢?
this 是 JavaScript 的一大难点,多年经验的前端程序员都可能对这方面模糊。this 在大量的函数、类库中都有使用,理清显式绑定和隐式绑定有助于理解或书写这类函数。
关于web打印,需要对页面内容进行页面样式设置,呈现出分页的样子,同时对于题目中的图片或表格尽量不分到两个页面中,因此实现了一个jquery的web打印插件,当然,这个插件目前只适用于部分情况,仅供借鉴
在开发过程中经常会碰到跨frame 去操作的需求,那么如何获得这个frame呢,这里写了一个工具类,用来通过name获得frame的jq对象
在项目开发过程中,分页是少不了的,之前封装了一个分页组件,样式是基于bootstrap的样式,当然也可以自己来修改