vue 打印

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>