当前位置：首页 > VUE

vue实现打印和预览

2026-01-22 17:37:26VUE

Vue 实现打印功能

使用 window.print() 方法结合 CSS 控制打印样式是最基础的方式。可以创建一个隐藏的打印区域，仅在打印时显示。

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

<script>
export default {
  methods: {
    handlePrint() {
      const printContent = this.$refs.printContent.innerHTML;
      const originalContent = document.body.innerHTML;

      document.body.innerHTML = printContent;
      window.print();
      document.body.innerHTML = originalContent;
    }
  }
}
</script>

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

使用 vue-print-nb 插件

安装插件：

npm install vue-print-nb --save

使用方式：

vue实现打印和预览

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

<script>
import print from 'vue-print-nb'

export default {
  directives: {
    print
  },
  data() {
    return {
      printObj: {
        id: 'printContent',
        popTitle: '打印标题', // 打印标题
        extraCss: 'https://example.com/print.css', // 额外CSS
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>' // 额外head标签
      }
    }
  }
}
</script>

Vue 实现预览功能

对于预览功能，可以使用对话框或新窗口展示待打印内容。

<template>
  <div>
    <button @click="showPreview = true">预览</button>
    <button @click="handlePrint">打印</button>

    <div v-if="showPreview" class="preview-modal">
      <div class="preview-content">
        <button @click="showPreview = false">关闭</button>
        <div ref="printContent">
          <!-- 预览内容 -->
          <h1>文档标题</h1>
          <p>文档内容...</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPreview: false
    }
  },
  methods: {
    handlePrint() {
      // 打印逻辑同上
    }
  }
}
</script>

<style>
.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.preview-content {
  background: white;
  padding: 20px;
  max-width: 80%;
  max-height: 80vh;
  overflow: auto;
}
</style>

使用 PDF 预览

如果需要生成 PDF 预览，可以使用 jsPDF 或 html2pdf 等库。

vue实现打印和预览

安装 html2pdf：

npm install html2pdf.js

使用示例：

<template>
  <div>
    <button @click="generatePDF">生成PDF</button>
    <div id="pdfContent">
      <!-- PDF内容 -->
    </div>
  </div>
</template>

<script>
import html2pdf from 'html2pdf.js'

export default {
  methods: {
    generatePDF() {
      const element = document.getElementById('pdfContent');
      const opt = {
        margin: 10,
        filename: 'document.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
      };

      html2pdf().from(element).set(opt).save();
    }
  }
}
</script>

打印样式优化

通过 CSS 的 @media print 可以优化打印效果：

@media print {
  @page {
    size: A4;
    margin: 0;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  .no-print {
    display: none !important;
  }

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