vue中使用vue-print.js实现多页打印


Posted in Javascript onMarch 05, 2020

本文主要介绍了vue项目中使用print.js打印,解决多页,分页,打印预览样式修改等问题。

引入安装vue-print.js

cnpm i vue-printjs --save-dev

解决打印多页只出现一页问题

由于打印插件存在问题,如果打印文件超出一页,只显示一页,所以我们需要修改print.js源文件,所以只能手动下载vue-print.js到本地,做一些修改,然后引入到项目中,不能使用npm安装

下载 print.js

https://github.com/zxc19890923/print/blob/master/print.js
在src目录下面创建plugins/print/Print.js文件保存插件内容

修改 print.js

// 搜索getStyle方法,添加:str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";

 getStyle: function () {
  var str = "",
   styles = document.querySelectorAll('style,link');
  for (var i = 0; i < styles.length; i++) {
   str += styles[i].outerHTML;
  }
  str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
  str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";

  return str;
 },

main.js中引入插件

...
import Print from './plugins/print/Print'
Vue.use(Print)

vue文件中的使用

<div class="show">
    这是展示的需要打印的内容,给用户看的。
  </div>
  <div ref="print" class="recordImg" id="print">
    这里是需要打印的内容,出现在打印预览的界面,这里的样式需要写在 @media print {}里面 如果需要设置预览页规则,页脚等样式 @page {} 
    <div class="no-print">不需要打印的内容</div>
    <div class="do-not-print-div">不要打印我</div> 
    <button @click="printContext">打印</button>
  </div>
  ...
  <script>
    ...
    method: {
      printContext () {
        this.$print(this.$refs.print)
      }
      // 不打印方法1. 添加no-print样式类
      // 不打印方法2. this.$print(this.$refs.print,{'no-print':'.do-not-print-div'})
    }
  </script>

最后
1、为了打印全部,手动下载插件并修改。
2、打印内容样式需要写在 @media print {}中
3、this.$print(),不需要打印内容可以通过css,js两种方法控制。

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

Javascript 相关文章推荐
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
JS实现音乐导航特效
Jan 06 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
koa2的中间件功能及应用示例
Mar 05 #Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 #Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 #Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 #Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
Mar 04 #Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 #Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 #Javascript
You might like
用穿越火线快速入门php面向对象
2012/02/22 PHP
简单的php文件上传(实例)
2013/10/27 PHP
jQuery前台数据获取实现代码
2011/03/16 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
python元组操作实例解析
2014/09/23 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
使用Python来开发微信功能
2018/06/13 Python
简单谈谈python基本数据类型
2018/09/26 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
python3去掉string中的标点符号方法
2019/01/22 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
运动会广播稿100字
2014/01/11 职场文书
世界气象日活动总结
2015/02/27 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL