html2canvas.js + jspdf.js 实现html转pdf / html转图片

<button onclick="HtmlToPdf()"> 转储pdf </button>
  <button onclick="HtmlToImage()"> 转储image </button>
  <div id="pdf" style="800px;margin:0 auto">
    <h1>第一章　总　　则</h1>
    <h3>第一条</h3>
    <p>为了保护劳动者的合法权益，调整劳动关系，建立和维护适应社会主义市场经济的劳动制度，促进经济发展和社会进步，根据宪法，制定本法。</p>
    <h3>第二条</h3>
    <p>在中华人民共和国境内的企业、个体经济组织（以下统称用人单位）和与之形成劳动关系的劳动者，适用本法。 国家机关、事业组织、社会团体和与之建立劳动合同关系的劳动者，依照本法执行。</p>
    <h3>第三条</h3>
    <p>劳动者享有平等就业和选择职业的权利、取得劳动报酬的权利、休息休假的权利、获得劳动安全卫生保护的权利、接受职业技能培训的权利、享受社会保险和福利的权利、提请劳动争议处理的权利以及法律规定的其他劳动权利。
      劳动者应当完成劳动任务，提高职业技能，执行劳动安全卫生规程，遵守劳动纪律和职业道德。</p>
    <h3>第四条</h3>
    <p>用人单位应当依法建立和完善规章制度，保障劳动者享有劳动权利和履行劳动义务。</p>
    <h3>第五条</h3>
    <p>国家采取各种措施，促进劳动就业，发展职业教育，制定劳动标准，调节社会收入，完善社会保险，协调劳动关系，逐步提高劳动者的生活水平。</p>
    <h3>第六条</h3>
    <p>国家提倡劳动者参加社会义务劳动，开展劳动竞赛和合理化建议活动，鼓励和保护劳动者进行科学研究、技术革新和发明创造，表彰和奖励劳动模范和先进工作者。</p>
    <h3>第七条</h3>
    <p>劳动者有权依法参加和组织工会。 工会代表和维护劳动者的合法权益，依法独立自主地开展活动。</p>
    <h3>第八条</h3>
    <p>劳动者依照法律规定，通过职工大会、职工代表大会或者其他形式，参与民主管理或者就保护劳动者合法权益与用人单位进行平等协商。</p>
    <h3>第九条</h3>
    <p>国务院劳动行政部门主管全国劳动工作。 县级以上地方人民政府劳动行政部门主管本行政区域内的劳动工作。</p>
  </div>
  <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>
  <script type="text/javascript">
    // 指定 html元素 转pdf 下载至本地
    function HtmlToPdf() {
      let dom = document.getElementById("pdf");
      html2canvas(dom).then(canvas => {
        let url = canvas.toDataURL("image/png", 1);
        let pdf = new jsPDF('', 'pt', 'a4');
        pdf.addImage(url, 'png', 10, 60)
        pdf.save('test.pdf');
      });
    }
    // 指定 html元素 转图片 可替换已有元素或追加至当前document中
    function HtmlToImage() {
      let dom = document.getElementById("pdf");
      html2canvas(dom).then(canvas => {
        let url = canvas.toDataURL("image/png", 1);
        let imgHtml = new Image();
        imgHtml.src = url;
        dom.innerHTML = '';
        dom.appendChild(imgHtml)
      });
    }
  </script>