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

衬酸

于 2024-01-05 09:00:45 发布

阅读量714

点赞数 6

文章标签：前端 ui vue.js

本文链接：https://blog.csdn.net/qq_39500287/article/details/135400445

版权

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

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

<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>

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()
  })
}