Vue3 打印网页内容

最新推荐文章于 2025-04-27 17:35:23 发布

irisMoon06

最新推荐文章于 2025-04-27 17:35:23 发布

阅读量214

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/irisMoon06/article/details/147376625

<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>