我正在使用phantom-html2pdf在Node应用中动态生成pdfs。转换有效,但布局完全关闭。例如,html文档是一个由有时两列并排的部分组成的表单。
我正在使用MUI css进行一些样式和布局,这些样式和布局在PDF转换之前已经内嵌到HTML中。在PDF转换之后,所有内容都在一列中,尽管事实上我有class="mui-col-md-6"
的div,它在浏览器中渲染得很好。
我尝试添加自定义CSS并添加pageSize
值,但无论我做什么,都不会产生我想要的结果。
这是我目前的选择。注意我已经通过一些css,我尝试“重塑”文档,使其更像原始HTML,但它似乎对最终布局的影响有限。此外,我设置了一个负边框,有点但不完全删除PDF边框。
var pdfOptions = {
html: html, // html with in-lined MUI styles - columns not rendering
css: pdfCss, // This CSS seems to have has limited control over final layout
paperSize: {format: 'A4', orientation: 'portrait', border: '-2cm'}
}
如果有人对如何更好地控制布局有任何建议,使其看起来更像我的HTML,我将非常感激。干杯!
更新
看来phantom-html2pdf忽略了任何内联css,并且只将css作为选项的一部分传入。再一次,我对任何指针都持开放态度,如果我错了或错过了一些步骤来更好地控制最终布局,请纠正我。