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