vue-print-nb去掉页眉页脚

### vue-print-nb 自定义页眉的支持情况与实现方法 vue-print-nb插件默认情况下并不直接提供自定义页眉的功能[^1]。然而，可以通过一些间接的方法来达到这一目的。 #### 使用CSS隐藏默认页眉页脚并创建自定义样式 为了移除默认的浏览器打印页眉和页脚，并添加自己的定制化内容，可以利用特定于打印样式的CSS规则： ```css @media print { @page { margin: 0; size: auto; /* 设置纸张大小 */ } body, html{ padding-top: 2cm !important; /* 调整顶部间距以适应自定义页眉 */ } .custom-header { position: fixed; top: -60px; /* 根据实际需求调整位置 */ width: 100%; text-align: center; font-size: larger; } } ``` 上述代码片段展示了如何通过`@media print`媒体查询来专门针对打印视图应用样式表。这里的关键在于使用`.custom-header`类名标记要作为页眉显示的内容，并将其定位到页面顶端之外的位置以便正确呈现[^2]。 #### HTML结构中的自定义页眉部分 接着，在HTML模板里加入用于表示自定义页眉的部分： ```html <div class="custom-header"> <h2>这里是自定义页眉</h2> <!-- 可能还有其他信息 --> </div> <!-- 需要被打印的实际内容 --> <el-table :data="tableData" style="width: 100%" ref="printContent"></el-table> <!-- 打印按钮 --> <el-button v-print="'#printContent'" type="primary">点击打印</el-button> ``` 此段落说明了怎样在文档流中放置一个带有`.custom-header`类的选择器元素，它将在打印预览时充当新的页眉角色[^3]。 需要注意的是，虽然这种方法能够有效地模拟出自定义页眉的效果，但它并不是严格意义上的内置功能；而是借助外部手段绕过了原有局限性。对于更复杂的需求，可能还需要探索更多高级技术或考虑更换更适合项目要求的库。

可以使用 vue-print-nb 插件来实现打印页眉页脚。具体步骤如下： 1. 安装 vue-print-nb 插件： ``` npm install vue-print-nb --save ``` 2. 在需要打印的组件中引入插件： ```javascript import Print from 'vue-print-nb' export default { components: { Print }, // ... } ``` 3. 在需要打印的组件中添加打印按钮，并绑定打印事件： ```html <template> <div> <!-- 打印按钮 --> <button @click="print">打印</button> <!-- 需要打印的内容 --> <div ref="printContent"> <!-- ... --> </div> </div> </template> ``` ```javascript export default { // ... methods: { // 打印事件 print() { this.$print(this.$refs.printContent) } } } ``` 4. 在需要打印的组件中添加页眉页脚模板： ```html <template> <div> <!-- 打印按钮 --> <button @click="print">打印</button> <!-- 需要打印的内容 --> <div ref="printContent"> <!-- ... --> </div> <!-- 页眉页脚模板 --> <Print :title="title" :printStyle="printStyle"> <template #header> <div style="text-align: center;"> <h1>页眉</h1> </div> </template> <template #footer> <div style="text-align: center;"> <h1>页脚</h1> </div> </template> </Print> </div> </template> ``` ```javascript export default { // ... data() { return { // 页眉 title: '页眉', // 打印样式 printStyle: ` @page { size: A4; margin: 0; } body { margin: 1.6cm; } ` } }, methods: { // 打印事件 print() { this.$print(this.$refs.printContent) } } } ```