Question

我的页面布局每行都有两个图形。下图给出了布局。每个图形中都有一个单独的下载按钮。这些图形将进入下面的滚动视图。当我单击下载时，应下载各个单独的图形。但是顶部的图形在pdf视图中显示得非常完美。通过滚动下方到达的图形移出位置。如何解决。图形布局：https://i.stack.imgur.com/32sip.png

我用于将div转换为canvas然后转换为pdf的代码：

downloadGraph = (graphName,name,index) => {

        var input = document.getElementById(name);
        window.scrollTo(0,0);
        setTimeout(()=> {
            html2canvas(input,{width: 200, height:200}).then(canvas => {
                const imgData = canvas.toDataURL("image/JPEG");
                var doc = new jsPDF("p", "mm","a4");
                    doc.addImage(imgData, "JPEG", 0, 0, 300,200 );
                    doc.save(`${graphName}.pdf`);


            })  
        }, 3000)

下载时必须滚动到屏幕底部才能到达的图形如下： https://i.stack.imgur.com/7xArZ.png

注意：我必须将整个div转换为画布，因为在下载的pdf和图形中几乎不需要HTML定制的div。如果我只想将图形画布转换为pdf，则无需使用html2canvas。我经历了很多有关html2canvas的问题的答案，这些问题没有在视口之外获取元素，但是没有一个线程解决了我的问题，包括这个https://github.com/niklasvh/html2canvas/issues/117。

使用html2canvas和jspdf无法完全将div转换为pdf

0 个答案: