主要是通过和他们和她们html2canvas与jsPDF这两个库来实现

    1. <!DOCTYPE html>
    2.   <html lang="en">
    3.     <head>
    4.     <meta charset="UTF-8">
    5.       <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.         <title>Document</title>
    7. <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.7/dist/html2canvas.min.js"></script>
    8. <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
    9. <style>
    10.   div{
    11.     height: 3366px;
    12.   }
    13. </style>
    14. </head>
    15. <body>
    16.   <button id="exportToPdf">导出为pdf</button>
    17. <div id="export_content">
    18.   <img src="http://www.mjjq.com/pic/20070425/20070425014215558.jpg" alt="" height="3366" width="800">
    19.     </div>
    20. <script>
    21.     var downPdf = document.getElementById("exportToPdf")
    22. downPdf.onclick = function(){
    23.   html2canvas(document.getElementById("export_content"), {
    24.     onrendered:function(canvas) {
    26.       var contentWidth = canvas.width;
    27.       var contentHeight = canvas.height;
    29.       //一页pdf显示html页面生成的canvas高度;
    30.       var pageHeight = contentWidth / 592.28 * 841.89;
    31.       //未生成pdf的html页面高度
    32.       var leftHeight = contentHeight;
    33.       //页面偏移
    34.       var position = 0;
    35.       //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    36.       var imgWidth = 595.28;
    37.       var imgHeight = 592.28/contentWidth * contentHeight;
    39.       返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。
    40.       var pageData = canvas.toDataURL('image/jpeg', 1.0);
    42.       // 三个参数，第一个方向，第二个单位，第三个尺寸格式
    43.       var pdf = new jsPDF('', 'pt', 'a4');
    45.       //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
    46.       //当内容未超过pdf一页显示的范围，无需分页
    47.       if (leftHeight < pageHeight) {
    48.         pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
    49.       } else {
    50.         while(leftHeight > 0) {
    51.           pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
    52.           leftHeight -= pageHeight;
    53.           position -= 841.89;
    54.           //避免添加空白页
    55.           if(leftHeight > 0) {
    56.             //jsPDF提供了一个很有用的API，addPage()，我们可以通过pdf.addPage()，来添加一页pdf，然后通过pdf.addImage(...)，将图片赋予这页pdf来显示。
    57.             pdf.addPage();
    58.           }
    59.         }
    60.       }
    61.       pdf.save('content.pdf');
    62.     },
    63.     //将背景色设置为白色（默认背景为黑色）
    64.     background:"#fff"
    65.   })
    67. }
    68. </script>
    69. </body>
    70. </html>

    github上有一篇文章说明比较详细，还有具体的demo：https://github.com/linwalker/render-html-to-pdf

    1. // 三个参数，第一个方向，第二个尺寸，第三个尺寸格式
    2. var doc = new jsPDF('landscape','pt',[205, 155])
    4. // 将图片转化为dataUrl
    5. var imageData = ‘data:image/png;base64,iVBORw0KGgo...’;
    7. //设置字体大小
    8. doc.setFontSize(20);
    10. //10,20这两参数控制文字距离左边，与上边的距离
    11. doc.text('Stone', 10, 20);
    13. // 0, 40, 控制文字距离左边，与上边的距离
    14. doc.addImage(imageData, 'PNG', 0, 40, 205, 115);
    15. doc.save('a4.pdf')

    最后附上几个jsPDF的官方网址:
    http://rawgit.com/MrRio/jsPDF/master/
    http://rawgit.com/MrRio/jsPDF/master/docs/index.html
    http://mrrio.github.io/