Разрыв страницы не работает при преобразовании HTML в Canvas, а затем в PDF - PullRequest
Новая
       9

Разрыв страницы не работает при преобразовании HTML в Canvas, а затем в PDF

0 голосов
/ 30 октября 2018

Я конвертирую HTML на холст, а затем в pdf, используя jspdf, он прекрасно работает даже для арабских шрифтов, но единственная проблема в том, что если данные превышены, они просто не показывают, как разбить страницу и показать данные на новой странице.

enter image description here

Код: 

img.src = dataUrl
document.getElementById('printAll').style.visibility = 'visible'   
const input = document.getElementById('printAll');
html2canvas(input)
.then((canvas) => {
  const imgData = canvas.toDataURL('image/png');
  document.getElementById('printAll').style.visibility = 'hidden'
  const pdf = new jsPDF();
  pdf.addImage(this.state.img,'PNG',50,10,pdf.internal.pageSize.getWidth() - 100,pdf.internal.pageSize.getHeight() - 850);
  if (img.src)
  pdf.addImage(img.src, 'PNG', 80, 22, pdf.internal.pageSize.getWidth() - 100, pdf.internal.pageSize.getHeight() - 400);
  // pdf.rect(20, 20, pdf.internal.pageSize.getWidth() - 40, 
  pdf.internal.pageSize.getHeight() - 40, 'S');
  pdf.setTextColor(128,0,128);
  pdf.text("Date", 30, 25);
  pdf.text(this.state.date, 50, 25);
  pdf.addImage(imgData, 'PNG', 35, 90);
  pdf.text('end',30,290)
  pdf.save("download.pdf");  
});

и мой HTML 

<div id="printAll">
{this.state.Orders
   ?
    <Table hover bordered striped responsive size="sm" id="table">
      <tbody>
        {this.state.Orders.length
          ?   this.state.Orders.map((item,ind)=>{
                 return(
                    <tr>
                      <td>{item.key}</td>
                      <td>{item.value}</td>
                    </tr>
                 );
            })
          : null}
      </tbody>
     </Table>
   :
   <div>No data</div>
   }
</div>

Я использую css для страницы A4 с медиа-запросом, и это также не помогает 

#printAll {
    visibility: hidden;
    left: 20px;
    top: 50px;
    bottom: 0;
    overflow: auto;
    position: absolute;
    page-break-after: always;
}


/* avoid splitting element across pages */
#no-break {
    page-break-inside: avoid;
}

#break {
    page-break-before: always;
    page-break-after: always;
}

/* style sheet for "A4" printing */
@media print and (width: 21cm) and (height: 29.7cm) {
    .page-break {
        page-break-after: always;
        page-break-inside: avoid;
        clear: both;
    }

    #printAll {
        page-break-after: auto;
    }

    .page-break-before {
        page-break-before: always;
        page-break-inside: avoid;
        clear: both;
    }

    @page {
        margin: 3cm;
    }


    .noprint {
        display: none;
    }

    @page {
        size: 297mm 210mm;
        /* landscape */
        /* you can also specify margins here: */
        margin: 25mm;
        margin-right: 45mm;
        /* for compatibility with both A4 and Letter */
    }

    #table {
        width: 100% !important;
        text-align: center;
        margin-bottom: 5.5rem;
    }
}
...