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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
eslint 的三大通用规则详解
May 16 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
JavaScript中的宏任务和微任务详情
Nov 27 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操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
ECMAScript 基础知识
2007/06/29 Javascript
关于JavaScript的一些看法
2009/05/27 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
node.js超时timeout详解
2014/11/26 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
react redux入门示例
2018/04/19 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
从零学Python之入门(四)运算
2014/05/27 Python
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
django解决跨域请求的问题
2018/11/11 Python
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
七一表彰活动方案
2014/01/18 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
工作检讨书范文
2015/01/23 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python