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 相关文章推荐
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
javascript读写json示例
Apr 11 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 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
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
如何让CI框架支持service层
2014/10/29 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
Python转码问题的解决方法
2008/10/07 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
编写strcpy函数
2014/06/24 面试题
高三生物教学反思
2014/01/25 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
2014年施工员工作总结
2014/11/18 职场文书
年终工作总结范文2014
2014/11/27 职场文书
催款函范文
2015/06/24 职场文书
结婚典礼主持词
2015/06/29 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python