当前位置：首页 > 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：

vue实现模板打印

安装插件：
```
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 observer实现

Vue Observer 实现原理 Vue 的响应式系统核心是通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现的 Observer 模式。以下是关键实现细…

vue实现换肤

使用 CSS 变量实现换肤在 Vue 项目中，可以通过 CSS 变量（Custom Properties）动态切换主题色。CSS 变量可以在运行时修改，适合实现换肤功能。定义全局 CSS 变量：…

vue mvvm实现

Vue MVVM 实现原理 Vue.js 是一个基于 MVVM（Model-View-ViewModel）模式的框架，其核心是通过数据绑定和响应式系统实现视图与数据的自动同步。以下是 Vue 实现 M…

vue环境实现

Vue 环境搭建安装 Node.js 和 npm Node.js 是运行 Vue 的基础环境，npm 是包管理工具。从 Node.js 官网下载并安装最新稳定版本。安装完成后，在终端运行以下命令验…

vue实现github

Vue 实现 GitHub 相关功能创建 GitHub API 请求在 Vue 项目中，可以使用 axios 或 fetch 与 GitHub API 进行交互。需要在 GitHub 上创建个人访…

vue实现城市

Vue 实现城市选择功能使用 Element UI 的 Cascader 组件 Element UI 提供了一个 Cascader 级联选择器组件，非常适合实现城市选择功能。需要先安装 Elemen…

vue实现模板打印