vue使用Print.js打印页面样式不出现的解决
作者:迷阵 发布时间:2024-05-02 17:02:00
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;}
}
来源:https://blog.csdn.net/weixin_43047070/article/details/115870439


猜你喜欢
- 从MySQL 5.0 开始,支持了一个全新的SQL句法:PREPARE stmt_name FROM preparable_stmt;EXE
- 在代码首行添加:%matplotlib inline即可。补充知识:jupyter不能显示Matplotlib 动画看莫烦老师的matplo
- 跨浏览器的本地存储(一):userData behaviorDOM Storage,是基于 Web Applications 1.0 spe
- 一、引言在编写调试Python代码过程中,我们经常需要记录日志,通常我们会采用python自带的内置标准库logging,但是使用该库,配置
- 一、TensorBoardTensorBoard 一般都是作为 TensorFlow 的可视化工具,与 TensorFlow 深度集成,它能
- 前言上篇文章给大家带来了PHP中最基本的特性,不知道大家学习的怎样了,回顾上文,我们讲了MD5强弱碰撞以及正则匹配的绕过,总体来看还是很简单
- 1. viper的介绍viper是go一个强大的流行的配置解决方案的库。viper是spf13的另外一个重量级库。有大量项目都使用该库,比如
- 操作步骤:一、安装MySQL数据库1、下载MySQL-5.6.17-winx64.zip文件。2、解压到指定目录,本例为D:\mysql-5
- 初学python,小缘缘出了几道题: 有一 list a = [1, 2, 3, 4, 5, 6] 请将 a 依 0, 1 1, 2 2,
- 什么是fixture在一个测试过程中,fixture主要提供以下功能:为测试提供上下文,比如环境变量,数据集(dataset),提供数据,数
- 前言加密解密在实际开发中应用比较广泛,常用加解密分为:“对称式”、“非对称式&a
- INI是微软Windows操作系统中的文件扩展名。这些字母表示初始化。正如该术语所表示的,INI文件被用来对操作系统或特定程序初始化或进行参
- import timefrom selenium import webdriverfrom selenium.webdriver.commo
- 前言:中文编码问题一直是程序员头疼的问题,而Python2中的字符编码足矣令新手抓狂。本文将尽量用通俗的语言带大家彻底的了解字符编码以及Py
- 本文实例讲述了Python实现的直接插入排序算法。分享给大家供大家参考,具体如下:# -*- coding:utf-8 -*-'&#
- 下面开始优化下my.conf文件(这里的优化只是在mysql本身的优化,之前安装的时候也要有优化)cat /etc/my.cnf# For
- 引言大家在日常工作中,经常会碰到类似的场景,需要计算在某个时间段内的工作日以及确定某天是否为工作日,这里的介绍的工具包将很好的解决这个问题。
- php的命名空间功能已经出来很久了,但是一直以来没怎么深究过,这次赶着有时间所以特意翻着手册做一个整理和总结帮助自己完善完善,原本准备一篇写
- <?php interface js{ function ys($a,$b); } class Af implements js{ f
- [PHP] ; PHP还是一个不断发展的工具,其功能还在不断地删减 ; 而php.ini的设置更改可以反映出相当的变化,