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 相关文章推荐
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python计算书页码的统计数字问题实例
2014/09/26 Python
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
食品营养与检测应届生求职信
2013/11/08 职场文书
酒店保洁主管岗位职责
2013/11/28 职场文书
简历的自我评价
2014/02/03 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书