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)
// 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')
// 2. 自定义指令
import print from 'vue3-print-nb'
directives: {
print
}
3、在组件中使用
注意:一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id
<t-button v-print="printContent">打印</t-button>
<div style="display: none">
<div id="printDiv">
<div v-for="(item, index) in aaa" :key="index" style="page-break-after: always; color: #000">
<div style="text-align: center; margin: 40px 0 20px 0; font-size: 30px">
服务确认表
</div>
<div style="border: 1px solid #000; margin: 0 auto; margin-top: 20px">
<div style="width: 100%; display: flex; border-bottom: 1px solid #000">
<div style="width: 45%; padding: 5px 5px; border-right: 1px solid #000">
参保人姓名:{{ item?.name || 'hhh' }}
</div>
<div style="padding: 5px 5px">参保人身份证号:{{ item.id_card }}</div>
</div>
<div style="padding: 5px 5px; border-bottom: 1px solid #000">
辅具类定点服务机构:
</div>
<div style="padding: 5px 5px; text-align: center; border-bottom: 1px solid #000">辅具服务确认</div>
<div style="display: flex; border-bottom: 1px solid #000">
<div class="classifier">
类别:
<p><t-checkbox />初次配置</p>
<p><t-checkbox />续租</p>
<p><t-checkbox />续买</p>
<p><t-checkbox />恢复服务</p>
</div>
<div style="width: 80%">
<div v-for="(good_item, good_index) in goods_List" :key="good_index" style="padding: 5px 5px">
<div style="vertical-align: bottom; display: flex; flex-wrap: wrap; padding: 4px 0">
<t-checkbox />{{ `${good_index + 1}、${good_item.good_name};` }}生产厂家:
<div class="goods_item"></div>
;品牌名称:
<div class="goods_item"></div>
;型号:
<div class="goods_item"></div>
;使用期限:
<div class="goods_item"></div>
<div v-if="good_item.goods_type == 2" style="display: flex">
;数量:
<div class="goods_item"></div>
</div>
</div>
</div>
<div style="padding: 5px 5px">
共确认
<span style="text-decoration: underline">
{{ goods_List.length }}
</span>
类
</div>
</div>
</div>
<div class="aaa">
<div class="item"><t-checkbox /> 已安装</div>
<div style="padding: 5px 5px"><t-checkbox />已进行使用指导</div>
</div>
<div class="aaa">
<div class="item">工作人员:</div>
<div style="padding: 5px 5px">送到日期:</div>
</div>
<div class="aaa">
<div class="item">参保人员或代理人签字确认:</div>
<div style="padding: 5px 5px">安装日期:</div>
</div>
<div style="padding: 5px 5px">
使用此表进行辅具器具初次配置、续租、续买、暂停后恢复服务的辅具器具配置确认
</div>
</div>
</div>
</div>
</div>
const printContent = ref({
id: 'printDiv',
// preview: true, // 预览工具是否启用
// previewTitle: '', // 预览页面的标题
popTitle: '', // 打印页面的页眉
});
const aaa = ref([
{ name: '肖1', id_card: '111' },
{ name: '肖2', id_card: '222' },
{ name: '肖3', id_card: '333' },
]);
const goods_List = ref([
{ good_name: '电动护理床', good_num: 1, goods_type: 1 },
{ good_name: '手动轮椅车', good_num: 1, goods_type: 1 },
{ good_name: '浴厕轮椅', good_num: 1, goods_type: 1 },
{ good_name: '坐便椅', good_num: 2, goods_type: 1 },
{ good_name: '助行器', good_num: 1, goods_type: 1 },
{ good_name: '充气防褥疮床垫', good_num: 1, goods_type: 1 },
{ good_name: '三角垫、看护垫', good_num: 1, goods_type: 1 },
{ good_name: '成人纸尿裤', good_num: 2, goods_type: 2 },
{ good_name: '护理垫', good_num: 2, goods_type: 2 },
]);
4、vue-print-nb插件优化
1.去掉页眉页脚
<style lang="scss" scoped>
@page {
size: auto;
margin: 0mm;
}
</style>
2.打印內容不自动换行问题
只需要给不自动换行的标签加上 word-wrap:break-word; 即可。
<style lang="scss" scoped>
.procedure{
word-wrap:break-word;
}
</style>
3. 样式布局不生效问题
<style lang="scss">
@media print {
//样式写在这里面
}
.title {
word-wrap:break-word; //内容不自动换行问题
}
</style>
样式图: