前端打印避免截断解决方案

应项目要求需要实现前端打印二维码的需求，由于之前这些操作由后端生成二维码再一 一拼接成一个word文件 速度非常慢，于是将操作交给前端来实现，也是花了不少时间实现了打印且不截断的效果，话不多说，直接上代码

<template>
	<div class="main">
		<el-dialog title="666" :visible.sync="show">
			<button v-print="'#print'">666</button>
			<div class="container" id="print">
				<div class="content" v-for="(item,index) in items">
					<img src="../assets/exper-kr-pic-QRCODE380.jpg">
					<span>学校</span>
					<span>年级班级</span>
					<span>学生</span>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				show:true,
				items:980
			}
		}
	}
</script>

<style>
	.el-dialog__header{
		border-bottom: 1px solid #eee;
	}
	.el-dialog__body{
		height: 600px;
		overflow-y: scroll;
	}
	.container{
		width: 100%;
		position: relative;
		page-break-after: always; //分页
	}
	.content{
		width: 16%;
		display:flex;
		flex-direction: column;
		position: relative;
		float: left;
		page-break-inside:avoid; //防截断
	}
	.content img{
		width: 100%;
	}
	.content span{
		width: 100%;
		text-align: center;
	}
</style>

*需注意：page-break-after: always; page-break-inside:avoid;  这两个css样式需在未定义display:flex/flex-box/block/inline-block；的情况下生效，否则无效！！！！！

插件用的是vue-print-nb

安装方法：

npm install vue-print-nb --save   【vue2 版本】

npm install vue3-print-nb --save  【vue3 版本】

安装之后在main.js中引入它

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import Print from 'vue-print-nb' //引入vue-print-nb插件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Print) //使用vue-print-nb插件
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

用法：通过v-print=" '#print' "绑定

<template>
	<div class="main">
		<el-dialog title="666" :visible.sync="show">
			<button v-print="'#print'">666</button>
            <!-- v-print绑定一个元素的ID属性 -->
			<div class="container" id="print">
				
			</div>
		</el-dialog>
	</div>
</template>