Я пытаюсь использовать html2canvas и jspdf для генерации PDF в iframe.Ниже приведен мой код
generatePDF() {
var data = document.getElementById('a');
html2canvas(data).then(canvas => {
// Few necessary setting options
var imgWidth = 200;
var imgHeight = canvas.height * imgWidth / canvas.width;
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
pdf.addImage(contentDataURL, 'JPEG', 10, 10, imgWidth, imgHeight);
var string = pdf.output("datauristring"); // Generated PDF
var iframe = "<iframe width='100%' height='100%' src='" + string + "'></iframe>";
$('#test').html(iframe);
}); }
Ниже приведен мой HTML-элемент к холсту, который я собираюсь сгенерировать
<div id="a">
<img src="../../../assets/img/mahb.jpg" height="100px">
<h3>Summary</h3>
<p>This report is the summary report.</p>
<p>Report</p>
<p>Content</p>
</div>
Однако, если я добавлю еще элемент DOM, он не сможетгенерироваться в iframe больше.скажем, ниже приведен код, который я добавил еще один элемент DOM
<div id="a">
<img src="../../../assets/img/mahb.jpg" height="100px">
<h3>Summary</h3>
<p>This report is the summary report.</p>
<p>Report</p>
<p>Content</p>
<p>Content2</p>
</div>
Я понятия не имел, в чем проблема, поскольку html2canvas принимает весь тег div с идентификатором «a» в качестве холста.Кто-нибудь знает, в чем проблема и решение?