用jspdf实现页面下载生成pdf文件

  • Post author:
  • Post category:其他





用jspdf实现页面下载生成pdf文件


一路辛酸就不多说了,经历了各种尝试,最后终于搞定,直接贴代码:



function pdfCreater(){




html2canvas(document.body, {







onrendered: function(canvas) {






var imgData = canvas.toDataURL();





/* var doc = new jsPDF(‘p’, ‘pt’, ‘a4’, false); */





var doc = new jsPDF();



// 第一列 左右边距  第二列上下边距  第三列是图片左右拉伸  第四列 图片上下拉伸



doc.addImage(imgData, ‘png’, 0,0,260,0);





doc.save(‘合同.pdf’);



}



});






}




  1. function


    downloadSG(){


  2. html2canvas($(

    ‘#appmsg’


    ), {


  3. height:5000,

  4. onrendered:

    function


    (canvas) {



  5. var


    imgData = canvas.toDataURL(


    ‘img/notice/png’


    );



  6. var


    doc =


    new


    jsPDF(


    ‘p’


    ,


    ‘px’


    ,


    ‘a3’


    );



  7. //第一列 左右边距  第二列上下边距  第三列是图片左右拉伸  第四列 图片上下拉伸




  8. doc.addImage(imgData,

    ‘PNG’


    , -9, 0,650,1500);


  9. doc.addPage();

  10. doc.addImage(imgData,

    ‘PNG’


    , -9, -900,650,1500);


  11. doc.save(

    ‘test.pdf’


    );


  12. }

  13. });

  14. }

需要引入三个js文件:



  1. <


    script




    src


    =


    “./js/libs/jquery-2.0.2.js”


    >


    </


    script


    >





  2. <


    script




    src


    =


    “./js/exportpdf/jspdf.debug.js”


    >


    </


    script


    >





  3. <


    script




    src


    =


    “./js/exportpdf/html2canvas.js”


    >


    </


    script


    >




关键代码解析:

html2canvas 是将当前页面转换成图片;

$(‘#appmsg’) 是要转换为图片的页面范围;

height:5000,这个高度要根据页面的大小灵活调整;

var doc = new jsPDF(‘p’, ‘px’,’a3′); p:横向,a3:纸张大小,默认是a4;

doc.addImage(imgData, ‘PNG’, -9, 0,650,1500);将转换后的图片放到pdf文档上,后面四个参数可根据实际效果灵活调整;

doc.addPage(); 一页pdf显示不完整的时候,新增一页;


如果本博客无法帮助你,请看这里,本人使用过,效果很好:http://blog.csdn.net/w20228396/article/details/68065552