Vue3实现打印功能

1、安装插件

复制代码
npm i vue3-print-nb --save

2、main.js全局配置

复制代码
import print from 'vue3-print-nb'
app.use(print)

3、设置打印区域

为打印区域设置 id 选择器

html 复制代码
<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>

4、绑定打印事件

为打印按钮绑定 v-print

javascript 复制代码
<el-button v-print="print" type="success">点击打印</el-button>
// 打印
const print = {
  id: "printData",
  popTitle: "打印数据",
};

5、完整代码

javascript 复制代码
<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>

6、解决打印表格无边框

使用原生table

javascript 复制代码
<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>
javascript 复制代码
.printTable {
  color: #616161;
  width: 100%;
  border-collapse: collapse;
  border: 0.25px solid #ededed;
  text-align: left;
  font-size: 15px;
  th,
  td {
    padding: 6px;
  }
}

7、解决单选框复选框打印不选中

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

8、去除页脚页眉

css 复制代码
@page {
    size: auto;
    margin: 0mm;
  }

9、解决打印內容不自动换行

css 复制代码
word-wrap:break-word;
相关推荐
杨进军几秒前
React 实现 useMemo
前端·react.js·前端框架
海底火旺2 分钟前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到113 分钟前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡4 分钟前
浏览器是否支持webp图像的判断
前端
Xi-Xu6 分钟前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂7 分钟前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军8 分钟前
React 实现多个节点 diff
前端·react.js·前端框架
用户40812812003818 分钟前
拓展运算符和剩余参数
前端
再见了那维莱特12 分钟前
6.29 drilling notes
前端
前端付豪12 分钟前
15、前端可配置化系统设计:从硬编码到可视化配置
前端·javascript·架构