element ui+vue实现打印_vue elementui 打印

1.安装组件

//安装print-js
npm install print-js --save
//删除print-js
npm uninstall print-js
//安装固定版本
npm install print-js@版本号 --save
// 全局安装
npm install print-js --save -g

2.在页面引入组件

import print from 'print-js'

3.自己实现子组件打印页面

4.在需要打印的页面引入子组件

//注册
 components:{
    printTable
  },

//页面注册 
<printTable v-show="false" ref="mychild"></printTable>
//通过页面按钮 触发打印
<el-button  size="small" plain type="primary" @click="handlePrint(scope.row)">打印销售单</el-button>
//通过this.$refs获取子组件进行交互
handlePrint(row) {
      this.$refs.mychild.CreateOneFormPage(row) },

5.子组件中的方法

//案例
printTables(){
        print({
          printable: 'printJS-form',
          type: 'html',
          // scanStyles: false,
          style: 'table tr td,th { border-collapse: collapse;padding: 0 10px;border:1px  solid}',
          targetStyles: ['*'],
          maxWidth:1100
        })
    },
     CreateOneFormPage(msg) {
      new Promise((resolve,reject)=>{
        this.printData=msg
        //根据传过来的值做一些异步的交互任务
      }).then(()=>{
        this.printTables()
      })
    },

          在异步交互任务中会出现点击打印然后数据没有同步到一起。参考我的另外一篇文章注册宏任务与微任务解决，上面通过new Promise()将打印任务注册为微任务  实现了异步交互

vue中关于异步交互数据出现延迟问题