element 实现打印功能

npm install print-js --save

import print from 'print-js'

el-button @click="PrintRow(scope.row)" type="text" size="small">打印el-button>

div id="printDOMElement">

        table border="1" style="border-collapse: collapse; width:100%">

          tr >th>11th>th>22th>tr>

           tr >td style="text-align: center; font-weight: bold;">dsadtd>td>dsadtd>tr>

           tr >td>dsad11td>td>dsad22td>tr>

        table>

         div>

// 打印功能          如果数据有多余的不想要记得重新建个列表或者容器 定义id就行   

            PrintRow() {

                

 var div = document.getElementById("printDOMElement")

                let newHTML = '<table border="1" style="border-collapse: collapse; width:100%"><tr ><th>11</th><th>22</th></tr>'

                for (let i = 0, len = this.tableData.length; i < len; i++) {

                    newHTML += '<tr ><td style="text-align: center; ">' + this.tableData[i].id + '</td>'+'<td style="text-align: center;">' + this.tableData[i].name + '</td>'+'</tr>'

                }

                newHTML += '</table>'

                div.insertAdjacentHTML('afterbegin', newHTML)

                print({

                    printable: "printDOMElement",

                    type: 'html',

                    scanStyles: false,

                    // style: 'table { border-collapse: collapse }'

style:"@page {margin:0 10mm}"

                    style: 'table,table td{border:1px solid #EBEEF5;height:40px;}' // 表格样式

                })

                div.innerHTML=""

            },

https://www.jianshu.com/p/f6f09dd9f7db