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 相关文章推荐
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
JQuery 解析多维的Json数据格式
Nov 02 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
js倒计时简单实现代码
Aug 11 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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
农民C键的运用技巧
2020/03/04 星际争霸
常用的php对象类型判断
2008/08/27 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
javascript判断复选框是否选中的方法
2015/10/16 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
python执行外部程序的常用方法小结
2015/03/21 Python
Python玩转Excel的读写改实例
2019/02/22 Python
浅谈python中get pass用法
2019/03/19 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
python pycharm的安装及其使用
2019/10/11 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
煤矿开采专业求职信
2014/07/08 职场文书
2014年司法所工作总结
2014/11/22 职场文书
2015年工会工作总结
2015/03/30 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
如何利用React实现图片识别App
2022/02/18 Javascript
Python实现双向链表基本操作
2022/05/25 Python