html - 如何使用包含页眉和页脚的自动页面格式将 HTML 页面导出为 PDF 格式

标签 html css html-table export-to-pdf

注意:- 请不要提供任何使用 JavaScript 的解决方案,这是我的限制,我只能使用 CSS 或 HTML,不能使用其他任何东西。

我有一个问题,希望得到您的答复和建议,基本上我在 HTML 中有一个表格数据列表,现在我想实现一个功能,通过该功能我想将此 HTML 页面导出为 PDF。此 HTML 页面包含基于动态内容的表格数据列表,这意味着数据可能在 50 行或 100 行中。
现在我想在那里提供一个功能,用户可以将数据导出为 PDF 格式,但问题是我想在将这些数据导出为 PDF 时使用一种格式,这意味着每个页面都应该包含页眉图像和页脚图像格式;
好吧,我可以通过以下代码完成此格式:--

.page_format{
 width:8in;
 height:11in;
 padding-top:100px;
 padding-bottom:100px;
 background-image: url (''); /* It is a page image which contains a header and footer */
 position:relative;
 }

 <!-- Code which we will use at HTML body side -->
 <div class="page_format">
 <!-- code start here for dynamic tables -->
</div>

实际的问题是,我不明白如何在每一页上实现动态格式,这意味着随着表格行的增加,页面会自动增加,每一行不应该被裁剪成页面,意味着一行应该不能分成多个页面。所以请给我一个解决方案,我在这里再次结束我的问题:-

--> 我想要一个功能,其中应该将 HTML 页面导出为格式化的 PDF 格式,其中包括每个页面上的页眉和页脚。

--> 导出的 PDF 应该根据表格行的动态内容自动格式化。

--> 表格数据不应被裁剪或分页。

表格数据是动态的,因此随着内容的增加和新页面的开始,新页面应该包含与第一页相同的格式(即页眉和页脚)。现在页眉和页脚格式适用于输出 pdf 的第一页,它不会出现在 pdf 导出的每一页中。

再次记住,我们只能使用CSS或HTML,这里不能使用其他方法。

最佳答案

我建议在主样式表中使用打印媒体类型:

@media print
{
/* style sheet for print goes here */
}

或者你可以在它自己的样式表中分离打印样式:

<link href="style.css" media="print" rel="stylesheet" type="text/css" />

这将适用于文件 -> 在浏览器中打印 - 将布局从打印转换为 PDF(或 Microsoft XPS Document Writer)

关于html - 如何使用包含页眉和页脚的自动页面格式将 HTML 页面导出为 PDF 格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18811838/

相关文章:

javascript - target 属性的 CSS 版本

javascript - 具有固定定位导航的 Firefox 8 中的奇怪行为

javascript - 如何在表格单元格内放置 p-dropdown?

HTML 电子邮件 : Making triangle to the bottom of td

html - 表格边框左侧和底部

javascript - JQuery .offset() 没有设置 'top' 值

php - 根据先前的字段答案自动填充下一个选择框

validation - 帮助解决 HTML 验证错误 : Table column has no cells beginning in it

jquery - 向上或向下滚动时 Bootstrap 导航栏更改

php/MySQL - 如何将产品表连接在一起