前端导出pdf

在日常开发过程中用到了pdf导出功能，因为实在懒得等后端给接口方式导出，因此研究了一下前端直接导出pdf文件的方法。用到的插件为html2canvas和jspdf。具体思路就是先获取到需要导出的dom元素，然后先把它canvas成一个图片，再转成pdf格式导出。话不多说 直接上代码

  <div class="form" *ngIf="baseData">
          <div nz-row>
            <div nz-col nzSpan="24" style="height: 45px;line-height: 45px;border-right: 1px solid #797979;">
              <h2>header</h2>
            </div>
          </div>
          <div nz-row>
            <div nz-col nzSpan="6">name1</div>
            <div nz-col nzSpan="6">{{baseData[1].value}}</div>
            <div nz-col nzSpan="6">name2</div>
            <div nz-col nzSpan="6" style="border-right: 1px solid #797979;">{{baseData[2].value}}</div>
          </div>
          <div nz-row>
            <div nz-col nzSpan="6">name3</div>
            <div nz-col nzSpan="6">{{baseData[3].value}}</div>
            <div nz-col nzSpan="6">name4</div>
            <div nz-col nzSpan="6" style="border-right: 1px solid #797979;">{{baseData[4].value}}</div>
          </div>
          <div nz-row>
            <div nz-col nzSpan="6">name5</div>
            <div nz-col nzSpan="6">{{baseData[5].value}}</div>
            <div nz-col nzSpan="6">name6</div>
            <div nz-col nzSpan="6" style="border-right: 1px solid #797979;">{{baseData[6].value}}</div>
          </div>

          <div nz-row>
            <div nz-col nzSpan="24" style="height: 45px;line-height: 45px;border-right: 1px solid #797979;">name7</div>
          </div>
          <div nz-row *ngFor="let data of checkData">
            <div nz-col nzSpan="6">{{data.title}}</div>
            <div nz-col nzSpan="18" style="border-right: 1px solid #797979;">{{data.status == 0? '-' : data.statusName}}</div>
          </div>

          <div nz-row>
            <div nz-col nzSpan="24" 
            style="height: 145px;
            line-height:
            45px;border-bottom:1px solid #797979;
            border-right: 1px solid #797979;
            text-align: left;padding-left: 10px;">other：</div>
          </div>

        </div>

　　

 // 导出pdf
  public exportPDF() {
    const pdf = new jsPDF('','pt','a4');
    const w = 575;
    const h = 595;
    const dom = document.getElementsByClassName('form') as HTMLCollectionOf<HTMLElement>;
    html2canvas(dom[0]).then((canvas)=>{
      console.log(canvas);
      const pageData = canvas.toDataURL('image.jpeg',1);
      pdf.addImage(pageData, 'JPEG', 10, 10, w, h / canvas.width * canvas.height);
      pdf.save((new Date()).valueOf() + '.pdf');
    })
  }

 如有错误，敬请指正，相互学习