vue实现打印页面内容

实现 Vue 打印页面内容的方法

在 Vue 项目中实现打印功能可以通过多种方式完成，以下是几种常见且实用的方法：

使用 window.print() 方法

通过调用浏览器原生的 window.print() 方法实现打印功能，适用于简单页面打印。

<template>
  <div>
    <div id="printContent">
      <!-- 需要打印的内容 -->
      <h1>打印标题</h1>
      <p>打印内容...</p>
    </div>
    <button @click="print">打印</button>
  </div>
</template>

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

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

使用 vue-print-nb 插件

vue-print-nb 是一个专门为 Vue 设计的打印插件，使用简单且功能强大。

安装插件：

npm install vue-print-nb --save

使用示例：

<template>
  <div>
    <div id="printContent">
      <!-- 需要打印的内容 -->
      <h1>打印标题</h1>
      <p>打印内容...</p>
    </div>
    <button v-print="printObj">打印</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      printObj: {
        id: 'printContent',
        popTitle: '打印标题', // 打印标题
        extraCss: '', // 额外CSS
        extraHead: '' // 额外头部内容
      }
    }
  }
}
</script>

使用 html2canvas 和 jsPDF 实现 PDF 打印

如果需要将页面内容转换为 PDF 再打印，可以使用 html2canvas 和 jsPDF 组合。

安装依赖：

npm install html2canvas jspdf --save

实现代码：

<template>
  <div>
    <div id="printContent">
      <!-- 需要打印的内容 -->
      <h1>打印标题</h1>
      <p>打印内容...</p>
    </div>
    <button @click="printPDF">打印PDF</button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export default {
  methods: {
    printPDF() {
      const element = document.getElementById('printContent');
      html2canvas(element).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'PNG', 0, 0);
        pdf.save('print.pdf');
      });
    }
  }
}
</script>

打印特定区域并隐藏不需要的内容

通过 CSS 控制打印时隐藏不需要的内容，只显示特定区域。

@media print {
  .no-print {
    display: none;
  }
  .print-only {
    display: block !important;
  }
}

在模板中使用：

<div class="no-print">
  这部分内容不会被打印
</div>
<div class="print-only">
  这部分内容会被打印
</div>

注意事项

• 打印样式可能需要单独调整，建议在 @media print 中定义专门的打印样式
• 打印图片时确保图片已加载完成
• 复杂页面可能需要分页处理，可以通过 CSS 的 page-break-before 或 page-break-after 属性控制
• 某些浏览器可能会阻止弹出打印窗口，需要用户手动允许

以上方法可以根据实际需求选择使用，简单打印需求使用原生方法即可，复杂需求可以考虑使用插件或 PDF 转换方案。