html2Canvas/jsPDF仅将视口中的数据转换为pdf吗? [英] html2Canvas/jsPDF only converts the data in the viewport to pdf?

问题描述

我正在尝试使用 html2Canvas 将html内容转换为pdf.我有一个很长的同意书，我们必须像下面这样滚动.

I am trying to use the html2Canvas to convert html content to pdf. I have one consent form which is long and we have to scroll like below.

我已经编写了以下代码，将同意书转换为pdf，然后在单独的屏幕中显示.

I have written below code to convert the consent form into pdf and later show it in a separate screen.

let htmlGrid = document.getElementById('customContent');
const options = {background: "white", height: htmlGrid.clientHeight, width: htmlGrid.clientWidth};
html2canvas(htmlGrid, options).then((canvas) => {
let doc = new jsPDF("p", "mm", "a4");
let imgData = canvas.toDataURL("image/PNG");
//Add image Canvas to PDF
doc.addImage(imgData, 'PNG', 0, 0);
let pdfData = doc.output('datauristring');

但是，问题在于它只转换了视图端口中表单的部分.

But, the problem is that it is converting only the portions of the form which is in view port.

被切掉的部分不在视口中.

The portion is getting chopped off which is not in the viewport.

我尝试在转换为pdf之前添加以下行，但仅适用于浏览器.

I tried to add below line before converting to pdf but it worked only for browser.

htmlGrid.style.height = "auto";

它确实适用于浏览器，但不适用于与浏览器相比屏幕很小的android.

It did work for browser but it did not work for android which is a small screen compared to browser.

转换为pdf时是否缺少任何配置?

Is there anything missing the configuration while converting to pdf?

谢谢.

推荐答案

  loadPDF() {
let doc = new jsPDF('p', 'pt', 'a4');
h2c(document.getElementById('mybarchart')).then(function (canvas) {
  let width = doc.internal.pageSize.getWidth();
  let height = doc.internal.pageSize.getHeight();
  let dataURL = canvas.toDataURL('image/jpeg', 1.0);
  doc.addImage(dataURL, 'jpg', 0, 0, width, height, 'none');
  doc.save(`test.pdf`);
  document.getElementById("pdfLoader").classList.remove('loader');
  setTimeout(() => {
    window.close();
    }, 2000);
  });
}

这篇关于html2Canvas/jsPDF仅将视口中的数据转换为pdf吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！