当前位置：首页 > VUE

vue实现模板打印

2026-01-16 03:01:56VUE

Vue 实现模板打印的方法

在 Vue 中实现模板打印功能通常需要结合浏览器的打印 API 和 CSS 样式控制。以下是几种常见的方法：

使用 window.print() 方法

创建一个打印按钮，点击时调用 window.print() 方法触发浏览器打印对话框。

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

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

<style>
@media print {
  /* 隐藏不需要打印的元素 */
  button {
    display: none;
  }

  /* 设置打印样式 */
  #print-content {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}
</style>

使用 iframe 打印特定内容

如果需要更精细控制打印内容，可以使用 iframe 方式：

<template>
  <div>
    <div ref="printContent">
      <!-- 打印内容 -->
      <h1>订单详情</h1>
      <table>
        <!-- 表格内容 -->
      </table>
    </div>
    <button @click="printSpecificContent">打印订单</button>
  </div>
</template>

<script>
export default {
  methods: {
    printSpecificContent() {
      const content = this.$refs.printContent.innerHTML;
      const frame = document.createElement('iframe');
      frame.style.display = 'none';
      document.body.appendChild(frame);

      const frameDoc = frame.contentWindow || frame.contentDocument;
      if (frameDoc.document) {
        frameDoc = frameDoc.document;
      }

      frameDoc.open();
      frameDoc.write('<html><head><title>订单打印</title></head><body>');
      frameDoc.write(content);
      frameDoc.write('</body></html>');
      frameDoc.close();

      setTimeout(() => {
        frame.contentWindow.print();
        document.body.removeChild(frame);
      }, 100);
    }
  }
}
</script>

使用第三方库

可以考虑使用专门处理打印的 Vue 插件，如 vue-print-nb：

安装插件：
```
npm install vue-print-nb --save
```
在项目中使用：
```
import Print from 'vue-print-nb'
```

Vue.use(Print);


3. 在模板中使用：
```html
<template>
  <div>
    <div id="print-area">
      <!-- 打印内容 -->
    </div>
    <button v-print="'#print-area'">打印</button>
  </div>
</template>

打印样式优化

为获得更好的打印效果，需要特别注意 CSS 打印样式：

@media print {
  body * {
    visibility: hidden;
  }

  #print-content, #print-content * {
    visibility: visible;
  }

  #print-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  /* 避免打印时出现分页问题 */
  table {
    page-break-inside: avoid;
  }

  /* 设置页边距 */
  @page {
    size: auto;
    margin: 0mm;
  }
}

处理动态内容打印

对于需要等待数据加载后再打印的情况：

methods: {
  async printWithData() {
    await this.loadData(); // 等待数据加载

    this.$nextTick(() => {
      window.print();
    });
  }
}

以上方法可以根据具体需求选择使用，对于简单打印需求直接使用 window.print() 配合打印样式即可，更复杂的需求可以考虑 iframe 或第三方库方案。

vue实现模板打印

标签: 模板 vue

分享给朋友：

vue实现下拉菜单

实现下拉菜单的基本思路使用Vue实现下拉菜单可以通过动态绑定v-show或v-if控制菜单显示隐藏，结合事件监听（如@click或@mouseenter）触发状态切换。以下是两种常见实现方式：方…

vue伪函数实现

Vue 伪函数实现方法伪函数（Mock Function）在 Vue 中常用于测试或模拟某些逻辑，以下是几种常见的实现方式：使用 Jest 的 jest.fn() 在单元测试中，可以通过 Jes…

vue搜索过后实现分页

Vue 实现搜索后分页功能数据绑定与搜索逻辑在 Vue 组件中定义必要的数据属性： data() { return { searchQuery: '', currentPa…

前端多线程实现vue

前端多线程与Vue的结合在Vue中实现多线程通常通过Web Worker技术完成。Web Worker允许在后台线程中运行脚本，避免阻塞主线程，适合处理计算密集型任务。使用Web Worker的…

vue实现横向导航

vue实现横向导航的方法使用Flex布局实现横向导航在Vue中可以通过Flex布局快速实现横向导航。创建一个组件，使用display: flex和flex-direction: row属性使导航项…

vue实现文件模板展示

Vue 实现文件模板展示的方法在 Vue 中实现文件模板展示功能，可以通过多种方式完成。以下是几种常见的实现方法：使用动态组件动态组件允许根据条件切换不同的模板组件。通过 :is 属性绑…

vue实现模板打印