Jsreport/ChromePDF 页眉模板和页脚模板位置因多页内容而溢出

Question

我正在使用 JsReport（带有 chrome-pdf）从 html 生成 pdf 文件。我的 html 内容有一个表格，由于表格内的数据，该表格较大；因此，它分布在 3 个 pdf 页面中，每个页面都包含页眉和页脚模板。然而，不知何故，主要内容溢出了页眉页脚模板。这是代码：

{
"engine":"handlebars",
"recipe":"chrome-pdf",
"content":"<!DOCTYPE html><html><head><meta name='viewport' content='width=device-width, initial-scale=1'><link rel=\"stylesheet\" href=\"https://www.w3schools.com/w3css/4/w3.css\"><style>html,body{height:600;width:600;margin-top:20px;margin-bottom:80px;margin-right:20px;margin-bottom:20px}</style></head><body><div class='w3-container'> <h2>Displaying Blockquotes</h2> <p>The w3-panel class can be used to display blockquotes:</p><blockquote class='w3-panel w3-leftbar w3-light-grey'> <p class='w3-large'><i>'Make it as simple as possible, but not simpler.'</i></p> <p>{{name}}</p> </blockquote> </div><table id='datatable'><thead><tr><th>ID</th><th>Name</th><th>Age</th><th>City</th></tr></thead><tbody><tr><td>1</td><td>User 1</td><td>50</td><td>City 1</td></tr> <!-- 100 more rows --></tbody></table></body></html>",
"helpers":"",
"chrome":{
   "format":"A4",
   "landscape":false,
   "displayHeaderFooter":true,
   "headerTemplate":"<style>body{font-size:16px;margin: 0;}</style><body>I am header</body>",
   "footerTemplate":"<style>body{font-size:16px;}</style><body>Page <span class=pageNumber></span> of <span class=totalPages></span></body>",
   "printBackground":true,
   "preferCssPageSize":true
},
"pdfOperations":[
   {
      "type":"prepend",
      "template":{
         "recipe":"chrome-pdf",
         "engine":"handlebars",
         "content":"<!DOCTYPE html><html><head><meta name='viewport' content='width=device-width, initial-scale=1'><link rel=\"stylesheet\" href=\"https://www.w3schools.com/w3css/4/w3.css\"><style>body{height:600;width:600;margin-top:80px;margin-bottom:80px;margin-right:20px;margin-bottom:20px}</style></head><body>I am first</body></html>",
         "helpers":"",
         "chrome":{
            "format":"A4",
            "landscape":false,
            "displayHeaderFooter":true,
            "headerTemplate":"<style>body{background-color: yellow;font-size:16px}</style><body>i m frontcover header</body>",
            "footerTemplate":"<style>body{background-color: green;font-size:16px}</style><body>i m frontcover footer</body>",
            "printBackground":true,
            "preferCssPageSize":true
         }
      }
   },
   {
      "type":"append",
      "template":{
         "recipe":"chrome-pdf",
         "engine":"handlebars",
         "content":"<!DOCTYPE html><html><head><meta name='viewport' content='width=device-width, initial-scale=1'><link rel=\"stylesheet\" href=\"https://www.w3schools.com/w3css/4/w3.css\"><style>body{height:600;width:600;margin-top:80px;margin-bottom:80px;margin-right:20px;margin-bottom:20px}</style></head><body>I am last</body></html>",
         "helpers":"",
         "chrome":{
            "format":"A4",
            "landscape":false,
            "displayHeaderFooter":true,
            "headerTemplate":"<style>body{background-color: yellow;font-size:16px}</style><body>i m backcover header</body>",
            "footerTemplate":"<style>body{background-color: green;font-size:16px}</style><body>i m backcover footer</body>",
            "printBackground":true,
            "preferCssPageSize":true
         }
      }
   }
]

}

这是页眉页脚的问题：

如何解决这个问题

Answer 1

请参阅此链接https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a。这有助于避免溢出

Jsreport/ChromePDF 页眉模板和页脚模板位置因多页内容而溢出

问题描述投票：0回答：1

1个回答

最新问题

Jsreport/ChromePDF 页眉模板和页脚模板位置因多页内容而溢出

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1