const em = this.refs.xx
let w = em.offsetWidth
let h = em.offsetHeight
let c = document.creatElement('canvas')
// If the page is too large, it will be blocked.
let opts = {
  scale:2.canvas:c,
  width:w,
  height:h,
  useCORS:ture,
  logging:true
}
c.width = w * 2
c.height = h * 2
c.getContext('2d')
// If the page is too large, the page will be stuck.

html2canvas(em, opts).then(function(canvas) {
    var contentWidth = canvas.width;
    var contentHeight = canvas.height;
    // a PDF page displays the canvas height generated by the HTML page;
    var pageHeight = contentWidth / 592.28 * 841.89;
    // Height of HTML page not generated PDF
    var leftHeight = contentHeight;
    // Page offset
    var position = 0;
    // The size of the A4 paper [595.28,841.89], the width and height of the image in the PDF generated by the CANVAS of the HTML page
    var imgWidth = 595.28;
    var imgHeight = 592.28/contentWidth * contentHeight;

    var pageData = canvas.toDataURL('image/jpeg'.1.0);

    var pdf = new jsPDF(' '.'pt'.'a4');

    // There are two heights to distinguish, one is the actual height of the HTML page, and the page height of the generated PDF (841.89)
    // When the content does not exceed the size of a PDF page, no pagination is required
    if (leftHeight < pageHeight) {
    pdf.addImage(pageData, 'JPEG'.0.0, imgWidth, imgHeight);
    } else {    / / paging
        while(leftHeight > 0) {
            pdf.addImage(pageData, 'JPEG'.0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight;
            position -= 841.89;
            // Avoid adding blank pages
            if(leftHeight > 0) {
              pdf.addPage();
            }
        }
    }
    pdf.save('MY exported PDF. PDF');        
  })Copy the code

Trouble spots

1. The solution to incomplete PDF export is to add setTimeout before HTML2Canvas to delay 200ms

2. Left and right scroll bar part export incomplete solution, write a hidden page, set a fixed width, export hidden page

3. The solution is that the export offset leads to incomplete display. Before exporting, display the elements to be exported in full screen



Export images