适用于 PDF 的 PhantomJS 屏幕截图 - 画布缩放

phantomjs screen capture for pdf - canvas scaling

本文关键字：布缩放 缩放 PDF PhantomJS 屏幕截图 适用于      更新时间：2023-09-26

我使用Phantomjs从我网站上的内容中制作PDF。而且画布看起来很棒，例外。

在我的印刷品中.css/媒体 CSS 我有 100% 的画布

canvas {
height : 100%!important;
width  : 100%!important;
}

画布/画布的内容（由 Chart.js 生成的图表）看起来被拉伸/失焦。

通过

阅读各种帖子，我注意到通过 css 设置大小是不行的，我必须将其放入标签中或通过 javascript 直接在 canvas 元素上设置它。

但是，这不是一个真正的选择，因为它已经在网站上完美地缩放/调整了大小。如果我没有 100% 的高度宽度，画布就不会出现锯齿状，但它对于我的 pdf 格式来说太大了。

解决此问题的正确

方法是什么，为我的屏幕截图获得适合A4/标准pdf格式的清晰画布？

提前谢谢。

在处理画布时，css的"高度"和"宽度"元素决定了文字DOM元素的大小，<canvas>而不是其中显示的大小。为了设置它，请尝试这样的事情：

// grab canvas attribute
var canvas = document.getElementById('canvas');
// size the display appropriately
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// don't forget to account for the window size changing later on
window.addEventListener('resize', function(){
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}, false);
相关文章：