当前位置：首页 > JavaScript

js框架实现打印

2026-04-07 11:36:03JavaScript

打印功能实现方式

在JavaScript框架中实现打印功能，可以通过以下几种方法完成：

window.print()方法 直接调用浏览器原生打印API，适用于简单打印需求：

function handlePrint() {
  window.print();
}

这种方法会打印整个网页内容，无法精确控制打印区域。

打印特定区域 通过CSS控制打印范围，隐藏非打印内容：

<div id="printableArea">
  <!-- 需要打印的内容 -->
</div>

<style>
  @media print {
    body * {
      visibility: hidden;
    }
    #printableArea, #printableArea * {
      visibility: visible;
    }
    #printableArea {
      position: absolute;
      left: 0;
      top: 0;
    }
  }
</style>

Vue.js实现方案

使用vue-print-nb插件 安装插件后可直接使用v-print指令：

npm install vue-print-nb --save

import Print from 'vue-print-nb'
Vue.use(Print);

// 模板中使用
<button v-print="'#printArea'">打印</button>
<div id="printArea">打印内容</div>

自定义打印组件 创建可复用的打印组件：

// PrintComponent.vue
<template>
  <div>
    <button @click="print">打印</button>
    <div ref="printContent">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    print() {
      const printWindow = window.open('', '_blank');
      printWindow.document.write(this.$refs.printContent.innerHTML);
      printWindow.document.close();
      printWindow.focus();
      printWindow.print();
      printWindow.close();
    }
  }
}
</script>

React实现方案

使用react-to-print库 安装后通过ref获取打印内容：

npm install react-to-print

import React, { useRef } from 'react';
import { useReactToPrint } from 'react-to-print';

function PrintableComponent() {
  const componentRef = useRef();

  const handlePrint = useReactToPrint({
    content: () => componentRef.current,
  });

  return (
    <div>
      <button onClick={handlePrint}>打印</button>
      <div ref={componentRef}>
        {/* 需要打印的内容 */}
      </div>
    </div>
  );
}

自定义打印样式 通过CSS控制打印效果：

@media print {
  .no-print {
    display: none;
  }
  .print-only {
    display: block;
  }
  @page {
    size: auto;
    margin: 0mm;
  }
}

打印优化技巧

分页控制 使用CSS page-break属性实现分页：

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

打印预览处理 在打印前处理动态内容：

function prepareForPrint() {
  // 处理图表等动态内容
  if (typeof window.charts !== 'undefined') {
    window.charts.forEach(chart => {
      chart.print();
    });
  }
}

打印事件监听 监听beforeprint和afterprint事件：

window.addEventListener('beforeprint', () => {
  // 打印前处理
});

window.addEventListener('afterprint', () => {
  // 打印后恢复
});

服务端打印方案

PDF生成打印 使用库如pdfmake或jsPDF生成PDF：

const doc = new jsPDF();
doc.text('打印内容', 10, 10);
doc.save('document.pdf');

Node.js服务端打印 通过打印机模块直接打印：

js框架实现打印

const printer = require('printer');
printer.printDirect({
  data: '打印内容',
  printer: '打印机名称',
  type: 'RAW',
  success: function(jobID) {
    console.log('打印任务ID:', jobID);
  },
  error: function(err) {
    console.error(err);
  }
});