网站内容在PDF A4页面中没有响应

Question

我使用木偶机导出我的网站与highchart.js图形到A4 PDF。我在PDF格式的内容上有问题。

假设我的网站是这样的：

​

当我将其导出为PDF A4格式大小时，我的网站外观如何：

​

正如你可以在pdf上看到的，我的图表完全没有反应。我想用1920x1080捕获我的内容，并把它放到A4上。

如果我在PDF中使用这个比例作为一个属性，那么PDF导出看起来很好。

return await page.pdf({
    path,
    printBackground: true,
    landscape,
    format: 'A4',
    scale: await calculcateScale(landscape, rect.width, rect.height) //rect is x,y, width, height of my div
});

我不想使用刻度，因为我需要我的图形在多个页面上。

对如何解决这个问题有什么想法吗？

其他木偶师代码：

1. 我将视口设置为：defaultViewport: {width: 1920, height: 1080, deviceScaleFactor: 2}
2. 浏览我的页面..。
3. 用我的图形await page.waitForSelector("#graphs");等待特定的div
4. 页pdf

return await page.pdf({
    path,
    printBackground: true,
    landscape,
    format: 'A4',
});

Answer 1

pdf函数的行为类似于打印操作。这意味着@媒体打印适用。

因此，PDF的“响应”样式应该在：

@media print {

}