Vue调用浏览器打印：从基础到进阶

原创

前端开发Web打印社区

发布于 2025-09-30 15:12:42

9100

代码可运行

运行总次数：0

代码可运行

引言

在Vue.js开发中，打印功能是许多Web应用不可或缺的一部分。无论是打印报表、订单、发票还是其他文档，都需要在Vue组件中实现可靠的打印功能。本文将详细介绍Vue中调用浏览器打印的各种方法和最佳实践。

基础打印方法

1. 使用window.print()

最简单直接的打印方法就是使用浏览器原生的window.print()API：

// 在Vue组件中使用
export default {
  methods: {
    printPage() {
      window.print();
    }
  }
}

<template>
  <div>
    <button @click="printPage">打印当前页面</button>
    <div id="print-content">
      <!-- 打印内容 -->
      <h1>订单详情</h1>
      <p>订单号：12345</p>
      <p>客户：张三</p>
    </div>
  </div>
</template>

2. 打印指定元素

有时候我们只想打印页面的某个特定部分，可以使用以下方法：

export default {
  methods: {
    printElement(elementId) {
      const element = document.getElementById(elementId);
      const originalContent = document.body.innerHTML;
      
      document.body.innerHTML = element.innerHTML;
      window.print();
      
      // 恢复原始内容
      document.body.innerHTML = originalContent;
    }
  }
}

样式控制

1. CSS媒体查询

使用@media print可以控制打印时的样式：

/* 打印专用样式 */
@media print {
  .no-print {
    display: none !important;
  }
  
  .print-only {
    display: block !important;
  }
  
  body {
    margin: 0;
    padding: 20px;
    font-size: 12pt;
  }
  
  .page-break {
    page-break-before: always;
  }
}

2. 动态样式切换

在Vue中动态添加打印样式类：

<template>
  <div :class="{ 'print-mode': isPrinting }">
    <button @click="togglePrint">切换打印模式</button>
    <div class="content">
      <!-- 内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPrinting: false
    }
  },
  methods: {
    togglePrint() {
      this.isPrinting = !this.isPrinting;
      if (this.isPrinting) {
        this.$nextTick(() => {
          window.print();
          this.isPrinting = false;
        });
      }
    }
  }
}
</script>

高级打印技巧

1. 打印预览功能

export default {
  methods: {
    previewPrint() {
      // 打开新窗口进行预览
      const printWindow = window.open('', '_blank');
      const content = document.getElementById('print-content').innerHTML;
      
      printWindow.document.write(`
        <html>
          <head>
            <title>打印预览</title>
            <style>
              body { font-family: Arial, sans-serif; }
              @media print { body { margin: 0; } }
            </style>
          </head>
          <body>${content}</body>
        </html>
      `);
      
      printWindow.document.close();
      printWindow.focus();
    }
  }
}

2. 分页控制

.page-break-before {
  page-break-before: always;
}

.page-break-after {
  page-break-after: always;
}

.page-break-inside {
  page-break-inside: avoid;
}

<template>
  <div>
    <div class="page-break-after">第一页内容</div>
    <div class="page-break-before">第二页内容</div>
  </div>
</template>

Vue打印组件封装

1. 可复用的打印组件

<!-- PrintComponent.vue -->
<template>
  <div>
    <div class="print-controls">
      <button @click="print" :disabled="printing">
        {{ printing ? '打印中...' : '打印' }}
      </button>
      <button @click="preview">预览</button>
    </div>
    
    <div :id="printId" class="print-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PrintComponent',
  props: {
    printId: {
      type: String,
      default: 'print-content'
    },
    title: {
      type: String,
      default: '打印文档'
    }
  },
  data() {
    return {
      printing: false
    }
  },
  methods: {
    async print() {
      this.printing = true;
      
      try {
        // 添加打印样式
        this.addPrintStyles();
        
        // 执行打印
        window.print();
        
        // 等待打印对话框关闭
        await this.waitForPrint();
        
      } catch (error) {
        console.error('打印失败:', error);
        this.$emit('print-error', error);
      } finally {
        this.printing = false;
        this.removePrintStyles();
      }
    },
    
    preview() {
      const content = document.getElementById(this.printId).innerHTML;
      const printWindow = window.open('', '_blank');
      
      printWindow.document.write(`
        <html>
          <head>
            <title>${this.title}</title>
            ${this.getPrintStyles()}
          </head>
          <body>${content}</body>
        </html>
      `);
      
      printWindow.document.close();
    },
    
    addPrintStyles() {
      // 动态添加打印样式
    },
    
    removePrintStyles() {
      // 移除打印样式
    },
    
    getPrintStyles() {
      return `
        <style>
          body { font-family: Arial, sans-serif; margin: 20px; }
          @media print { body { margin: 0; } }
        </style>
      `;
    },
    
    waitForPrint() {
      return new Promise(resolve => {
        // 监听打印完成事件
        const afterPrint = () => {
          window.removeEventListener('afterprint', afterPrint);
          resolve();
        };
        window.addEventListener('afterprint', afterPrint);
      });
    }
  }
}
</script>

2. 使用示例

<template>
  <div>
    <PrintComponent print-id="order-print" title="订单详情">
      <div class="order-details">
        <h2>订单信息</h2>
        <p>订单号：{{ order.orderNumber }}</p>
        <p>客户：{{ order.customerName }}</p>
        <p>金额：{{ order.total }}</p>
      </div>
    </PrintComponent>
  </div>
</template>

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

export default {
  components: {
    PrintComponent
  },
  data() {
    return {
      order: {
        orderNumber: 'ORD001',
        customerName: '张三',
        total: '¥299.00'
      }
    }
  }
}
</script>

实际应用场景

1. 电商订单打印

<template>
  <div class="order-print">
    <div class="print-header">
      <h1>订单详情</h1>
      <button @click="printOrder">打印订单</button>
    </div>
    
    <div id="order-content" class="order-content">
      <div class="order-info">
        <h2>订单信息</h2>
        <p><strong>订单号：</strong>{{ order.id }}</p>
        <p><strong>下单时间：</strong>{{ order.createTime }}</p>
        <p><strong>客户姓名：</strong>{{ order.customerName }}</p>
      </div>
      
      <div class="order-items">
        <h2>商品清单</h2>
        <table>
          <thead>
            <tr>
              <th>商品名称</th>
              <th>数量</th>
              <th>单价</th>
              <th>小计</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in order.items" :key="item.id">
              <td>{{ item.name }}</td>
              <td>{{ item.quantity }}</td>
              <td>¥{{ item.price }}</td>
              <td>¥{{ item.total }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <div class="order-total">
        <p><strong>总计：¥{{ order.totalAmount }}</strong></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      order: {
        id: 'ORD20231201001',
        createTime: '2023-12-01 10:30:00',
        customerName: '张三',
        items: [
          { id: 1, name: '商品A', quantity: 2, price: 99.00, total: 198.00 },
          { id: 2, name: '商品B', quantity: 1, price: 149.00, total: 149.00 }
        ],
        totalAmount: 347.00
      }
    }
  },
  methods: {
    printOrder() {
      // 隐藏打印按钮
      const printBtn = document.querySelector('.print-header button');
      printBtn.style.display = 'none';
      
      // 执行打印
      window.print();
      
      // 恢复按钮显示
      setTimeout(() => {
        printBtn.style.display = 'inline-block';
      }, 1000);
    }
  }
}
</script>

<style scoped>
.order-print {
  max-width: 800px;
  margin: 0 auto;
}

.print-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.order-content {
  border: 1px solid #ddd;
  padding: 20px;
}

@media print {
  .print-header button {
    display: none !important;
  }
  
  .order-content {
    border: none;
    padding: 0;
  }
  
  body {
    margin: 0;
    padding: 20px;
  }
}
</style>

2. 财务报表打印

<template>
  <div class="report-print">
    <div class="report-controls">
      <button @click="exportPDF">导出PDF</button>
      <button @click="printReport">打印报表</button>
    </div>
    
    <div id="report-content" class="report-content">
      <div class="report-header">
        <h1>财务报表</h1>
        <p>生成时间：{{ currentTime }}</p>
      </div>
      
      <div class="report-body">
        <div v-for="section in reportData" :key="section.title" class="report-section">
          <h2>{{ section.title }}</h2>
          <table>
            <thead>
              <tr>
                <th v-for="header in section.headers" :key="header">
                  {{ header }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="row in section.rows" :key="row.id">
                <td v-for="cell in row.data" :key="cell">
                  {{ cell }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: new Date().toLocaleString(),
      reportData: [
        {
          title: '收入明细',
          headers: ['项目', '金额', '占比'],
          rows: [
            { id: 1, data: ['产品销售', '¥100,000', '60%'] },
            { id: 2, data: ['服务收入', '¥50,000', '30%'] },
            { id: 3, data: ['其他收入', '¥16,667', '10%'] }
          ]
        }
      ]
    }
  },
  methods: {
    printReport() {
      // 打印报表逻辑
      window.print();
    },
    
    exportPDF() {
      // 这里可以集成专业的打印解决方案
      // 比如使用web打印专家等npm包来实现更高级的PDF导出功能
      console.log('导出PDF功能');
    }
  }
}
</script>

专业打印解决方案

虽然浏览器原生打印功能能满足基本需求，但在企业级应用中，我们可能需要更强大的打印能力。对于需要静默打印、批量打印、精确控制打印机参数等高级功能的应用，可以考虑使用专业的Web打印解决方案，如web打印专家等npm包，这些工具提供了更丰富的API和更好的用户体验。

最佳实践

1. 用户体验优化

export default {
  methods: {
    async printWithFeedback() {
      // 显示加载状态
      this.loading = true;
      
      try {
        // 执行打印
        await this.performPrint();
        
        // 显示成功提示
        this.$message.success('打印任务已发送');
        
      } catch (error) {
        // 显示错误提示
        this.$message.error('打印失败，请重试');
      } finally {
        this.loading = false;
      }
    }
  }
}

2. 响应式打印

@media print {
  @page {
    size: A4;
    margin: 2cm;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
  }
  
  .print-small {
    font-size: 10pt;
  }
  
  .print-large {
    font-size: 14pt;
  }
}

3. 错误处理

export default {
  methods: {
    safePrint() {
      try {
        // 检查浏览器支持
        if (typeof window.print !== 'function') {
          throw new Error('浏览器不支持打印功能');
        }
        
        // 执行打印
        window.print();
        
      } catch (error) {
        console.error('打印错误:', error);
        this.handlePrintError(error);
      }
    },
    
    handlePrintError(error) {
      // 错误处理逻辑
      this.$message.error(`打印失败: ${error.message}`);
    }
  }
}