devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【Vue】使用print.js插件实现打印预览功能，超简单_vue实现打印预览功能

作者：小小林熬夜学编程 | 2024-02-18 05:32:08

赞

踩

vue实现打印预览功能

目录

一、实现效果

 二、实现步骤

【1】安装插件

【2】在需要打印的页面导入

【3】在vue文件中需要打印的部分外层套一层div，给div设置id。作为打印的区域

【4】在打印按钮上添加打印事件

【5】在methods中添加点击事件

三、完整代码

一、实现效果

 

 二、实现步骤

print.js插件，可以打印html、pdf、json数据等。

官网：https://printjs.crabbly.com/

【1】安装插件

npm install print-js --save

【2】在需要打印的页面导入

import print from 'print-js'

【3】在vue文件中需要打印的部分外层套一层div，给div设置id。作为打印的区域

  1. <el-table :data="showData" id="printBox" style="display: flex;">
  2.       <el-table-column type="index" label="序号" width="180" align="center"></el-table-column>
  3.       <el-table-column prop="adminname" label="账号" align="center"></el-table-column>
  4.       <el-table-column label="权限" align="center">
  5.         <template #default="{ row }">
  6.           <el-tag v-if="row.role == 1" type="" effect="dark">
  7.             管理员
  8.           </el-tag>
  9.           <el-tag v-else-if="row.role == 2" type="warning" effect="dark">
  10.             超级管理员
  11.           </el-tag>
  12.           <el-tag v-else type="info" effect="dark">
  13.             未知
  14.           </el-tag>
  15.         </template>
  16.       </el-table-column>
  17.       <el-table-column label="操作" align="center">
  18.         <template #default="{ row }">
  19.           <el-button circle type="success" @click="editHandler(row)">
  20.             <el-icon>
  21.               <Edit></Edit>
  22.             </el-icon>
  23.           </el-button>
  24.  
  25.           <el-popconfirm title="你确定删除吗?" confirm-button-text="是" cancel-button-text="取消" @confirm="delHandler(row)">
  26.             <template #reference>
  27.               <el-button circle type="danger">
  28.                 <el-icon>
  29.                   <Delete></Delete>
  30.                 </el-icon>
  31.               </el-button>
  32.             </template>
  33.           </el-popconfirm>
  34.         </template>
  35.       </el-table-column>
  36.     </el-table>

【4】在打印按钮上添加打印事件

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

【5】在methods中添加点击事件

必要的就是printable和bype

  1. methods: {
  2.     printBox() {
  3.       setTimeout(function () {
  4.         print({
  5.           printable: 'printBox',
  6.           type: 'html',
  7.           scanStyles: false,
  8.           targetStyles: ['*']
  9.         })
  10.       }, 500)
  11.     },
  12. }

三、完整代码

  1. <template>
  2.   <el-breadcrumb class="breadcrumb" separator="/">
  3.     <el-breadcrumb-item :to="{ path: '/layout' }">主页</el-breadcrumb-item>
  4.     <el-breadcrumb-item>账号管理</el-breadcrumb-item>
  5.     <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
  6.   </el-breadcrumb>
  7.   <div>
  8.     <!-- 按钮 -->
  9.     <el-button type="primary" @click="openAdd">添加管理员</el-button>
  10.     <el-button type="primary" @click="printBox">打印</el-button>
  11.     <!-- 表格 -->
  12.     <el-table :data="showData" id="printBox" style="display: flex;">
  13.       <el-table-column type="index" label="序号" width="180" align="center"></el-table-column>
  14.       <el-table-column prop="adminname" label="账号" align="center"></el-table-column>
  15.       <el-table-column label="权限" align="center">
  16.         <template #default="{ row }">
  17.           <el-tag v-if="row.role == 1" type="" effect="dark">
  18.             管理员
  19.           </el-tag>
  20.           <el-tag v-else-if="row.role == 2" type="warning" effect="dark">
  21.             超级管理员
  22.           </el-tag>
  23.           <el-tag v-else type="info" effect="dark">
  24.             未知
  25.           </el-tag>
  26.         </template>
  27.       </el-table-column>
  28.       <el-table-column label="操作" align="center">
  29.         <template #default="{ row }">
  30.           <el-button circle type="success" @click="editHandler(row)">
  31.             <el-icon>
  32.               <Edit></Edit>
  33.             </el-icon>
  34.           </el-button>
  35.  
  36.           <el-popconfirm title="你确定删除吗?" confirm-button-text="是" cancel-button-text="取消" @confirm="delHandler(row)">
  37.             <template #reference>
  38.               <el-button circle type="danger">
  39.                 <el-icon>
  40.                   <Delete></Delete>
  41.                 </el-icon>
  42.               </el-button>
  43.             </template>
  44.           </el-popconfirm>
  45.         </template>
  46.       </el-table-column>
  47.     </el-table>
  48.     <!-- 分页器 -->
  49.     <div class="pagination">
  50.       <el-pagination v-model:current-page="count" v-model:page-size="limitNum" :page-sizes="[1, 3, 5, 8]"
  51.         layout="total, sizes, prev, pager, next, jumper" :total="allData.length" />
  52.     </div>
  53.     <!-- 抽屉 -->
  54.     <el-drawer v-model="isShow">
  55.       <template #header>
  56.         <h4>{{ type }} 管理员</h4>
  57.       </template>
  58.       <template #default>
  59.         <div>
  60.           <el-form :model="form">
  61.             <el-form-item label="账号" size="small">
  62.               <el-input v-model="form.adminname">
  63.               </el-input>
  64.             </el-form-item>
  65.  
  66.             <el-form-item label="密码">
  67.               <el-input v-model="form.password">
  68.               </el-input>
  69.             </el-form-item>
  70.  
  71.             <el-form-item label="角色">
  72.               <el-select v-model="form.role">
  73.                 <el-option label="管理员" :value="1">
  74.                 </el-option>
  75.                 <el-option label="超级管理员" :value="2">
  76.                 </el-option>
  77.               </el-select>
  78.             </el-form-item>
  79.  
  80.             <el-form-item label="权限">
  81.               <el-tree ref="treeRef" :data="treeData" show-checkbox default-expand-all node-key="path"
  82.                 :props="defaultProps" />
  83.             </el-form-item>
  84.  
  85.  
  86.           </el-form>
  87.         </div>
  88.       </template>
  89.  
  90.       <template #footer>
  91.         <div style="flex:auto">
  92.           <el-button @click="cancelClick">取消</el-button>
  93.           <el-button type="primary" @click="confirmClick">确定</el-button>
  94.         </div>
  95.       </template>
  96.  
  97.     </el-drawer>
  98.  
  99.   </div>
  100. </template>
  101.  
  102. <script>
  103. import print from 'print-js'
  104. import { formatRoutes } from "@/utils/tools"
  105. import { getAdminList, addAdmin, updataAdmin, delAdmin } from '@/apis/user'
  106. export default {
  107.   data() {
  108.     return {
  109.       // 当前页码
  110.       count: 1,
  111.       // 每页显示条数
  112.       limitNum: 3,
  113.       // 所有管理员列表信息
  114.       allData: [],
  115.       // 管理员抽屉的数据
  116.       form: {
  117.         adminname: '',
  118.         password: '',
  119.         role: 1,
  120.       },
  121.       // 抽屉是否显示
  122.       isShow: false,
  123.       // 区别当前是添加管理员还是更新管理员
  124.       type: '',
  125.       // 树节点信息
  126.       treeData: [],
  127.       // 要显示的元素
  128.       defaultProps: {
  129.         children: 'children',
  130.         label: function (data) {
  131.           // label设置要显示的文字信息，lable的值可以是函数
  132.           return data.meta.title
  133.         }
  134.       }
  135.     };
  136.   },
  137.   watch: {
  138.     isShow(value) {
  139.       if (!value) {
  140.         this.form = {}
  141.       }
  142.       this.$refs.treeRef?.setCheckedNodes([])
  143.     }
  144.   },
  145.   computed: {
  146.     showData() {
  147.       return this.allData.slice((this.count - 1) * this.limitNum, this.count * this.limitNum)
  148.     }
  149.   },
  150.   mounted() {
  151.     this.getAllData(),
  152.       this.treeData = formatRoutes(this.$router.getRoutes())
  153.   },
  154.   methods: {
  155.     printBox() {
  156.       setTimeout(function () {
  157.         print({
  158.           printable: 'printBox',
  159.           type: 'html',
  160.           scanStyles: false,
  161.           targetStyles: ['*']
  162.         })
  163.       }, 500)
  164.     },
  165.  
  166.     delHandler(row) {
  167.       delAdmin({ adminid: row.adminid }).then(data => {
  168.         this.getAllData()
  169.       })
  170.  
  171.     },
  172.     cancelClick() {
  173.       this.isShow = false
  174.     },
  175.     confirmClick() {
  176.       this.isShow = false
  177.       // 获取表单数据和树形菜单数据，调用 添加、修改接口
  178.       // getCheckedNodes,选中的节点的数据
  179.       // 第一个false:选中父节点，字节点数据都获取
  180.       // 第二个true:无论父节点有没有被选中，选中的子节点都能获取
  181.       if (this.type == '添加') {
  182.         addAdmin({
  183.           ...this.form,
  184.           checkedKeys: this.$refs.treeRef?.getCheckedNodes(false, true)
  185.         }).then(res => {
  186.           this.getAllData()
  187.         })
  188.       } else {
  189.         updataAdmin({
  190.           ...this.form,
  191.           checkedKeys: this.$refs.treeRef?.getCheckedNodes(false, true)
  192.         }).then(res => {
  193.           this.getAllData()
  194.         })
  195.       }
  196.     },
  197.     // 获取所有管理员列表信息
  198.     getAllData() {
  199.       getAdminList().then(res => {
  200.         console.log("管理员列表", res)
  201.         this.allData = res.data
  202.         this.count = 1
  203.       })
  204.     },
  205.     editHandler(row) {
  206.       this.type = '修改',
  207.         this.isShow = true
  208.       this.form = {
  209.         adminname: row.adminname,
  210.         password: row.password,
  211.         role: row.role
  212.       }
  213.     },
  214.     openAdd() {
  215.       this.type = '添加',
  216.         this.isShow = true
  217.     }
  218.   },
  219. };
  220. </script>
  221.  
  222. <style lang="scss" scoped>
  223. .breadcrumb {
  224.   margin-bottom: 25px;
  225.  
  226. }
  227.  
  228. .pagination {
  229.   display: flex;
  230.   justify-content: center;
  231.  
  232.   .el-pagination {
  233.     margin: 10px;
  234.   }
  235. }
  236. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/105218
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号