1. vue-print-nb 설치
Vue2.0 버전 설치 방법:
npm install vue-print-nb --save
Vue3.0 버전 설치 방법:
npm install vue3-print-nb --save
2. Vue 프로젝트 소개
Vue2.0 도입 방법:
// 1. 全局挂载
import Print from 'vue-print-nb'
Vue.use(Print)
// or
// 2. 自定义指令
import print from 'vue-print-nb'
directives: {
print
}
Vue3.0 도입 방법:
// 1. 全局挂载
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')
// or
// 2. 自定义指令
import print from 'vue3-print-nb'
directives: {
print
}
셋째, 구성 요소에 사용
注意:一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id
<!--//通过按钮来调用-->
<el-button type="primary" @click="dialogVisible" v-print="printObj">打印</el-button>
<!--//需要打印的页面-->
<div id="printMe" ref="printContent">
<div class="hammer">
<h3>黄山市机动车排放维修治理(M)站竣工出厂合格证</h3>
</div>
<!-- //内容 -->
<div class="trail">
<p>该车经我站治理维护,准予出厂。</p>
</div>
</div>
데이터 반환에서
name: "print",
data() {
return {
pageList: [],
status: false,
printObj: {
id: "myPrint", // 这里是要打印元素的ID
popTitle: " ", // 打印的标题
extraCss: "", // 打印可引入外部的一个 css 文件
extraHead: "", // 打印头部文字
},
};
},
vue-print-nb插件的一些优化
1. 머리글과 바닥글 제거
<style>
@page {
size: auto;
margin: 0mm;
}
</style>
2. 인쇄 내용이 자동으로 포장되지 않는 문제
자동으로 포장되지 않는 라벨을 추가하면 됩니다 word-wrap:break-word;
.
<style>
.procedure{
word-wrap:break-word;
}
</style>