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 相关文章推荐
Js四则运算函数代码
Jul 21 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
Jquery使用val方法读写value值
May 18 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
layui动态表头的实现代码
Aug 22 Javascript
QML实现圆环颜色选择器
Sep 25 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技巧小结【推荐】
2017/01/19 PHP
PHP培训要多少钱
2017/06/06 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
在Django的模板中使用认证数据的方法
2015/07/23 Python
python生成验证码图片代码分享
2016/01/28 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
Keras设置以及获取权重的实现
2020/06/19 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
如何利用find命令查找文件
2015/02/07 面试题
创业计划书撰写原则
2014/01/25 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
团组织推优材料
2014/12/29 职场文书
普宁寺导游词
2015/02/04 职场文书
警示教育观后感
2015/06/17 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
导游词之山东孔庙
2019/11/04 职场文书