Vue3 打印网页内容

<template>
  <div>
    <!-- 打印内容区域 -->
    <div ref="printContent" class="print-content">
      <h2>打印内容标题</h2>
      <p>这是要打印的内容...</p>
      <table border="1" style="width: 100%">
        <tr>
          <th>项目</th>
          <th>数量</th>
          <th>价格</th>
        </tr>
        <tr>
          <td>商品A</td>
          <td>2</td>
          <td>¥100</td>
        </tr>
        <tr>
          <td>商品B</td>
          <td>1</td>
          <td>¥200</td>
        </tr>
      </table>
    </div>

    <!-- 打印按钮 -->
    <button @click="handlePrint">打印内容</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const printContent = ref(null);

const handlePrint = () => {
  const printWindow = window.open('', '_blank');
  printWindow.document.write(`
    <html>
      <head>
        <title>打印</title>
        <style>
          body { font-family: Arial; margin: 20px; }
          table { border-collapse: collapse; width: 100%; }
          th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
          @media print {
            .no-print { display: none !important; }
            body { margin: 0; padding: 0; }
          }
        </style>
      </head>
      <body>
        ${printContent.value.innerHTML}
        <script>
          setTimeout(() => {
            window.print();
            window.close();
          }, 100);
        <\/script>
      </body>
    </html>
  `);
  printWindow.document.close();
};
</script>

<style scoped>
.print-content {
  margin: 20px;
  padding: 20px;
  border: 1px solid #eee;
}

@media print {
  .no-print {
    display: none !important;
  }
}
</style>

使用 CSS 媒体查询隐藏非打印内容

<template>
  <div>
    <!-- 不打印的内容 -->
    <div class="no-print">
      <h1>网页标题</h1>
      <nav>导航菜单...</nav>
    </div>

    <!-- 打印内容 -->
    <div class="printable-area">
      <h2>订单详情</h2>
      <p>订单号: 123456789</p>
      <!-- 更多打印内容... -->
    </div>

    <button @click="printPage" class="no-print">打印页面</button>
  </div>
</template>

<script setup>
const printPage = () => {
  window.print();
};
</script>

<style>
/* 普通样式 */
.no-print {
  padding: 20px;
  background-color: #f5f5f5;
}

.printable-area {
  padding: 20px;
  margin: 20px 0;
  border: 1px dashed #ccc;
}

/* 打印样式 */
@media print {
  .no-print {
    display: none;
  }
  
  .printable-area {
    border: none;
    padding: 0;
    margin: 0;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
}
</style>

### Vue3 中实现打印功能的示例教程 在 Vue3 项目中实现打印功能可以通过 `vue-print-nb` 插件完成。以下是关于该插件的具体使用方法以及一些扩展技巧。 #### 安装与配置 首先,在 Vue3 项目中安装 `vue-print-nb` 插件: ```bash npm install vue-print-nb --save ``` 接着,在项目的入口文件(通常是 `main.js` 或 `main.ts`)中引入并注册插件: ```javascript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; import Print from &#39;vue-print-nb&#39;; const app = createApp(App); app.use(Print); // 注册插件 app.mount(&#39;#app&#39;); ``` 通过上述操作,即可完成插件的基础配置[^1]。 --- #### 基本使用 为了实现打印功能,可以在模板中绑定需要打印的内容区域,并调用插件提供的指令或方法。例如: ```html <template> <div> <!-- 需要打印的内容 --> <div id="print-content"> <h1>这是需要打印的内容</h1> <p>这是一段描述文字。</p> </div> <!-- 打印按钮 --> <button v-print="&#39;#print-content&#39;">打印内容</button> </div> </template> ``` 在此示例中,`v-print` 是由 `vue-print-nb` 提供的一个自定义指令,用于指定需要打印的目标 DOM 节点的选择器。 如果希望手动触发打印逻辑,则可以使用组件实例上的 `$print` 方法: ```javascript export default { methods: { handlePrint() { this.$print(&#39;#print-content&#39;); // 手动调用打印方法 } } }; ``` 对应的 HTML 结构如下: ```html <template> <div> <div id="print-content"> <h1>这是需要打印的内容</h1> <p>这是一段描述文字。</p> </div> <button @click="handlePrint">手动打印</button> </div> </template> ``` --- #### 自定义样式 默认情况下,打印预览会继承页面的部分 CSS 样式,但如果需要完全控制打印样式的显示效果,可以通过 `<style media="print">` 来定义专门针对打印的样式规则。例如: ```css <style scoped> /* 页面正常显示时的样式 */ #print-content h1 { color: blue; } /* 打印时的样式 */ @media print { body * { visibility: hidden; /* 隐藏不需要打印的内容 */ } #print-content, #print-content * { visibility: visible; /* 显示目标内容 */ } #print-content { position: absolute; top: 0; left: 0; } } </style> ``` 以上代码确保只有被标记为 `#print-content` 的部分会在打印时可见。 --- #### 导出 PDF 功能(可选) 除了直接打印外,还可以借助其他库(如 jsPDF 和 html2canvas),将页面内容转换为 PDF 文件并提供下载选项。具体实现方式参见相关内容[^2]。 --- ### 总结 通过 `vue-print-nb` 插件,Vue3 项目能够轻松实现网页打印功能。无论是简单的单击打印还是复杂的样式定制需求,都可以基于此插件快速开发和部署。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值