Question

我使用Html2Canvas然后使用jsPdf导出图像。

这是功能：

function exportPdf() {
    content = $("#print");

    var useWidth = content.prop('scrollWidth');
    var useHeight = content.prop('scrollHeight');

    debugger;

    html2canvas((content), { width: useWidth, height: useHeight}).then(function (canvas) {
        debugger;
        var img = canvas.toDataURL("image/png");
        var doc = new jsPDF({
            unit:'px', 
            format:'a4'
        });

        debugger;
        doc.addImage(img, 'JPEG', 0, 0);
        doc.save('test.pdf');
    });
}

我认为正在考虑视口，就像在做一个版画屏幕一样，当然在滚动画面之下的任何内容都没有考虑到它。

有什么想法吗？

Answer 1

在滚动窗口时发生。要变通解决此问题，您可以通过滚动任何窗口的负数。

html2canvas(htmlSource, {scrollY: -window.scrollY}).then(function(canvas) {

// Do Something here

});

Answer 2

呼叫

    window.scrollTo(0,0)

在调用html2canvas之前，它似乎是一个错误，但是窗口需要位于顶部，以便html2canvas捕获传递给它的整个DOM

Answer 3

设置 windowHeight 和 height 对我有用：

试试这个：

html2canvas(htmlSource,
 {
     height: window.outerHeight + window.innerHeight,
     windowHeight: window.outerHeight + window.innerHeight
     scrollY: -window.scrollY
 }).then(function(canvas) {
    // Do Something here    
});

Answer 4

上面已经提到了原因之一，那就是窗口可能会滚动，因此请务必在使用html2canvas捕获图像之前添加此行

dfs = read_folder(csv_folder)

dfs = (pd.concat((d for d in dfs))
         .set_index(['Num', 'Department', 'Product', 'Salesman', 'Location', 'rating_src'])
         .squeeze()
         .unstack(level='rating_src')
         .reset_index()
)
dfs.columns.name = ''

另一个问题可能是图像的分辨率大于pdf页面，因为您需要获取PDF文档的宽度和高度。

    window.scrollTo(0,0)

将其用于图像以适合PDF文档。

var width = doc.internal.pageSize.getWidth();
var height = doc.internal.pageSize.getHeight();

如果您希望动态尺寸的图像不失真，并保持图像的宽/高比

doc.addImage(imgData, 'JPEG', 0, 0, width, height);

之后

 var width = doc.internal.pageSize.getWidth();
 var height = doc.internal.pageSize.getHeight();

 let widthRatio = width / canvas.width;
 let heightRatio = height / canvas.height;

 let ratio = widthRatio > heightRatio ? heightRatio : widthRatio

Html2Canvas图像被削减

4 个答案: