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;
相关推荐
weixin-a153003083168 分钟前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头34 分钟前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's41 分钟前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫1 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim1 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim1 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心2 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络2 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
遗憾随她而去.2 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09012 小时前
浅析Web存储系统
前端