场景：
业务给了个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;">