vue使用Print.js打印页面样式不出现的解决
vue Print.js打印页面样式不出现
解决方案
加上这句就好了！完美！
vue-print-nb打印问题总结
1、表格的列缺失（element-ui table组件）
原因：table-layout: fixed导致的，出现部分列没有被打印
让表table布局更加符合预期，普通使用table时，其table-layout 默认值是 auto，导致表格第二行和第一行不一样宽，也就是两行的宽度不对齐。而使用：
table { table-layout: fixed; }则会让表的布局以第一行为准，设置表格的宽度，然后其他行的表格宽度就按照第一行为准。一般表格第一行是表头标题，第二行以后是数据行，也就是让数据行的每列宽度向第一行列宽度看齐。
这种样式的表格布局在性能上也快得多，这是因为整个表格的内容不需要花费进行分析，以便知道列的宽度。
解决方法：
<style lang="less" scoped>
/deep/ table{
table-layout: auto !important;
}
/deep/ .el-table__header-wrapper .el-table__header{
width: 100% !important;
}
/deep/ .el-table__body-wrapper .el-table__body{
width: 100% !important;
}
</style>注意点：
/deep/ table{
table-layout: auto !important;
}可能会造成样式错乱，比如你页面有table，打印弹出层的table，这样修改样式有可能会导致页面表格行错位，解决办法：在页面的<el-table>标签上加id,比如pagetable，修改less样式如下
<style lang="less" scoped>
/deep/ table{
table-layout: auto !important;
}
/deep/ .el-table__header-wrapper .el-table__header{
width: 100% !important;
}
/deep/ .el-table__body-wrapper .el-table__body{
width: 100% !important;
}
/deep/ #pagetable table{
table-layout: fixed !important;
}
</style>2、打印内容缺失（print.js/print-js独有，固定高度导致）
原因：一般为了好看，会固定高度，然后超出内容出现滚动条，但是打印的时候，只会打印固定高度的内容，导致打印内容缺失
解决方法：
<style scoped>
@media print {
#box{
height: 100%;
}
}
</style>或者这样：
找到print.js的getStyle方法，加入一行代码
str += "<style>html,body,div{height: auto !important;}</style>";
getStyle: function () {
var str = "",
styles = document.querySelectorAll('style,link');
for (var i = 0; i < styles.length; i++) {
str += styles[i].outerHTML;
}
str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
str += "<style>html,body,div{height: auto !important;}</style>";
return str;
},注意点：
1、box是你固定高度标签的id，当然你也可以换成class或者其他，使样式生效即可
2、@media print只影响打印的样式，不会影响页面样式
3、表格内容缺失（表格滚动导致，只打印显示区域内容）
原因：不管是print.js还是vue-print-nb插件，都有这个问题，因为表格滚动导致
解决方法：
用一个隐藏div包裹你要打印的表格或者还有其他内容，总体包裹
<div id="boxbox" style="display:none;"> <el-table :data="formList" style="width: 100%" border width="100%"> <el-table-column align="center" width="200" prop="prop" label="列名"></el-table-column> <el-table-column label="是否启用" width="100"> <template slot-scope="scope"> <el-switch v-model="scope.row.show" :active-value="1" :inactive-value="2" active-color="#409eff" inactive-color="#B9B9B9" @change="changeSwitch(scope.row)"/> </template> </el-table-column> <el-table-column label="是否必填" width="100"> <template slot-scope="scope"> <el-switch v-model="scope.row.required" :active-value="1" :inactive-value="2" active-color="#409eff" inactive-color="#B9B9B9" @change="changeSwitch(scope.row)"/> </template> </el-table-column> <el-table-column align="center" prop="sort" width="150" label="排序"></el-table-column> <el-table-column label="操作" align="center" width="200"> <template slot-scope="scope"> <span v-if="scope.row.sort!=0" class="editrow" @click="up(scope.row)" style="margin-right:10px">上升</span> <span v-if="scope.row.sort!=formList.length-1" class="editrow" style="margin-right:10px" @click="down(scope.row)">下降</span> <span v-if="scope.row.sort!=0" class="editrow" @click="upToZero(scope.row)" style="margin-right:10px">置顶</span> </template> </el-table-column> </el-table> </div>
注意点:
1、经过测试，A4纸大小宽度大致在650px，所以你隐藏的table列，要自己设置宽度，整体宽度在750左右，大于750，列会超出，不打印，小于750，右边会留有空白
2、<el-table>不能固定高度，所以不要设置高度
4、不能分页
原因：不管你是下载print.js保存到本地，还是npm下载print-js，只能打印一页，可能太菜了
解决方法：
使用插件：vue-print-nb，使用方法：vue-print-nb
此插件会根据打印内容的高度，自己分页，如果想自定义分页的话，方法如下：
1、在末尾的最后一个标签，加入样式 style="page-break-after: always;"
<div style="page-break-after: always;">我是本页的末尾哦</div>
2、定义打印样式，原理同上，但是方便需要，只需要统一定义class即可
@media print {
@page{
size: auto;
margin: 3mm;
}
.footer {page-break-after: always;}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了基于Vite2.x的Vue 3.x项目的搭建实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
径向条形图是一种用于可视化单一数据点及其与目标或理想值的关系的图表类型,它在显示进度、完成率或其他类似度量时非常有用,本文给大家介绍了使用Vue3和ApexCharts实现3D径向条形图,感兴趣的小伙伴可以参考阅读下2024-06-06
vue中v-for和v-if一起使用之使用compute的示例代码
这篇文章主要介绍了vue中v-for和v-if一起使用之使用compute的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-05-05
这篇文章主要为大家详细介绍了Vue分页插件的前后端配置与使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
vue-router判断页面未登录自动跳转到登录页的方法示例
这篇文章主要介绍了vue-router判断页面未登录自动跳转到登录页的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
vite+vue3项目集成ESLint与prettier的过程详解
这篇文章主要介绍了vite+vue3项目中集成ESLint与prettier的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-09
在本篇文章里我们给大家整理的是关于vue指令v-html使用过滤器filters功能的实例内容，需要的朋友们学习下。2019-10-10
本文主要介绍了vue请求接口并且携带token的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
vue中el-date-picker选择日期的限制的项目实践
ElementUI的el-date-picker使用时,有时候想要限制用户选择的时间范围,本文就来介绍了vue中el-date-picker选择日期的限制的项目实践,感兴趣的可以了解一下2023-10-10
element ui el-calendar日历组件使用方法总结
这篇文章主要给大家介绍了关于element ui el-calendar日历组件使用方法的相关资料,elementui是一款基于Vue.js的UI框架,其中的日历组件calendar是elementui中非常常用的组件之一,需要的朋友可以参考下2023-07-07
最新评论