位置: IT常识 - 正文

vue使用Print.js打印页面样式不出现的解决(vue-print-nb-jeecg)

编辑:rootadmin
这篇文章主要介绍了vue使用Print.js打印页面样式不出现的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教 目录

推荐整理分享vue使用Print.js打印页面样式不出现的解决(vue-print-nb-jeecg),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue-print-nb-jeecg,vue print,vue-print-nb遇到的坑,vue-print-nb-jeecg,vueprintnb,vueprintnb,vue print,vue-print-nb,内容如对您有帮助,希望把文章链接给更多的朋友!

vue Print.js打印页面样式不出现解决方案vue-print-nb打印问题总结1、表格的列缺失(element-ui table组件)2、打印内容缺失(print.js/print-js独有,固定高度导致)4、不能分页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>vue使用Print.js打印页面样式不出现的解决(vue-print-nb-jeecg)

或者这样:

找到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">        <el-table :data="formList" 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)">上升</span>                    <span v-if="scope.row.sort!=formList.length-1" class="editrow" @click="down(scope.row)">下降</span>                    <span v-if="scope.row.sort!=0" class="editrow" @click="upToZero(scope.row)">置顶</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>我是本页的末尾哦</div>

2、定义打印样式,原理同上,但是方便需要,只需要统一定义class即可

@media print {        @page{            size:  auto;            margin: 3mm;        }        .footer {page-break-after: always;}}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持本站。

本文链接地址:https://www.jiuchutong.com/zhishi/304072.html 转载请保留说明!

上一篇:帝国cms如何升级(帝国cms安装教程)

下一篇:MVC架构-01(MVC架构模式)

  • 应税销售收入是指什么
  • 减资需要交个税吗
  • 领用库存商品用于固定资产
  • 个税申报可以去税务局吗
  • 银行存款日记账电子表格模板
  • 建筑企业异地申报个税
  • 小微企业减免附加税会计分录
  • 利息费用和利息支出的区别计算公式
  • 企业对公账户转法人私户
  • 红字冲回是负数吗
  • 天猫店铺收入在哪里看
  • 红字发票做进项转出还是红字负数
  • 保障房异地建设费缴纳契税吗?
  • 公司增值税进项税不够还有什么办法处理
  • 单位没车能用停车票不能用加油票吗?
  • 2019水利基金税率是多少
  • 应交税费算什么费用
  • 增值税进项税额在借方还是贷方
  • 资管产品增值税征收管理规定
  • 员工生日福利申请
  • 货币资金闲置对企业偿债能力的影响
  • 印花税按含税收入还是不含税收入
  • 企业短期投资交增值税吗
  • 财务科目明细表格模板
  • 私募股权投资
  • 云下载并重新安装
  • 哪些情形需要办理外债审核登记
  • 单位中秋节福利发放物品
  • php 错误和异常处理
  • pascl32.exe - pascl32是什么进程 有什么用
  • php输入框input代码
  • yii2开发文档
  • yii2框架漏洞
  • 微信小程序实现轮播图
  • 一觉醒后浑身酸痛
  • iphone添加自定义提示音
  • 个税在工资里怎么计提
  • 调整税率后增值税发票的开具正确的有
  • 小规模纳税人去年免税,红冲后今年开多少税率的发票
  • 注册公司行业分类有多少种
  • 保理属于什么行业分类
  • 成本类科目怎么记账
  • 残保金 滞纳金
  • 已申报营业税未开发票
  • 增值税要计入应收账款吗
  • 小规模纳税人减免增值税会计处理
  • 营业外收入怎么结转
  • 什么叫印花税税率
  • 改变记帐方式的原因
  • 暂估入库需要入什么科目
  • 国有独资企业董事会成员组成规定
  • 资产利润率在1104哪个表
  • 老板买了手机,算入什么费用
  • 公司有美金账户如何做账
  • 防疫物资采购会计处理
  • 行政单位误餐费标准
  • 哪些资产减值损失一经计提不得转回
  • 历年案例分析题及答案
  • 企业购入树木花草如何入账
  • 财务费用包括哪几项
  • 联想Thinkpad怎么进入安全模式
  • 如何用u盘装系统win10
  • Ubuntu修复安装
  • ubuntu16安装vnc
  • ubuntu安装quagga
  • ubuntu怎么禁用nouveau
  • macos如何新建文件
  • win8无法使用内置管理员账户打开ie
  • win8如何设置默认输入法
  • windows config文件
  • win10喇叭图标有x
  • 公认的经典
  • python算法怎么用
  • unity3D关于公共安全内容制作
  • 开源项目怎么做
  • python日志类
  • python列出所有文件名
  • 高级人民法院党组书记级别
  • 福建省运会2022年
  • 贵州税务申报如何网上申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设