Vue3实现前端打印功能，10分钟拿下！vue3 前端打印功能主要通过插件来实现。 市面上常用的有 vue3-print

1.前言

vue3 前端打印功能主要通过插件来实现。

市面上常用的有 vue3-print-nb 、print-js 等插件。

这里我综合各种使用情况，采用 vue3-print-nb 这个插件。

2.安装配置

2.1 下载安装

npm i vue3-print-nb --save

2.2 main.js 全局配置

3.综合案例

3.1 设置打印区域

这里为要打印的区域设置 id 选择器

<div id="printData">
  <el-table border :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" width="180" label="Address" />
  </el-table>
</div>

3.2 绑定打印事件

为打印按钮绑定 v-print

 <el-button v-print="print" type="success">点击打印</el-button>

// 打印
const print = {
  id: "printData",
  popTitle: "打印数据",
};

3.3 完整代码

<template>
  <div>
    <el-card>
      <template #header>
        <el-button v-print="print" type="success">点击打印</el-button>
      </template>
      <div id="printData">
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="Date" width="180" />
          <el-table-column prop="name" label="Name" width="180" />
          <el-table-column prop="address" width="180" label="Address" />
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script setup>
const tableData = [
  {
    date: "2024-05-03",
    name: "知否君",
    address: "中国北京",
  },
  {
    date: "2024-05-02",
    name: "工藤新一",
    address: "中国上海",
  },
];
// 打印
const print = {
  id: "printData",
  popTitle: "打印数据",
};
</script>
<style lang="scss" scoped>
@page {
  size: auto;
  margin-bottom: 5mm;
}
</style>

4.避坑

虽然 vue3-print-nb 很好用，但是它有很多坑。

4.1 打印表格无边框

解决方案：采用原生 table

<div id="printData">
  <table class="printTable" border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>生日</th>
        <th>地址</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>1998-02-25</td>
        <td>河北避暑山庄</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>1996-02-24</td>
        <td>北京大兴</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>1997-02-26</td>
        <td>浙江杭州</td>
      </tr>
    </tbody>
  </table>
</div>

.printTable {
  color: #616161;
  width: 100%;
  border-collapse: collapse;
  border: 0.25px solid #ededed;
  text-align: left;
  font-size: 15px;
  th,
  td {
    padding: 6px;
  }
}

4.2 单选框复选框打印不选中

解决方案：设置 CSS

@media print {
  ::v-deep .el-radio__input,
  ::v-deep .el-checkbox__input {
    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
    color-adjust: exact;
  }
}

4.3 去除页脚页眉

设置 CSS

@page {
    size: auto;
    margin: 0mm;
  }

4.4 打印內容不自动换行

设置 CSS

word-wrap:break-word;