vue 方法

第一种方法:通过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>
<p>粒粒皆辛苦</p>
</div>
<button v-print="'#printTest'">打印</button>

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

验证:vue-print-nb 使用某些浏览器点击没效果(不知道什么原因)

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

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

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

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

指定不打印区域

方法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'}) // 使用

未试验: print.js  、vue-easy-print

jquery 方法

jquery-print.js

1、index.html 引入

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jQuery.print/1.5.0/jQuery.print.min.js"></script>

2、webpack.base.conf.js

externals: {
"vue": "Vue",
"element-ui": "ELEMENT",
'jquery':'window.jQuery'

注:需要全局话jQuery。

3、使用

$("#printObject").print();

jquery.jqprint.js

使用方法同上。

javascript 方法

页面打印

function printPage(){// 此处函数名不能为print,因为会与window.print()形成无限递归
window.print();
}

区域打印

准备工作:用:<!- -startprint- ->和<!- -endprint- ->“圈”住要打印的代码段

function printArea(){
var bdHtml=window.document.body.innerHTML;
var sprnstr="<!--startprint-->";
var eprnstr="<!--endprint-->";
var prnHtml=bdHtml.substring(bdHtml.indexOf(sprnstr)+17);/*去掉前面的部分*/
prnHtml=prnHtml.substring(0, prnHtml.indexOf(eprnstr));/*去掉后面的部分*/
var myWindow=window.open('', '', '');/*打开新的浏览器窗口(选项卡)*/
myWindow.document.body.innerHTML=prnHtml;
myWindow.print();
}

注意:CSS的@media print{} 控制打印时的样式、或者写在元素上

分页:<div style="page-break-before:always;"><br /></div>

vue 打印的更多相关文章

  1. vue打印html

    # vue打印功能 console.log(data.doPrint); // html字符串 let newContent =data.doPrint; let oldContent = docum ...

  2. vue 打印页面部分区域

    1. vue项目打印页面部分区域 2. 原生js实现页面局部打印功能 3. vue项目中将table组件导出Excel表格以及打印页面内容

  3. vue 打印html

    1.https://github.com/xyl66/vuePlugs_printjs从这个路径下载print.js.放到你的代码中 2.我是放到我本地一个js文件中. 3.引入当前文件 //打印插件 ...

  4. vue 打印功能

    printContent (e) { let subOutputRankPrint = document.getElementById('subOutputRank-print') console.l ...

  5. VUE—打印(原生态网页打印)

    //打印触发的方法 print(e){ let subOutputRankPrin = document.getElementById('printcode'); var options = { fo ...

  6. Vue 打印预览功能

    需求有几种情况: 1.直接在HTML写页面,将页面上的东西用A4纸打印出来: 2.后台传回PDF文件,前台浏览器预览并打印: 3.后台做好要打印的,传回图片,如base64编码,前台浏览器 预览并打印 ...

  7. vue 打印 页面特定部分转pdf

    https://www.jb51.net/article/147040.htm https://www.jianshu.com/p/dd120b65446a  //转pdf

  8. 使用那各VUE的打印功能(print.js)出现多打印一个空白页的问题

    最近这段时间,用VUE写东西,有个打印功能. 百度了一下,铺天盖地的VUE打印的两种实现方法. 很感激这些千篇一律的帖子,虽然不知道他们是否真的用过,还是只是复制粘贴. 至少这些帖子告诉我,是有两个可 ...

  9. 深入理解vue

    一 理解vue的核心理念 使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全. 倘若用一句话来概括vue,那么我首先想到 ...

随机推荐

  1. python report中文显示乱码

    环境:python2.7 测试框架: nose (1.3.7) nose-html-reporting (0.2.3) 问题:生成测试报告失败的时候,报告会抓取代码中的print,打开后看到的中文是乱 ...

  2. C++学习--入口函数

    在学习第一个C++程序的时候发现控制台程序的入口函数是int _tmain而不是main,查了资料才发现_tmain()是为了支持unicode所使用的main一个别名,宏定义在<stdafx. ...

  3. mybatis 存储过程调用

    接口 UserInfoMapper.java xml   UserInfoMapper.xml 如何关联 <?xml version="1.0" encoding=" ...

  4. C++11中的to_string

    C++11之前,标准库没有提供数字类型转字符串的函数,需要借助sprintf.stringstream等,现在C++11提供了std::to_string函数,可以直接使用了: 点击(此处)折叠或打开 ...

  5. Alpha冲刺(九)

    Information: 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Details: 组员1(组长)柯奇豪 过去两天完成了哪些任务 进一步优化代码,结合自己负责的部分修 ...

  6. HashMap的小试牛刀

    HashMap的介绍 import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.ut ...

  7. PyCharm社区版+Django搭建web开发环境-1

    PyCharm开源社区版不像商业版那样可以直接通过Django来创建项目,必须通过以下几个步骤进行: 1. 创建项目:在cmd命令行下输入:django-admin startproject Demo ...

  8. 多线程“尚未调用coinitialize” 报错

    关于多线程中创建使用TADOConnect.TADODataSet等Com组件时,必须先初始化Com 在多线程启用执行前 CoInitialize(nil); 在多线程启用执行后 CoUninitia ...

  9. [转]java设计模式

    设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...

  10. pipeline+sonar

    前提需要在项目根目录下新建sonar-project.properties文件,内容如下: # must be unique in a given SonarQube instance sonar.p ...