前端---HTML转PDF----2018-05-13

一.依赖插件：

1.jquery.js

2.html2canvas-0.4.1.js(注意版本号,不同的版本配置大不相同)

3.jspdf.js (搜索 jsPDF可得)

二.代码：

html2canvas($('#testOptions')[0],{    // 被转换的HTML
                 
                    onrendered: function(canvas){
                        // 展示一下获得的canvas
                        $('#canvas').html(canvas); 

                        // 将canvas转化为PDF
                        var imgData = canvas.toDataURL('image/jpeg');
                        var img = new Image();
                        img.src = imgData;
                        $('.output-image').attr('src',imgData);
                        img.onload = function () {
                            //此处需要注意，pdf横置和竖置两个属性，需要根据宽高的比例来调整，不然会出现显示不完全的问题
                            if (this.width > this.height) {
                                var doc = new jsPDF('l', 'mm', [this.width * 0.225, this.height * 0.225]);
                            } else {
                                var doc = new jsPDF('p', 'mm', [this.width * 0.225, this.height * 0.225]);
                            }
                            doc.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
                            //根据下载保存成不同的文件名
                            doc.save('pdf_' + new Date().getTime() + '.pdf');
                            
                            // 得到base64位的pdf文件。
                           pdf = doc.output('datauristring');
                        };
                    },
                    backgroundColor: '#ffffff'  // pdf 文件背景色为白色
                });

三.总体思想：

1.将HTML转化为canvas，再将canvas转化为pdf