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. bootstrap小图标引用方法

    <span class="glyphicon glyphicon-search"></span> <span class="glyphico ...

  2. jenkins持续集成之Global Tool Configuration的配置

    Global Tool Configuration的配置过程: 1.点击系统管理2.点击 Global Tool Configuration3.必须配置: jdk git ant maven 1.点击 ...

  3. ThinkPhp数据缓存技术

    1.缓存初始化 在 ThinkPHP 中,有一个专门处理缓存的类:Cache.class.php(在Thinkphp/Library/Think/cache.class.php,其他的各种缓存类也在这 ...

  4. opencv常用函数备忘

    //显示图片 IplImage * src = cvLoadImage("xx.JPG"); cvNamedWindow(); cvShowImage("show_ima ...

  5. eclipse使用配置

    eclipse设置工作空间为UTF-8(适应中文,避免乱码) windows---preference---general---workspace,修改textfile encoding eclips ...

  6. 12、Semantic-UI之输入框

    12.1 基础输入框   在Semantic-UI中可以定义多个样式的输入框,可以将图片与输入框结合,输入提示信息文字,设置输入框的状态. 示例:定义基础输入框 用户名: <div class= ...

  7. JavaScript的词法作用域问题

    多年以前,当我怀揣着前端工程师的梦想时,曾经认真阅读过<JavaScript高级程序设计(第2版)>.里面有一个问题(P147),让我一直百思不得其解. function createFu ...

  8. MongoDB整理笔记のReplica Sets + Sharding

    MongoDB Auto-Sharding 解决了海量存储和动态扩容的问题,但离实际生产环境所需的高可靠.高可用还有些距离,所以有了"Replica Sets + Sharding" ...

  9. log4net 入门使用

    log4net 是dotnet平台下的一个日记记录组件. 一  NuGet中安装log4net包: 二 配置log4net.config文件 配置文件内容: <?xml version=&quo ...

  10. MVC4 Action 两种异步方式

    1. xxxAsync/xxxCompleted 组合方式异步,xxxCompleted  就是他的回调函数,在执行完 xxxAsync 后调用xxxCompleted  . 使用 异步方式必须继承A ...