printToPDF不打印所有webContent视图

Question

我正在使用下面的代码将webContents视图保存为PDF文件。

saveReport() { 
     const remote = require('electron').remote; 
     const webContents = remote.getCurrentWebContents(); 

     webContents.printToPDF({ 
      pageSize: 'A3', 
      landscape: false 
     }, (err, data) => { 
      remote.require('fs') 
       .writeFile(TEMP_URL, data); 
     }); 
    }, 

该视图是一个报告，并有一个很长的内容（见下文）。

而不是显示一个完整的观点，我看到一个单页面内的局部视图滚动条。下面是截图为生成PDF，

预期的行为

就像一个真正的浏览器，生成的PDF应该包含所有的观点，如果一个页面没有提供足够的空间，应该生成多个页面。

我在想我的css可能有问题。

Answer 1

我对我当前的项目有类似的要求，我注意到当你使用这个api时，你可以定制如何通过添加一个CSS文件到你的主要HTML与媒体查询设置为打印media="print"。

本css样式表仅适用于打印某些东西或通过api方法printToPdf()将其导出为pdf的情况。

如果您正在使用某些ui工具包（如photon或bootstrap），请尝试禁用它并查看是否有帮助。

最后提示：尝试使用CSS属性page-break-before: always;

希望这有助于