安装使用

使用npm安装：npm install vue-print-nb --save

使用

1. 全局引用

   全局引入import  Print from "vue-print-nb"

   Vue.use(Print)

2. 页面使用

<div id="printForm"></div>
<!-- 直接绑定id -->
<el-button v-print="‘#printForm’" type="primary">打印</el-button>
<!-- 或者绑定打印对象
<el-button v-print="printObj" type="primary">打印</el-button>
-->
data(){
  return {
     printObj: {
        id: 'printForm', // 打印内容的id
        style:'@page {} @media print {}',
        extraHead: '<meta  http-equiv="Content-Language" content="zh-cn">',
      },
  }
}

纵向横向问题

在使用vue-print-nb打印时，发现打印出来的是横向，可是打印预览设置中找不到纵横向设置，printObj对象中设置style:'@page {} @media print {size: portrait;}',无效。最后在中设置

<style media="print">
  @page { size: portrait; margin: 2rem}
</style>

element-ui table表格数据无法显示完全的问题

element-table内容列缺失，解决办法：使用原生的table元素