前端打印在预览中出现分页问题，折行 空行 只能打印单页等

Question

问题描述：

在项目中测试前端打印出现折行、空行、分页错误错乱、或只能打印单页的问题。详情看下图效果。求解！！

相关代码：

template

<div class="doc-print" ref="print">
  <h1 class="doc-title" v-if="title">{{ title }}</h1>
  <div class="doc-form">
    <el-col :span="item.span || 12" v-for="(item, index) in formOption.column" :key="index">
      <div class="doc-form-item">
        <span class="title" v-text="`${item.label}: `" :style="{width: formOption.labelWidth}"></span>
        <span class="text" v-text="formData[item.prop] ? formData[item.prop] : ''"></span>
      </div>
    </el-col>
  </div>
  <div class="doc-table">
    <table border="1" cellpadding="0" cellspacing="0" borderColor="#000000">
      <thead style="display:table-header-group">
        <tr>
          <th v-for="item in tableOption" :key="item.prop">
            {{ item.label }}
          </th>
          <th class="space">备注</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index" class="A4">
          <td v-for="prop in tableOption" :key="prop.prop">
            <template v-if="prop.prop === 'index'" class="index">{{ index+1 }}</template>
            <template v-else>
              {{ item[prop.prop] || "" }}
            </template>
          </td>
          <td class="space"></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="doc-autograph">
    签名或盖章：
  </div>
</div>

script

// 打印主程序js
import print from "@/util/print"
Vue.use(print)

// 调用打印
print () {
  this.$print(this.$refs.print)
},

浏览器效果

火狐浏览器 （只能打印一页 无其他异常）

谷歌浏览器 （出现断行 第二页分页异常）

360浏览器 （换页没换纸 两页内容贴在一起）