window.print()+element-ui实现前端打印功能_elementui 使用 window.print();

由于在DOM上，el-input中的值没有在元素内，直接打印会出现没有值的情况，所以可以加个变量做判断，打印时改变成纯文本，这样就解决啦！

<el-button class="text-right" @click="handlePrint()">打印</el-button>
1

<el-form-item label="整改情况:" prop="action">
  <el-input
    v-if="printFlag"
    v-model="editQuery.action"
    type="textarea"
    :autosize="{ minRows: 2, maxRows: 99}"
    placeholder="请输入整改情况"
    :disabled="isDisabled"
  />
  <el-input
    v-if="!printFlag"
    v-text="editQuery.action"
  />
</el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

handlePrint() {
  // 清空必填项校验，防止用户点了，但没输入，会出现红字
  this.$refs['editQuery'].clearValidate()
  // 变量改变
  this.printFlag = false
  this.$nextTick(() => {
    let newstr = document.getElementById("printArea").innerHTML
    let oldstr = document.body.innerHTML
    document.body.innerHTML = newstr
    window.print()
    document.body.innerHTML = oldstr
    // 页面重载，不然页面的方法会全失效
    window.location.reload()
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15