vue 打印功能

html:

<div ref="printdiv">

<el-form id="form" ref="form" :model="rtLotOrder" size="mini" :rules='rules' style="padding: 20px;">
    <el-row :gutter="24" size="mini" style="border:1px solid #ccc;border-right:0;border-bottom:0;">
        <el-col :lg="8" :sm="12" :xs="24" style="border-right:1px solid #ccc;border-bottom:1px solid #ccc;">
            <span style="display:inline-block;width: 100px;height: 36px;line-height:36px;border-right:1px solid #ccc;">工单编号</span>
            <span style="display:inline-block;padding-left: 15px;padding-right: 15px;height: 36px;line-height:36px;">{{rtLotOrder.sn}}</span>
        </el-col>
　　</el-row>
</el-form>

</div>

<el-button type="primary"  @click="printForm" size="mini">
    打印
</el-button>

JS: print () {
// if (this.formData.bd.len !== '') {
// if (this.formData.bd.begin === '' && this.formData.bd.end === '') {
// return this.$Notice.error({
// title: '手动填入请确认填入收尾端长度'
// });
// } else if (this.formData.bd.end * 1 - this.formData.bd.begin * 1 !== this.formData.bd.len * 1) {
// return this.$Notice.error({
// title: '长度异常'
// });
// } else if (this.formData.bd.end * 1 < this.formData.bd.begin * 1) {
// return this.$Notice.error({
// title: '确保尾端长度大于首端长度'
// });
// }
// }
let newDom = this.$refs.printPart.innerHTML;
let wind = window.open();
wind.document.body.style.width = '100%';
wind.document.body.style.margin = '0';
wind.document.body.style.position = 'relative';
wind.document.body.style.fontSize = '6px';
wind.document.body.innerHTML = newDom;
setTimeout(function () {
wind.print();
}, 200);
}

说明： 如果是form打印不出来，需要外层加个div；另个打印的页面需要写行内样式，否则不起作用，如果有更好的方法，希望告诉我一下，共同进步 ；