Vue实现浏览器打印功能的代码


Posted in Javascript onApril 17, 2020

Vue实现浏览器打印功能

实际项目中使用vue实现调用本地打印机打印功能

import vueEasyPrint from "vue-easy-print";

1.导入 “vue-easy-print”
2.编写打印模板

<template>
 <div>
  <div >
   <!-- 分页 -->
   <div class='tab_company_out'>
    <table cellpadding='0' cellspacing='0'>
     <tr>
      <th width='5%'>用户昵称</th>
      <th width='25%'>归属部门</th>
      <th width='5%'>手机号码</th>
      <th width='10%'>邮箱</th>
      <th width='5%'>用户名称</th>
      <th width='8%'>用户性别</th>
      <th width='8%'>状态</th>
      <th width='12%'>岗位</th>
      <th width='12%'>角色</th>
      <th width='10%'>备注</th>
     </tr>
     <!-- 每页显示onePageRow条数据 -->
     <tr >
      <td>{{tableData.nickName}}</td>
      <td>{{tableData.deptId}}</td>
      <td>{{tableData.phonenumber}}</td>
      <td>{{tableData.email}}</td>
      <td>{{tableData.userName}}</td>
      <td>{{tableData.sex}}</td>
      <td>{{tableData.status}}</td>
      <td>{{tableData.userName}}</td>
      <td>{{tableData.userName}}</td>
      <td></td>
     </tr>

    </table>

   </div>
  </div>
 </div>
</template>


<script>
export default {
 name: "printUser",
 // 制作打印模版组件时,props区域尽量保留。
 props: {
 // 接受的打印数据
 tableData: {},

 // 每页多少行
 onePageRow: {
  type: Number,
  default: 5
 },
 // 是否插入空白行
 blankLines: {
  type: Boolean,
  default: true
 },
 getChineseNumber: Function // 求数字的中文写法,从easyPrint组件传入
 },
 computed: {
 pages() {
  console.log(this.tableData);
  // 求当前数据能打印的页数
  /* var pages_ = Math.ceil(this.tableData.detail.length / this.onePageRow); // 向上取整数*/
  // return pages_ <= 0 ? 1 : pages_;
  return 1;
 },
 chineseTotal() {
  // 计算中文合计,如果忘记传入
  return this.getChineseNumber != null
  ? this.getChineseNumber(this.tableData.total_amount)
  : "您还没有传入getChineseNumber";
 }
 },

 methods: {

 test() {
  console.log("21111111111111");
  console.log("test");
 }
 }
};
</script>

<style scoped>
* {
 padding: 0;
 margin: 0;
 list-style-type: none;
 font-family: "微软雅黑";
 font-size: 12px;
}

.tab_company_out {
 text-align: center;
 width: 100%;
 margin: auto;
 page-break-after: always;
}

h3 {
 font-size: 14px;
}

.dan {
 text-align: center;
 position: relative;
}

.dan span {
 position: absolute;
 right: 0;
}

p {
 overflow: hidden;
 padding: 10px 0;
}

p span {
 float: left;
}

p span ins {
 text-decoration: underline;
}

p time {
 float: right;
}

table {
 width: 100%;
 border: none;
 border-bottom: 1px solid #000;
}

table tr td {
 border: 1px solid #000;
 border-bottom: none;
 border-right: none;
 height: 20px;
 line-height: 20px;
}

table tr td:last-of-type,
table tr th:last-of-type {
 border-right: 1px solid #000;
}

table tr th {
 border-top: 1px solid #000;
 border-left: 1px solid #000;
 height: 22px;
 line-height: 22px;
 font-size: 12px;
}

table tr th:nth-child(2) {
 width: 0;
}

.lu {
 display: inline-block;
 padding-top: 10px;
}

.lu li {
 float: left;
 text-align: left;
 margin-right: 15px;
}

.lu li label {
 width: 100px;
 display: inline-block;
}

.lu li:last-of-type {
 margin-right: 0;
}

@page{
 size: auto A4 landscape;
 margin: 3mm;
}
</style>

3.在需要添加打印功能的界面引入打印模板

import printUser from "./printUser";

4.注册模板 printUser 和vueEasyPrint

components: { vueEasyPrint,printUser },

5.添加打印按钮。

el-button size="mini" type="text" icon="el-icon-edit" 
 @click="printDemo(scope.row)" v-hasPermi="['system:user:edit']" >打印
    **<vue-easy-print** tableShow ref="easyPrint" v-show="false" >
     <template slot-scope="func">
     **<print-user** :getChineseNumber="func.getChineseNumber" :tableData="tabledata">**</print-user>**
     </template>
    **</vue-easy-print>**
 </el-button>

6.将要打印的内容传值到模板

printDemo(row) {
  this.reset();
  const userId = row.userId || this.ids;
  getUser(userId).then(response => {
  this.tabledata = response.data;
  //注:此处使用延时的原因是,防止点击打印都,打印内容还未渲染到模板,导致打印页面显示空白。
  setTimeout(() =>{
   this.$refs.easyPrint.print();
  },100);
  });

 },

7.打印模板接收值并赋值到打印模板(打印模板可根据业务需求自行调整)

export default {
 name: "printUser",
 // 制作打印模版组件时,props区域尽量保留。
 props: {
 // 接受的打印数据,此处父子组件传值,在子组件(模板)定义一个对象(若为集合或者其他类型,自行定义)tableData,用于接收父组件传递的值,
 tableData: {},

 // 每页多少行
 onePageRow: {
  type: Number,
  default: 5
 },
 // 是否插入空白行
 blankLines: {
  type: Boolean,
  default: true
 },
 getChineseNumber: Function // 求数字的中文写法,从easyPrint组件传入
 },
 computed: {
 pages() {
  console.log(this.tableData);
  // 求当前数据能打印的页数
  /* var pages_ = Math.ceil(this.tableData.detail.length / this.onePageRow); // 向上取整数*/
  // return pages_ <= 0 ? 1 : pages_;
  return 1;
 },
 chineseTotal() {
  // 计算中文合计,如果忘记传入
  return this.getChineseNumber != null
  ? this.getChineseNumber(this.tableData.total_amount)
  : "您还没有传入getChineseNumber";
 }
 },

 methods: {

 test() {
  console.log("21111111111111");
  console.log("test");
 }
 }
};

实现功能的界面如下:

Vue实现浏览器打印功能的代码

Vue实现浏览器打印功能的代码

总结

到此这篇关于Vue实现浏览器打印功能的文章就介绍到这了,更多相关vue 浏览器打印内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
JS自定义滚动条效果
Mar 13 Javascript
基于JavaScript获取url参数2种方法
Apr 17 #Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 #Javascript
vue fetch中的.then()的正确使用方法
Apr 17 #Javascript
如何基于filter实现网站整体变灰功能
Apr 17 #Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 #Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 #Javascript
vue制作抓娃娃机的示例代码
Apr 17 #Javascript
You might like
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
PHP系统流量分析的程序
2006/10/09 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
Flask框架信号用法实例分析
2018/07/24 Python
浅析python的优势和不足之处
2018/11/20 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
python request 模块详细介绍
2020/11/10 Python
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
园林设计师自荐信
2013/11/18 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
租房协议书
2014/09/12 职场文书
2015年入党决心书
2015/02/05 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
2015年国庆节寄语
2015/08/17 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers