vue2如何区域打印

首先安装vue-print-nb

	npm i vue-print-nb -s

在main.js 中全局引入

import Print from 'vue-print-nb'
Vue.use(Print)

在需要打印的标签上给个id,
在需要触发打印的地方写上触发方法

<div id="printThis">
	打印这里
</div>
<button v-print='print'>点我打印</button>

在data里设置打印参数

data(){
	return{
		print:{
			// 常用参数就两个
			id:'printThis',//需要打印的标签id
			extraCss:'./print.css',//新建一个print.css放在public里面,

			//其他没啥用的参数-时态
			beforeOpenCallback:()=>{},//打开打印窗口前
			openCallback:()=>{},//打开打印窗口时
			closeCallback:()=>{},//打开打印窗口后
			

			/*
				其他没啥用的参数--预览
				这个预览不是window自带的预览而是一个覆盖全局的div
				带样式显示你要打印的东西
			*/
			 preview: false, // 是否开启预览，默认false
			 previewTitle:'打印一下',//预览页面的标题
			 previewPrintBtnLabel:'打印',//预览页面的打印按钮文字，
			 zIndex:20002,//预览页面的z轴
			 previewBeforeOpenCallback:()=>{},//打开预览窗口前
			 previewOpenCallback :()=>{},//已经打开预览窗口
			 
			 //其他没啥用的类型---是真没啥用
			 standard:'HTML5',//打印的文本类型，可以不设置，可选 HTML5/loose/strict
			 extraHead:'',//打印头部，可以在window自带的打印预览中取消显示这个
			 clickMounted:()=>{},//点了v-print之后除了打印还能干点别的
			 url:'',//打印别的页面,不同源打不开，没有测试过和id放一起会出现什么问题
			 asyncUrl:''//异步打印别的页面，同上
			 
		}
	}
}

踩坑注意

1.打印总是多一个空白页

在带id的标签上加一个透明边框

border:1px soild transparent;

2.页面上有需要隐藏的东西

在public/index.html中写入一个样式

	@media print {
        .noprint{
          display: none;
        }
      }

虽然插件本身就自带这个样式，但不知道为什么没有生效，需要自己写一个