Vue详情页面el-row el-col做出word样式效果和打印（element-ui）

场景：

        业务给了个word文档，然后说要前端可以看到样式如文档，并且可以打印出来

记录一下：

         element-ui word表格样式详情页面 vue页面打印，更细的内容可以查看下面两篇文章原文！

样式参考文章：

elementUI自定义查看详情组件_element ui 详情页面_三线码工的博客-CSDN博客

打印参考文章：

Vue项目中将table组件导出Excel表格以及打印页面内容 | 导出

参考做了如下页面：

 代码：

<template>
      <el-dialog  :visible.sync="visible" :append-to-body="true"  width="50%"  lock-scroll :close-on-click-modal="false">
         <div style="width:90%;padding-left:15px;height:100%;margin-bottom: 20px;" id="printContent">

          <!-- 样式参考 https://blog.csdn.net/qq_35946021/article/details/125746634 -->
            <h2 style="text-align:center">亲爱的热爱的</h2>

            <el-row style="margin-bottom:10px;">
               <span>编号：{{data.id }}</span>
               <span style="float:right">{{  data.year}}年{{ data.month }}月{{data.month}}日</span>
            </el-row>
            
            <el-row>
                <el-col :span="12" class="col"><div class="title">女演员</div><div class="val">{{data.name}}</div></el-col>      
                <el-col :span="12" class="col"><div class="title">性别</div><div class="val">{{data.gender=='0'?'男':'女'}}</div></el-col>      
            </el-row>

            <el-row>
                <el-col :span="12" class="col"><div class="title">出生日期</div><div class="val">{{data.birthday}}</div></el-col>      
                <el-col :span="12" class="col"><div class="title">联系电话</div><div class="val">{{data.mobile}}</div></el-col>      
            </el-row>

            <el-row>
                <el-col :span="24" class="col"><div class="title">角色名</div><div class="val"><span style="color:red;">❤</span>佟年<span style="color:red;">❤</span>我好喜欢佟年，软萌佟年爱一生<span style="color:red;">❤</span></div></el-col>      
            </el-row>

            <el-row>
                <el-col :span="12" class="col"><div class="title">男演员</div><div class="val">{{data.name1}}</div></el-col>      
                <el-col :span="12" class="col"><div class="title">性别</div><div class="val">{{data.gender1=='0'?'男':'女'}}</div></el-col>      
            </el-row>

            <el-row>
                <el-col :span="12" class="col"><div class="title">出生日期</div><div class="val">{{data.birthday1}}</div></el-col>      
                <el-col :span="12" class="col"><div class="title">联系电话</div><div class="val">{{data.mobile1}}</div></el-col>      
            </el-row>

            <el-row>
                <el-col :span="24" class="col"><div class="title">角色名</div><div class="val"><span style="color:red;">❤</span>韩商言<span style="color:red;">❤</span>表白一下韩商言,kk战队也喜欢<span style="color:red;">❤</span></div></el-col>      
            </el-row>

            <el-row >
              <el-col  class="col"><div class="title">简介</div><div class="val" style="line-height:18px;"><span style="color:pink;">❤❤❤</span>{{data.content}}</div></el-col>      
            </el-row>
         </div>

         <span slot="footer">
           <el-button type="primary" icon="el-icon-printer" @click="printPage">打印</el-button>
         </span>

       </el-dialog>
</template>


<script>
export default {
  data() {
    return {
      visible:false,
      data:{
        id:'201907090123232320',
        year:'2019',
        month:'7',
        day:'9',
        name:'杨紫',
        gender:'1',
        birthday:'1992年11月6日',
        mobile:'15888888888',

        name1:'李现',
        gender1:'0',
        birthday1:'1991年10月19日',
        mobile1:'15666666666',

        content:'该剧根据墨宝非宝小说《蜜汁炖鱿鱼》改编，讲述软萌少女佟年对热血青年韩商言一见钟情，二人在相处中甜蜜碰撞，上演一场高智商与高情商的甜萌梦幻爱情故事......',

      }
    };
  },
  methods: {
    init() {
       this.visible = true;
      
    },
    printPage(){
      let wpt = document.querySelector('#printContent');
      let newContent = wpt.innerHTML;
      let oldContent = document.body.innerHTML;

      document.body.innerHTML = newContent;

      window.print(); //打印方法
      history.go(0);

      document.body.innerHTML = oldContent;
    },
    
  },
 
};
</script>
<style scoped lang="scss">
/deep/ .el-dialog__footer{
  height:70px;
  margin-top:15px;
}

.col{
    // border: 1px solid #e6e9f0;
    border: 1px solid #000000;
    height:55px;
    line-height: 55px;
    display: flex;
    
    div{
        padding-left:20px;
    }
    .title{
        // min-width: 150px;
        min-width: 85px;
        // background-color: #f5f5f5; //title的背景色
        // color: #1F2E4D;
        color:#000000;
    }
    .val{
        flex: 1;
        // border-left: 1px solid #e6e9f0;
        border-left: 1px solid #000000;
        // color: #3D4966;
        color:#000000;
    }
}
 
</style>

如果一行两个字段的内容都很长，可以单独加个样式

<div class="val" style="overflow: hidden;overflow-y: auto;">