vue 打印、自定义打印、页面打印、隐藏页眉页脚

'# vue 打印、自定义打印、页面打印、隐藏页眉页脚

一、背景与问题

在Web开发中，打印功能是用户交互的重要环节。然而，浏览器默认的打印行为往往无法满足复杂业务需求。例如：

需要隐藏页眉页脚（浏览器默认打印时会显示页眉页脚）
需要自定义打印内容（如只打印特定区域）
需要控制打印样式（如调整字体大小、布局）
需要处理打印时的元素动态变化

传统做法是使用window.print()方法，但这种方法存在以下局限性：

浏览器默认页眉页脚无法隐藏
页面布局可能在打印时产生意外效果
无法动态控制打印内容范围
无法实现复杂的打印样式控制

为解决这些问题，需要深入理解浏览器的打印机制，并结合Vue框架特性进行定制化实现。

二、基本原理

浏览器打印机制包含两个核心部分：

打印样式控制：通过CSS的@media print规则定义打印时的样式
打印内容控制：通过JavaScript动态修改DOM结构或添加打印专用元素

关键原理包括：

使用CSS媒体查询实现打印样式控制
使用<iframe>创建打印专用容器
使用window.print()触发打印对话框
使用print CSS属性控制打印行为

三、环境准备

确保开发环境包含以下要素：

Vue 3（推荐使用Composition API）
现代浏览器（Chrome/Edge/Firefox）
基础CSS知识

项目结构建议：

src/
├── components/
│   └── PrintComponent.vue
├── utils/
│   └── print.js
└── App.vue

四、核心实现

1. 基础打印功能

<template>
  <div class="print-area" ref="printRef">
    <h1>打印内容</h1>
    <p>这是需要打印的文本内容</p>
    <button @click="handlePrint">打印</button>
  </div>
</template>

<script>
export default {
  methods: {
    handlePrint() {
      window.print();
    }
  }
}
</script>

<style>
@media print {
  body {
    margin: 0;
    padding: 0;
  }
  .print-area {
    width: 100%;
    height: 100%;
    padding: 20px;
    border: 1px solid #ccc;
  }
}
</style>

关键代码解释：

使用@media print定义打印样式
通过window.print()触发打印
在打印样式中隐藏不必要的元素

2. 自定义打印内容

<template>
  <div>
    <div class="content">
      <h2>自定义打印内容</h2>
      <p>这是需要打印的文本内容</p>
      <button @click="handlePrint">打印</button>
    </div>
    <div class="print-area" ref="printRef">
      <div class="print-content">
        <h2>打印内容</h2>
        <p>这是需要打印的文本内容</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handlePrint() {
      const printContent = this.$refs.printRef.innerHTML;
      const printWindow = window.open('', '_blank');
      printWindow.document.write(`
        <html>
        <head>
          <title>打印</title>
          <style>
            @media print {
              body {
                margin: 0;
                padding: 0;
              }
              .print-content {
                width: 100%;
                height: 100%;
                padding: 20px;
                border: 1px solid #ccc;
              }
            }
          </style>
        </head>
        <body>
          ${printContent}
        </body>
        </html>
      `);
      printWindow.document.close();
      printWindow.print();
    }
  }
}
</script>

关键代码解释：

创建临时打印窗口
动态注入打印专用样式
仅打印指定内容区域
隐藏页眉页脚通过CSS控制

3. 隐藏页眉页脚

<template>
  <div>
    <div class="content">
      <h2>隐藏页眉页脚</h2>
      <p>这是需要打印的文本内容</p>
      <button @click="handlePrint">打印</button>
    </div>
    <div class="print-area" ref="printRef">
      <div class="print-content">
        <h2>打印内容</h2>
        <p>这是需要打印的文本内容</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handlePrint() {
      const printContent = this.$refs.printRef.innerHTML;
      const printWindow = window.open('', '_blank');
      printWindow.document.write(`
        <html>
        <head>
          <title>打印</title>
          <style>
            @media print {
              body {
                margin: 0;
                padding: 0;
              }
              .print-content {
                width: 100%;
                height: 100%;
                padding: 20px;
                border: 1px solid #ccc;
              }
              /* 隐藏页眉页脚 */
              @page {
                margin: 0;
                padding: 0;
              }
              .page-header, .page-footer {
                display: none;
              }
            }
          </style>
        </head>
        <body>
          ${printContent}
        </body>
        </html>
      `);
      printWindow.document.close();
      printWindow.print();
    }
  }
}
</script>

关键代码解释：

使用@page规则控制页面布局
通过CSS隐藏页眉页脚
确保打印内容区域不被浏览器默认样式影响

五、完整案例

订单打印案例

需求：打印订单详情，隐藏页眉页脚，调整字体大小

组件结构：

<template>
  <div>
    <div class="content">
      <h2>订单打印</h2>
      <OrderPrint :order="order" @print="handlePrint"/>
      <button @click="handlePrint">打印</button>
    </div>
  </div>
</template>

<script>
import OrderPrint from './OrderPrint.vue';

export default {
  components: { OrderPrint },
  data() {
    return {
      order: {
        id: '123456',
        customer: '张三',
        items: [
          { name: '商品A', quantity: 2, price: 199.00 },
          { name: '商品B', quantity: 1, price: 299.00 }
        ]
      }
    }
  },
  methods: {
    handlePrint() {
      const printContent = this.$refs.printRef.innerHTML;
      const printWindow = window.open('', '_blank');
      printWindow.document.write(`
        <html>
        <head>
          <title>订单打印</title>
          <style>
            @media print {
              body {
                margin: 0;
                padding: 0;
              }
              .print-content {
                width: 100%;
                height: 100%;
                padding: 20px;
                border: 1px solid #ccc;
                font-size: 14pt;
              }
              @page {
                margin: 0;
                padding: 0;
              }
              .page-header, .page-footer {
                display: none;
              }
            }
          </style>
        </head>
        <body>
          ${printContent}
        </body>
        </html>
      `);
      printWindow.document.close();
      printWindow.print();
    }
  }
}
</script>

子组件OrderPrint.vue：

<template>
  <div class="print-content" ref="printRef">
    <h2>订单详情</h2>
    <p><strong>订单编号:</strong> {{ order.id }}</p>
    <p><strong>客户名称:</strong> {{ order.customer }}</p>
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>数量</th>
          <th>单价</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in order.items" :key="item.name">
          <td>{{ item.name }}</td>
          <td>{{ item.quantity }}</td>
          <td>¥{{ item.price }}</td>
          <td>¥{{ item.quantity * item.price }}</td>
        </tr>
      </tbody>
    </table>
    <p><strong>总计:</strong> ¥{{ total }}</p>
  </div>
</template>

<script>
export default {
  props: ['order'],
  computed: {
    total() {
      return this.order.items.reduce((sum, item) => 
        sum + item.quantity * item.price, 0
      ).toFixed(2);
    }
  }
}
</script>

六、源码解析

打印内容动态生成：
- 通过this.$refs.printRef.innerHTML获取打印内容
- 使用window.open()创建临时打印窗口
- 动态注入打印专用样式和内容
样式控制机制：
- 使用@media print定义打印样式
- 通过@page控制页面布局
- 使用CSS选择器精确控制元素显示
安全性考虑：
- 使用window.open()创建新窗口避免跨域问题
- 使用模板字符串注入内容时注意转义处理

七、进阶使用

1. 动态打印内容

function getPrintContent() {
  const content = document.getElementById('printable').innerHTML;
  const styles = document.querySelectorAll('style').map(s => s.outerHTML);
  return `
    <html>
    <head>
      <title>动态打印</title>
      ${styles.join('\n')}
    </head>
    <body>
      ${content}
    </body>
    </html>
  `;
}

2. 打印样式缓存

const printStyles = `
  @media print {
    body {
      margin: 0;
      padding: 0;
    }
    .print-content {
      width: 100%;
      height: 100%;
      padding: 20px;
      border: 1px solid #ccc;
    }
    @page {
      margin: 0;
      padding: 0;
    }
    .page-header, .page-footer {
      display: none;
    }
  }
`;

function getPrintWindow() {
  const printWindow = window.open('', '_blank');
  printWindow.document.write(`
    <html>
    <head>
      <title>打印</title>
      <style>${printStyles}</style>
    </head>
    <body>
      ${getPrintContent()}
    </body>
    </html>
  `);
  printWindow.document.close();
  return printWindow;
}

3. 打印回调处理

window.addEventListener('beforeprint', () => {
  console.log('打印前处理');
  // 隐藏非打印元素
  document.querySelectorAll('.no-print').forEach(el => {
    el.style.display = 'none';
  });
});

window.addEventListener('afterprint', () => {
  console.log('打印后处理');
  // 恢复元素显示
  document.querySelectorAll('.no-print').forEach(el => {
    el.style.display = '';
  });
});

八、性能与工程实践

1. 性能优化

避免频繁创建打印窗口：使用缓存机制
减少DOM操作：提前准备好打印内容
压缩CSS：使用CSS压缩工具减少传输体积

2. 异常处理

检查窗口是否成功创建
捕获打印过程中的异常
提供打印失败提示

3. 安全风险

防止XSS攻击：对用户输入内容进行过滤
避免敏感信息泄露：打印时隐藏敏感字段
防止恶意打印：限制打印频率

4. 可维护性

提取公共打印逻辑为独立模块
使用配置化管理打印样式
提供打印样式预览功能

九、常见问题与踩坑

1. 打印样式未生效

问题现象：打印时样式没有按照预期应用

常见原因：

缺少@media print声明
样式优先级不足
样式未正确注入到打印窗口

解决方法：

@media print {
  body {
    margin: 0;
    padding: 0;
    font-size: 12pt;
  }
  .print-content {
    width: 100%;
    height: 100%;
    padding: 20px;
    border: 1px solid #ccc;
  }
}

2. 页眉页脚显示问题

问题现象：打印时依然显示浏览器默认页眉页脚

解决方法：

@media print {
  @page {
    margin: 0;
    padding: 0;
  }
  .page-header, .page-footer {
    display: none;
  }
}

3. 打印内容错位

问题现象：打印内容在页面上位置异常

解决方法：

确保打印区域有固定尺寸
使用page-break-inside: avoid防止内容拆分
使用page-break-after: always控制分页

4. 跨域打印问题

问题现象：打印时出现跨域错误

解决方法：

使用window.open()创建新窗口
确保打印内容完全在当前域内
避免动态加载外部资源

十、最佳实践

优先使用CSS打印样式：适用于大多数场景
使用iframe实现隔离：当需要更复杂的打印控制时
动态生成打印内容：避免页面复杂性
添加打印回调处理：增强用户体验
进行安全校验：防止XSS攻击
进行性能测试：确保打印流畅

十一、总结

Vue打印功能的实现需要结合浏览器打印机制和前端技术特点。通过深入理解CSS打印样式、动态内容生成和打印窗口控制，可以实现高度自定义的打印需求。在实际开发中，应根据具体场景选择合适的实现方案，注意处理常见问题，确保打印功能的稳定性和安全性。对于需要高度定制的场景，使用iframe和动态生成打印内容是更可靠的选择，而简单场景则可直接使用CSS打印样式。始终记住，良好的打印体验是提升用户满意度的重要环节。

vue 打印、自定义打印、页面打印、隐藏页眉页脚

一、背景与问题

二、基本原理

三、环境准备

四、核心实现

1. 基础打印功能

2. 自定义打印内容

3. 隐藏页眉页脚

五、完整案例

订单打印案例

六、源码解析

七、进阶使用

1. 动态打印内容

2. 打印样式缓存

3. 打印回调处理

八、性能与工程实践

1. 性能优化

2. 异常处理

3. 安全风险

4. 可维护性

九、常见问题与踩坑

1. 打印样式未生效

2. 页眉页脚显示问题

3. 打印内容错位

4. 跨域打印问题

十、最佳实践

十一、总结

评论已关闭

推荐阅读