HTML頁面導出PDF——高清版

　　須要作一個導出PDF的功能，網上找有不少，可是通常導出來的都是比較模糊的那種，下面這個是高清版的，導出的PDF都是幾M，跟正常手動導出的差很少，很清晰。

　　首先用到的JS有：

<script  type="text/javascript" charset="utf-8"  src="js/html2canvas.js"></script>
<script  type="text/javascript" charset="utf-8" src="js/jsPdf.debug.js"></script>
<script  type="text/javascript" charset="utf-8" src="js/canvas2image.js"></script>

　　代碼：　　

   <script>
 function exportReportTemplet() {
            var element = $("#print");    // 這個dom元素是要導出pdf的div容器
            var w = element.width();    // 得到該容器的寬
            var h = element.height();    // 得到該容器的高
            var offsetTop = element.offset().top;    // 得到該容器到文檔頂部的距離
            var offsetLeft = element.offset().left;    // 得到該容器到文檔最左的距離
            var canvas = document.createElement("canvas");
            canvas.width = w * 2;    // 將畫布寬&&高放大兩倍
            canvas.height = h * 2;
            var context = canvas.getContext("2d");
            var scale = 2;
            context.scale(2, 2);
          //  context.translate(-offsetLeft - abs, -offsetTop);

            var opts = {
                scale: scale,
                canvas: canvas,
                width: w,
                height: h,
                useCORS: true,
                background: '#FFF'
            }

            html2canvas(element, opts).then(function (canvas) {
                allowTaint: false;
                taintTest: false;
                var contentWidth = canvas.width;
                var contentHeight = canvas.height;
                //一頁pdf顯示html頁面生成的canvas高度;
                var pageHeight = contentWidth / 592.28 * 841.89;
                //未生成pdf的html頁面高度
                var leftHeight = contentHeight;
                //頁面偏移
                var position = 0;
                //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高
                var imgWidth = 595.28;
                var imgHeight = 592.28 / contentWidth * contentHeight;

                var pageData = canvas.toDataURL('image/jpeg', 1.0);
             //   var oCanvas = document.getElementById("print");
               // Canvas2Image.saveAsJPEG(oCanvas);
                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('銷售合同.pdf');
             })
      
        }
     </script>