vue-print-nb插件的使用

vue-print-nb插件的使用

---

前言

vue-print-nb插件打印的简单使用

一、下载插件

npm i vue-print-nb

二、main.js中引入

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

三、使用

1)创建打印内容，对最外层盒子设置id,

 <div id="myPrint">
 打印内容
 </div>

2)设置打印按钮,使用v-print指令绑定打印内容盒子的id

<button v-print="printObj">打印</button>

3）点击打印按钮即可弹出打印设置

四、使用中的一些问题

1. 打印样式预览, 多一页空白纸问题

//页面中增加如下代码
<style @media="print">
  @page {
    size: auto;
    margin: 3mm;
}
 
html {
    background-color: #ffffff;
    height: auto;
    margin: 0px;
  }
</style> 

2.打印表格内边框不显示问题

解决一: 直接::deep 穿透自己补上去, 有效, 查找结果是说, 是因为打印的时候样式被覆盖了
解决二: 这种方法仅限于, 类似vex-table这种边框是用背景图片画的, 勾选背景图形即可