当前位置：首页 > VUE

前端实现打印功能vue

2026-01-22 06:51:07VUE

使用 Vue 实现前端打印功能

在 Vue 项目中实现打印功能，可以通过浏览器原生的 window.print() 方法或借助第三方库（如 vue-print-nb）来实现。以下是几种常见方法：

方法一：使用原生 `window.print()`

直接调用浏览器的打印 API，适用于简单打印需求。

<template>
  <div>
    <button @click="handlePrint">打印</button>
    <div id="printContent">
      <!-- 需要打印的内容 -->
      <h1>打印测试</h1>
      <p>这是一段需要打印的内容。</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handlePrint() {
      const printContent = document.getElementById("printContent").innerHTML;
      const originalContent = document.body.innerHTML;
      document.body.innerHTML = printContent;
      window.print();
      document.body.innerHTML = originalContent;
    },
  },
};
</script>

注意事项：

打印完成后需恢复原始页面内容。
打印样式可通过 CSS 的 @media print 控制。

方法二：使用 `vue-print-nb` 插件

vue-print-nb 是一个 Vue 专用的打印插件，支持更灵活的配置。

安装插件：
```
npm install vue-print-nb --save
```

在 Vue 项目中引入：

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

在模板中使用：


<template>
<div>
 <button v-print="printConfig">打印</button>
 <div id="printArea">
   <!-- 需要打印的内容 -->
   <h1>打印测试</h1>
   <p>使用 vue-print-nb 打印内容。</p>
 </div>
</div>
</template>

export default { data() { return { printConfig: { id: "printArea", // 指定打印区域的 ID popTitle: "打印标题", // 打印页面的标题 extraCss: "https://example.com/print.css", // 额外的打印样式 }, }; }, }; ```

优点：

支持自定义打印标题和样式。
无需手动操作 DOM。

方法三：通过 CSS 控制打印样式

使用 @media print 定义打印时的样式，隐藏非打印元素。

/* 全局样式或组件内样式 */
@media print {
  .no-print {
    display: none;
  }
  .print-content {
    width: 100%;
    margin: 0;
  }
}

在模板中标记需要隐藏或显示的内容：

<template>
  <div>
    <button class="no-print" @click="window.print()">打印</button>
    <div class="print-content">
      <!-- 打印内容 -->
    </div>
  </div>
</template>

方法四：打印特定 PDF 或外部页面

如果需要打印 PDF 或外部链接，可以通过 iframe 实现。

<template>
  <button @click="printPDF('https://example.com/doc.pdf')">打印PDF</button>
</template>

<script>
export default {
  methods: {
    printPDF(url) {
      const iframe = document.createElement("iframe");
      iframe.style.display = "none";
      iframe.src = url;
      document.body.appendChild(iframe);
      iframe.onload = () => {
        iframe.contentWindow.print();
      };
    },
  },
};
</script>