一文带你实现轻量级的打印功能（vue/js原生版本）

一、前言

因为打印功能是偏小众需求，所以网络上有价值的参考资料和文献相对较少。大多数文章都是胡乱贴码，三言两语带过，并未提供核心技巧和完整的开发思路。当然，本文也不是全面解析，而是对如何实现轻量级的打印功能做一个分享和记录。希望对读者有一定帮助。

二、技术分析与选型

下面介绍几种常见的打印功能实现方案：

1、window.print()

浏览器自带的打印API，轻量级实现打印功能，兼容性好。本文也是基于此为案例讲述。

2、vue-print-nb

常见的vue打印插件之一，具体文档详见vue-print-nb。这类文章网上很多，感兴趣的可自行查阅，本文不作累述。

3、vue-easy-print

常见的vue打印插件之一，具体文档详见vue-easy-print。这类文章网上很多，感兴趣的可自行查阅，本文不作累述。

三、window.print()的核心代码和解析

1、设置打印（内容）区域，这里通常有2种交互设计。一种是打印内容区域和其他内容在同一页面，那么此时的打印内容区域需v-show隐藏；另一种是打印内容区域用弹窗显示，此时则可不隐藏（但这种弹窗打印会弹窗交互2次，1次是dialog弹窗；一次是浏览器自带的打印弹窗，不是很友好）。所以建议选择第一种，本文也以第一种展叙。

    <div id="printContent" ref="printContent" v-show="showPrint">
        <h2 style="text-align: center;margin: 20px 0;">全省激活数统计月报表</h2>
        <p v-if="activeName === '0'" style="float: right; margin: 20px 20px 50px 0">时间：{{ moment(search.month).format("YYYY-MM") }}
        </p>
        <p v-if="activeName === '1'" style="float: right; margin: 20px 20px 50px 0;">时间：{{ search.quarter }}</p>
        <p v-if="activeName === '2'" style="float: right; margin: 20px 20px 50px 0;">时间：{{ search.year }}</p>
        <table style="width: 96%;margin:0 auto;border: 1px solid black;border-collapse: collapse;">
          <thead>
            <tr>
              <th style="width: 50%;border: 1px solid black;padding: 8px;text-align: left;">单位名称</th>
              <th style="width: 50%;border: 1px solid black;padding: 8px;text-align: left;">激活卡数（张）</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in tableData" :key="item.unitId">
              <td style="width: 50%;border: 1px solid black;padding: 8px;text-align: left;">{{ item.unitName }}</td>
              <td style="width: 50%;border: 1px solid black;padding: 8px;text-align: left;">{{ item.cardNumber }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      
      
      showPrint: false, //打印内容区域不显示

2、添加打印按钮，并设置按钮事件（内容区域要加ref名）。

    <el-button type="primary" @click="print">打印</el-button>

    //打印
    print() {
      this.$nextTick(() => {
        // 获取需要打印的HTML内容
        const printContent = this.$refs.printContent.innerHTML;
        // 创建一个隐藏的iframe
        const iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        // 将iframe添加到页面中
        document.body.appendChild(iframe);
        // 获取iframe的window对象
        const win = iframe.contentWindow;
        // 将需要打印的HTML内容写入iframe的document中
        win.document.write(printContent);
        // 执行打印操作
        win.print();
        // 将iframe从页面中移除
        document.body.removeChild(iframe);
      })
    }

四、效果展示。

五、完结。

以上就是本文的全部内容，叙述了web端原生的打印功能的实现。其中打印内容区域和页面的交互可以按实际需求和业务场景进行设计，注意要给内容区域外盒子加上ref名，并且设置是否显隐（v-show）。最后，希望能对读者朋友有所帮助，欢迎三连。