HTML2Canvas 不呈現完整的 div，只呈現屏幕上可見的內容？

Question

我正在嘗試使用HTML2Canvas呈現 div 的內容。 這是代碼：

var htmlSource = $('#potenzial-page')[0];

$('#btn').on("click", function() {          

    html2canvas(htmlSource).then(function(canvas) {
        var img = canvas.toDataURL();
        window.open(img);
    });

});

我正在使用 v5 beta 3。

當這段代碼運行時，它只渲染屏幕上可見的內容。 #potenzial-page div 基本上是整個頁面，減去 header 和頁腳。 這個div中的所有內容都是滾動可見的（有一些隱藏元素，但我不希望隱藏元素在圖像中可見。）

我找不到問題所在或為什么它不會保存整個 div。 我還應該注意到，圖像看起來和 div 一樣高，但只有部分可見。

為了舉例說明我的意思，這里有一個比較：

左邊是 HTML2Canvas 應該如何呈現 div。 右邊顯示了它在運行上面的代碼時的呈現方式。 右圖是在我的瀏覽器屏幕上可見的。

我確實嘗試添加height選項，但沒有任何區別。

更新

如果我滾動到頁面的最頂部，然后運行腳本，它將按應有的方式呈現整個 div。

如何渲染 div 而不必滾動到頂部？

Answer 1

我希望能幫到你

html2canvas(htmlSource, {scrollY: -window.scrollY}).then(function(canvas) {
            var img = canvas.toDataURL();
            window.open(img);
        });

Answer 2

對我有用的解決方案是將以下內容添加到我的 css 中：

.html2canvas-container { width: 3000px !important; height: 3000px !important; }

它可以防止 html2canvas 將渲染限制在可視區域（這似乎是默認設置）。

見這里： https : //github.com/niklasvh/html2canvas/issues/117

Answer 3

我在我的案例中使用了window.scrollTo()並且它對我有用。

下面是一個示例代碼

$('#btn').on("click", function() { 
    window.scrollTo(0,0);     
    html2canvas(htmlSource).then(function(canvas) {
        var img = canvas.toDataURL();
        window.open(img);
    });
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
});

Answer 4

您可以在 html2canvas 中添加滾動位置作為變量，從而無需滾動頁面。

html2canvas(document.querySelector("#your-element"), { scrollX: 0, scrollY: 0 }).then(function(canvas) {

Answer 5

我只是做了這樣的事情，它對我有用：

html2canvas(document.querySelector("#capture2image"), {
            allowTaint: true,
            useCORS: true,
            logging: false,
            height: window.outerHeight + window.innerHeight,
            windowHeight: window.outerHeight + window.innerHeight, 

Answer 6

如果您將高度設置為要轉換為畫布的 div - 您需要在實際拍攝快照之前將其刪除。 否則它會因為那個高度而將其切斷。

 $(".yourElemThatHasSomeHeightSet").css("height", "");

然后您會注意到向下滾動 - 仍會剪切您的文檔。 只需做一個：

$("html, body").scrollTop(0);

在拍攝快照之前。

Answer 7

這就是我在 Reactjs 中實現的方式。

主要問題是比例和比例如果你做一個快速的window.devicePixelRatio ，它的默認值是 2 這導致了半圖像問題。

const printDocument = () => {
  const input = document.getElementById('divToPrint');
  const divHeight = input.clientHeight
  const divWidth = input.clientWidth
  const ratio = divHeight / divWidth;

  html2canvas(input, { scale: '1' }).then((canvas) => {
    const imgData = canvas.toDataURL('image/jpeg');
    const pdfDOC = new jsPDF("l", "mm", "a0"); //  use a4 for smaller page

    const width = pdfDOC.internal.pageSize.getWidth();
    let height = pdfDOC.internal.pageSize.getHeight();
    height = ratio * width;

    pdfDOC.addImage(imgData, 'JPEG', 0, 0, width - 20, height - 10);
    pdfDOC.save('summary.pdf');   //Download the rendered PDF.
  });
}

Answer 8

您是否在SO中看到了這個解決方案：“ Html2canvas將溢出的內容轉換為圖像 ”提出了一種解決方案，將溢出設置為可見，然后渲染然后溢出隱藏。

Answer 9

  window.scrollTo(0,0);  

添加這對我有用。

Answer 10

<div #potentialContainer id="potentialContainer" class="potentialContainer" style="height: auto;">
some large content here--------------------
</div>

import html2canvas from 'html2canvas';

downloadImage() {

html2canvas(document.querySelector('#potentialContainer'), {
  logging: true,
  allowTaint: false,
  useCORS: true,
  width: document.querySelector('#potentialContainer').scrollWidth,
  height: section.scrollHeight,
  scrollX: -window.scrollX,
  scrollY: -window.scrollY,
}).then((canvas) => {
  var imgWidth = 210;
  var pageHeight = 290;
  var imgHeight = canvas.height * imgWidth / canvas.width;
  var heightLeft = imgHeight;


  var doc = new jsPDF('p', 'mm');
  var position = 0;
  var pageData = canvas.toDataURL('image/jpeg', 1.0);
  var imgData = encodeURIComponent(pageData);
  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  doc.setLineWidth(5);
  doc.setDrawColor(255, 255, 255);
  doc.rect(0, 0, 210, 295);
  heightLeft -= pageHeight;

  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    doc.setLineWidth(5);
    doc.setDrawColor(255, 255, 255);
    doc.rect(0, 0, 210, 295);
    heightLeft -= pageHeight;
  }
  doc.save('file.pdf');

 });
 }

注意：-添加樣式 height:auto 很重要

上面的代碼會將大圖像轉換為多頁 pdf

Answer 11

另一種反應方法......

在您的提交按鈕上單擊動態設置文檔高度，然后使用 document.body 作為第一個參數調用 html2canvas

<button onClick={() => {
var body = document.body,
html = document.documentElement;

var height = Math.max(body.scrollHeight, body.offsetHeight,
             html.clientHeight, html.scrollHeight, html.offsetHeight);
             document.body.style.height = `${height}px`

html2canvas(document.body).then(function (canvas) {
                var imgData = canvas.toDataURL('image/pdf')
                var doc = new jsPDF('p', 'mm', [canvas.width, canvas.height])
                doc.addImage(imgData, 'PDF', 10, 10, canvas.width, canvas.height)
                doc.save('name-of-pdf.pdf')
              });
}}>Submit</button>

這將設置 html2canvas 似乎從中呈現的 public/index.html 的 html 高度（即不是“根”div）。

Answer 12

這對我有用：

  const input = document.getElementById('fragmentForPDF');
  
  // This row fixed problem
  input.parentNode.style.overflow = 'visible';

  html2canvas(input)...

Answer 13

window.scrollTo(0, 0); // this will help to print if div hidden or on mobile screen

html2canvas(document.getElementById("my_div_img")).then(function (canvas) 
                 {
                    //for give white BG
                    var context = canvas.getContext('2d');
                    context.save();
                    context.globalCompositeOperation = 'destination-over';
                    context.fillStyle = "rgb(255, 255, 255)";
                    context.fillRect(0, 0, canvas.width, canvas.height);
                    context.restore();
                    var imgData = canvas.toDataURL('image/jpeg', 1);
                    //console.log(imgData);
}

Answer 14

對於不想解決滾動問題的人來說。： dom-to-image

1. 您可以在拍攝圖像時滾動
2. 並且速度更快（根據此博客為 70 倍）。

博客： https : //betterprogramming.pub/heres-why-im-replacing-html2canvas-with-html-to-image-in-our-react-app-d8da0b85eadf

在博客中它提到了html-to-image 。 它是dom-2-image 的分支。 我使用了 dom-to-image（祖先，原始的）。

var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

Answer 15

這對我有用：

html2canvas(el, {
    width: el.scrollWidth,
    height: el.scrollHeight,
})

見這里的來源。

Answer 16

以下代碼對我有用：

 window.scrollTo(0, 0); html2canvas(htmlRef, { scrollX: -window.scrollX, scrollY: -window.scrollY, windowWidth: document.documentElement.offsetWidth, windowHeight: htmlRef.scrollHeight, }).then((canvas) => { const img = new Image(); const imgData = canvas .toDataURL("image/png") .replace("image/png", "image/octet-stream"); const pdf = new jsPDF("p", "mm", "a4"); const imgProps = pdf.getImageProperties(imgData); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; pdf.addImage(imgData, "JPEG", 0, 0, pdfWidth, pdfHeight); pdf.save(); });

Answer 17

document.getElementById("dld_report").addEventListener("click", function() {
    // Make sure the area you want to take screenshot is visible in CSS
    document.querySelector('#boundary').style.overflow = 'visible'; 
     
    html2canvas(document.querySelector('#boundary'), {
      // Set the height of screenshot image same as page hieght
      height: window.outerHeight + window.innerHeight,
    }).then(function(canvas) {
        saveAs(canvas.toDataURL(), 'report.png');
    });
});
// dld_report -> button to trigger the screenshot

設置樣式 overflow = "visible" 和高度是實現這一目標的關鍵。

Answer 18

關於 html2canvas 的一般建議嘗試將 html 的高度設置為 100%。