当前位置：首页 > JavaScript

js框架实现打印

2026-02-02 17:53:37JavaScript

使用JavaScript框架实现打印功能

不同的JavaScript框架（如React、Vue、Angular）提供了各自的方式来实现打印功能。以下是几种常见框架的实现方法：

React实现打印

在React中，可以使用react-to-print库或原生window.print()方法。

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

const PrintComponent = () => {
  const componentRef = useRef();

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

  return (
    <div>
      <div ref={componentRef}>
        {/* 需要打印的内容 */}
        <h1>打印内容</h1>
        <p>这是要打印的示例文本</p>
      </div>
      <button onClick={handlePrint}>打印</button>
    </div>
  );
};

Vue实现打印

在Vue中，可以使用vue-print-nb插件或原生方法。

<template>
  <div>
    <div id="print-content">
      <!-- 需要打印的内容 -->
      <h1>打印内容</h1>
      <p>这是要打印的示例文本</p>
    </div>
    <button @click="print">打印</button>
  </div>
</template>

<script>
export default {
  methods: {
    print() {
      const printContents = document.getElementById('print-content').innerHTML;
      const originalContents = document.body.innerHTML;
      document.body.innerHTML = printContents;
      window.print();
      document.body.innerHTML = originalContents;
    }
  }
}
</script>

Angular实现打印

在Angular中，可以使用服务封装打印逻辑。

import { Component } from '@angular/core';

@Component({
  selector: 'app-print',
  template: `
    <div #printSection>
      <!-- 需要打印的内容 -->
      <h1>打印内容</h1>
      <p>这是要打印的示例文本</p>
    </div>
    <button (click)="print()">打印</button>
  `
})
export class PrintComponent {
  print(): void {
    const printContent = document.getElementById('printSection');
    const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
    WindowPrt.document.write(printContent.innerHTML);
    WindowPrt.document.close();
    WindowPrt.focus();
    WindowPrt.print();
    WindowPrt.close();
  }
}

通用CSS打印样式

无论使用哪种框架，都可以通过CSS控制打印样式：

js框架实现打印

@media print {
  body * {
    visibility: hidden;
  }
  #print-content, #print-content * {
    visibility: visible;
  }
  #print-content {
    position: absolute;
    left: 0;
    top: 0;
  }
}