docs/test5.html

<!DOCTYPE>
<html>
  <head>
    <title>
      html2canvas example
    </title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
        background-color: white;
      }
      header, section {
          overflow: hidden;
      }
      ul {
        margin: 0;
        border: 0;
        padding: 0;
      }
      li {
        display: block; /* i.e., suppress marker */
        color: black;
        height: 4em;
        width: 25%;
        margin: 0;
        float: left;
        background-color: green;
        text-align: center;
        line-height: 4em;
      }
      
      aside {
        width: 20%;
        float: left;
        text-align: center;
      }

      aside a {
        display: block;
        height: 4em;
        color: blue;
      }

      article {
        padding: 2em 0;
        width: 80%;
        float: left;
      }
    </style>
  </head>
  <body>
  
    <section>

      <article>
        <h3 style="center">XXX营销策略报告</h3>
        <div id="main" style="height:200px"></div>
        <div id="chart1" style="height:200px"></div>

        <button id="renderPdf">DOWNLOAD PDF</button>      
        <p>
          活动报告

          本次活动共发送短信XXX条，其中触达消费者XXX条（占比：XX%），短信拦截XXX条（占比：XX%）。

          短信触发转化XXX人（占比：xx%)，未转化XXX人（占比：XX%）。

          共转化XXX人，其中XXX人领取优惠卷（占比：xx%），XXX人未领取优惠卷（占比：XX%）。

          共发放优惠卷XXX张，其中XXX已核销（占比：XX%），XXX未核销（占比：XX%）。

          优惠卷转化销售金额：XXX元，环比增长XX%。

          新增会员XXX人，沉睡会员转化XXX人，失活会员转化XXX人。

        </p>
      </article>
    </section>
    <script type="text/javascript" src="./js/html2canvas.js"></script>
    <script type="text/javascript" src="./js/jsPdf.debug.js"></script>
    <script src="./js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            backgroundColor: 'white',
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        myChart.setOption(option);


        var myChart1 = echarts.init(document.getElementById('chart1'));
        var option1 = {
            backgroundColor: 'white',
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        myChart1.setOption(option1);

    </script>
    <script type="text/javascript">

      var downPdf = document.getElementById("renderPdf");

      downPdf.onclick = function() {
          html2canvas(document.body, {
              onrendered:function(canvas) {

                  //返回图片URL，参数：图片格式和清晰度(0-1)
                  var pageData = canvas.toDataURL('image/jpeg', 1.0);

                  //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
                  var pdf = new jsPDF('', 'pt', 'a4');

                  //需要dataUrl格式
                  pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );

                  pdf.save('content.pdf');

              }
          })
      }
    </script>
  </body>
</html>