如何生成HTML 5页面的PNG

Question

在我的系统中，我有一个基于Treant JS生成的组织结构图，我希望能够将其导出为PDF或PNG，但是在插件页面中浏览时我没有发现任何相关信息，有人知道吗怎么做？

下面图像的Organogram可以变得非常广泛，我们拥有的最大图像是60000x20000，某些插件可以支持此图像大小吗？

组织结构图图像：

Answer 1

您可以考虑使用html2pdf.js。加载库后，可以使用html2pdf(document.getElementById('element-to-print'));生成所选元素的pdf。

Answer 2

我能够使用名为html2canvas的插件来做，它与html2pdf非常相似，只是您可以制作更大的图像，并按照example

//HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>

<div id="print">
    <h1>Exemple text</h1>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab </p>
</div>
<div id="printDiv"></div>
<button id="takePrint">Take a print</button>


//JS Code
$("#takePrint").on('click',function(){
    html2canvas(document.querySelector("#print")).then(canvas => {
        document.body.appendChild(canvas);
    });
})