当前位置：首页 > VUE

vue中实现打印插件

2026-02-24 07:43:21VUE

Vue 中实现打印功能的方法

在 Vue 项目中实现打印功能可以通过以下几种方式完成，具体选择取决于项目需求和技术栈。

使用原生 JavaScript 打印

通过调用 window.print() 方法可以直接触发浏览器的打印功能。这种方式简单但灵活性较低。

methods: {
  handlePrint() {
    window.print();
  }
}

使用 vue-print-nb 插件

vue-print-nb 是一个专为 Vue 设计的打印插件，支持自定义打印内容和样式。

安装插件：

npm install vue-print-nb --save

在 Vue 项目中引入并使用：

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

模板中使用：

<button v-print="printOptions">打印</button>
<div id="printContent">
  <!-- 打印内容 -->
</div>

<script>
export default {
  data() {
    return {
      printOptions: {
        id: 'printContent',
        popTitle: '打印标题',
        extraCss: 'https://example.com/print.css'
      }
    }
  }
}
</script>

使用 html2canvas 和 jsPDF 实现复杂打印

对于需要将 HTML 转换为 PDF 的场景，可以结合 html2canvas 和 jsPDF 使用。

安装依赖：

npm install html2canvas jspdf --save

实现代码：

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

methods: {
  async printPDF() {
    const element = document.getElementById('printArea');
    const canvas = await html2canvas(element);
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF('p', 'mm', 'a4');
    const imgProps = pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
    pdf.save('document.pdf');
  }
}

使用 window.print() 定制打印样式

通过 CSS 的 @media print 可以定制打印时的样式。

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