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时，你可以通过在你的主html中添加一个css文件来自定义pdf的呈现方式，并将媒体查询设置为打印media="print"。

只有当您打印某些内容或通过api方法printToPdf()将其导出为pdf时，才会应用此css样式表。

如果您正在使用光子或自举等ui套件，请尝试禁用它并查看它是否有帮助。

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

希望这有帮助