第一种方法:通过npm 安装插件

1,安装  npm install vue-print-nb --save

2,引入  安装好以后在main.js文件中引入

import Print from 'vue-print-nb'

  Vue.use(Print);  //注册

3,现在就可以使用了

       <div id="printTest" >

      <p>明月照于山间</p>

      <p>清风来于江上 </p>

    </div>

    <button v-print="'#printTest'">打印</button>        

4.如需通过链接地址打印:window.location.href = airway_bill;  airway_bill为链接地址。

5.如果内容打印不全,在打印操作时点击更多设置,然后设置缩放。

第二种方法:手动下载插件到本地

插件地址:https://github.com/xyl66/vuePlugs_printjs

1.在src下新建文件夹plugs,将下载好的print.js放入plugs文件夹下,然后操作如下

import Print from '@/plugs/print'
Vue.use(Print) // 注册
<template>
  <section ref="print">
    打印内容
    <div class="no-print">不要打印我</div>
  </section>
</template>
this.$print(this.$refs.print) // 使用

2.注意事项 需使用ref获取dom节点,若直接通过id或class获取则webpack打包部署后打印内容为空

3.指定不打印区域

方法1. 添加no-print样式类

<div class="no-print">不要打印我</div>

方法2. 自定义类名

<div class="do-not-print-me-xxx">不要打印我</div>
this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用

vue实现打印功能的两种方法的更多相关文章

  1. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  2. java打印等腰三角形的两种方法!(根据行数,根据底边长度)

    首先来看根据用户输入的底边的长度判断: package cn.edu.nwpu.java; import java.util.Scanner; public class IsoscelesTriang ...

  3. Android下打印堆栈的两种方法

    1. for(StackTraceElement i:Thread.currentThread().getStackTrace()){ System.out.println(i); } 2. Log. ...

  4. 解决vue项目eslint校验 Do not use 'new' for side effects 的两种方法

    import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ el: '#app' ...

  5. Vue 创建组件的两种方法

    地址:https://blog.csdn.net/cofecode/article/details/74634301 创建组件的两种方法 1.全局注册 2.局部注册 var child=Vue.ext ...

  6. 两种方法使vue实现jQuery调用

    引言 如果说vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞.MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作.而vue的渐进式开发(逐步引用组件,按 ...

  7. vue里使用element饿了么的el-menu+vue-router实现路由跳转的两种方法

    最近准备写一个echarts的可视化展示案例,首先用vue-cli3创建了一个项目(好像vue-cli4也出来,感觉变化不大,就没升级了) 然后,开始配置路由↓下面是我的router.js文件 imp ...

  8. R语言中将hello打印10次的两种方法

    我们有两种方法来做这件事情: 1.for结构 for循环重复的执行一个语句,直到某个变量的值不再包含在序列seq中为止. 语法: for (var in seq) statement 例如: > ...

  9. python中执行shell的两种方法总结

    这篇文章主要介绍了python中执行shell的两种方法,有两种方法可以在Python中执行SHELL程序,方法一是使用Python的commands包,方法二则是使用subprocess包,这两个包 ...

随机推荐

  1. iOS学习—— UISearchBar的使用

    转载自:http://blog.sina.com.cn/s/blog_7b9d64af0101dfg8.html 最近用到搜索功能.于是,经过不断的研究,终于,有点懂了. 那就来总结一下吧,好记性不如 ...

  2. CentOS6.9下离线部署Django项目

    最近项目服务器变动,研究了CentOS6.9下httpd2.4+django1.11.16+python3.6+PostgreSQL的部署,之前还有一个ubuntu16.04下的部署等以后整理好后再来 ...

  3. 我的.gitignore下配置。存在这里一下。日后有空研究研究!

    .DS_Storenode_modules/dist/yxxt/npm-debug.log*yarn-debug.log*yarn-error.log* # Editor directories an ...

  4. pytthon—day8 读写模式的结合、文件操作模式、with完成文本文件复制、游标操作

    一.读写模式的结合 w:写指没有新建文件,有文件就清空 w=open('1.txt','w',encoding='utf-8') w.write('000\n') 在写入数据时,需要及时处理内存空间, ...

  5. java基础(十七)----- 浅谈Java中的深拷贝和浅拷贝 —— 面试必问

    假如说你想复制一个简单变量.很简单: int apples = 5; int pears = apples; 不仅仅是int类型,其它七种原始数据类型(boolean,char,byte,short, ...

  6. 从零开始学习PYTHON3讲义(八)列表类型跟冒泡排序

    <从零开始PYTHON3>第八讲 ​前面我们见过了不少的小程序,也见过了不少不同类型的变量使用的方法.但目前我们涉及到的,还都是单个的变量和单个的立即数.以变量来说,目前我们见到的,基本都 ...

  7. opensuse使用zypper安装软件

    安装软件(opensuse) opensuse 通过zypper可以方便的进行软件管理,类似centos的yum 软件. 命令参考 软件包操作 搜索软件 zypper search package 安 ...

  8. SyntaxHighlighter 代码高亮极简单配置

    页首Html代码: <!--<link type="text/css" rel="stylesheet" href="https://bl ...

  9. demo_1

    我练习的demo是基于SSM+MySQL+Eclipse+Tomcat8+Maven3实现的: 创建项目 ## 创建Maven Project: Artifact Id: cn.com.demo    ...

  10. wpf,visibility属性的多元素绑定及值转换

    visibility实现多元素绑定. 实现多绑定转换 public class VisibilityConverter : IMultiValueConverter { public object C ...