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编写widget的一些技巧分享
Oct 28 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 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校验ISBN码的函数代码
2011/01/17 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
js计算页面刷新的次数
2009/07/20 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
详解Python中的四种队列
2018/05/21 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
python实现PCA降维的示例详解
2020/02/24 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
考试没考好检讨书
2014/01/31 职场文书
上班看电影检讨书
2014/02/12 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
党支部评议意见
2015/06/02 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
XX部保密工作制度范本
2019/08/27 职场文书