html2canvas+pdfjs 下载图片和pdf文件

1、html2canvas+pdfjs 下载图片和pdf文件遇到的坑和要注意的事项。

html2canvas 的版本推荐 

html2canvas 1.0.0-rc.5 或者rc.4 
版本过高 input的内容 生成图片时，内容会往上移动。

html2canvas 生成图片，canvas的大小有限制1240*64257，这是chrome浏览器的大小限制，超过了就会画不上去。

转pdf的时候，分割会切开文字和图片。

 

2、解决办法：

　　canvas的大小有限制。

　　html2canvas 有个scale属性， 假如你要画的也是1240宽度，但是高度不确定，那就用  64257 最大高度 / 你不确定的高度，得出一个比例，然后判断如果大于1 ，scale就是1，如果小于1，就用小于1的数值。

 

setTimeout(()=>{
                            let domHeight = this.$refs.imageWrapper.offsetHeight
                            let maxHeight = 64257

                            html2canvas(this.$refs.imageWrapper,{
                                scale: (maxHeight / domHeight) > 1? 1 : (maxHeight / domHeight)
                            }).then(canvas => {
                                let dataURL = canvas.toDataURL("image/jpeg");
                                if(dataURL){
                                    let fileName =  this.hospital_name+'_xxx报告_'+new Date().getTime() + ".jpeg"
                                    that.fileDown(dataURL,fileName);
                                }else{
                                    // 提示错误
                                }
                            })
                        },500)

imageWrapper 就是要生成图片的dom

　　pdf会切开文字和图片。

　　把会被切开的部分，放在单独的一页上。

　　当你点击pdf下载的时候，给要设置的元素设上 min-height 等于 1762.58 px，同时给这个元素设置border 上下1px 颜色设成和底色一样。

html2canvas(pdfDom,{
                        scale: (maxHeight / domHeight) > 1? 1 : (maxHeight / domHeight)
                    }).then((canvas) => {
                        var contentWidth = canvas.width; // canvas 宽度 1240
                        var contentHeight = canvas.height; // canvas 总高度

                        //一页pdf显示html页面生成的canvas高度;
                        var pageHeight = contentWidth / 592.28 * 841.89;  // 1762.58 canvas上每一页的高度
                        //未生成pdf的html页面高度
                        var leftHeight = contentHeight;
                        //页面偏移
                        var position = 0;
                        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                        var imgWidth = 595.28; // A4 宽度
                        var imgHeight = 592.28/contentWidth * contentHeight; // A4总高度
                        var pageData = canvas.toDataURL('image/jpeg', 1.0);

                        var pdf = new JsPDF('', 'pt', 'a4');

                        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                        //当内容未超过pdf一页显示的范围，无需分页
                        if (leftHeight < pageHeight) {
                            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
                        } else {
                            while(leftHeight > 0) {
                                pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                                leftHeight -= pageHeight;
                                position -= 841.89;
                                //避免添加空白页
                                if(leftHeight > 0) {
                                    pdf.addPage();
                                }
                            }
                        }
                        pdf.save(fileName);

                        // 还原 高度
                        pubsub.publish('setminHeight',0);
                        this.loading_obj.close();
                    })
                },500)

fileName 是文件文件名称 xxx.pdf