js与css实现全局与局部打印、缩放打印、去除页眉页脚打印

这篇博客介绍了如何使用JavaScript实现网页的全局和局部打印功能,并展示了如何通过CSS调整打印时的缩放比例以适应不同的打印需求。同时,还详细讲解了如何利用CSS在打印时去除页眉和页脚,以提供更纯净的打印效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

js实现全局与局部打印

  • js调用打印函数
    在这里插入图片描述
  • HTML样例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试案例</title>
    <script type="text/javascript">
        <!--打印用户表-->
        function printUser(obj) {
            <!--获取网页整体内容-->
            var old_html = document.body.innerHTML

            <!--获取用户表网页内容-->
            var new_ele = obj.parentElement.innerHTML

            <!--将用户表网页内容赋值给网页整体内容-->
            document.body.innerHTML = new_ele

            <!--打印-->
            window.print()

            <!--还原网页整体内容-->
            document.body.innerHTML = old_html
        }

        <!--打印当前页面-->
        function printFuc(obj) {
            window.print()
        }
    </script>
</head>
<body>
<ul>
    <li>
        <h3>用户管理</h3><br>
        <table border="2">
            <tr>
                <td>用户名</td>
                <td>年龄</td>
                <td>住址</td>
            </tr>
            <tr>
                <td>JACK</td>
                <td>20</td>
                <td>武汉</td>
            </tr>
            <tr>
                <td>JOHN</td>
                <td>30</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>MARY</td>
                <td>40</td>
                <td>上海</td>
            </tr>
        </table>
        <br>
        <button onclick="printUser(this)">局部打印用户表</button>
    </li>
    <li>
        <h3>组织管理</h3><br>
        <table border="2">
            <tr>
                <td>一级部</td>
                <td>二级部</td>
                <td>三级部</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>石家庄分行</td>
                <td>新华区支行</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>唐山分行</td>
                <td>路北区支行</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>廊坊</td>
                <td>固安县支行</td>
            </tr>
        </table>
        <br>
    </li>
</ul>
<button onclick="printFuc(this)" style="margin: 0 5ex">全局打印当前页面</button>
</body>
</html>

js实现缩放打印

在这里插入图片描述

  • HTML样例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试案例</title>
    <script type="text/javascript">
        <!--打印用户表-->
        function printUser(obj) {
            <!--获取网页整体内容-->
            var old_html = document.body.innerHTML

            <!--获取用户表网页内容-->
            var new_ele = obj.parentElement.innerHTML

            <!--将用户表网页内容赋值给网页整体内容-->
            document.body.innerHTML = new_ele

            <!--zoom 设置或检索对象的缩放比例-->
            document.getElementsByTagName('body')[0].style.zoom = 0.5

            <!--打印-->
            window.print()

            <!--还原对象的缩放比例-->
            document.getElementsByTagName('body')[0].style.zoom = 1
            <!--还原网页整体内容-->
            document.body.innerHTML = old_html
        }

        <!--打印当前页面-->
        function printFuc(obj) {
            <!--zoom 设置或检索对象的缩放比例-->
            document.getElementsByTagName('body')[0].style.zoom = 1.5

            window.print()

            document.getElementsByTagName('body')[0].style.zoom = 1
        }
    </script>
</head>
<body>
<ul>
    <li>
        <h3>用户管理</h3><br>
        <table border="2">
            <tr>
                <td>用户名</td>
                <td>年龄</td>
                <td>住址</td>
            </tr>
            <tr>
                <td>JACK</td>
                <td>20</td>
                <td>武汉</td>
            </tr>
            <tr>
                <td>JOHN</td>
                <td>30</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>MARY</td>
                <td>40</td>
                <td>上海</td>
            </tr>
        </table>
        <br>
        <button onclick="printUser(this)">局部打印用户表-缩放比例为0.5</button>
    </li>
    <li>
        <h3>组织管理</h3><br>
        <table border="2">
            <tr>
                <td>一级部</td>
                <td>二级部</td>
                <td>三级部</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>石家庄分行</td>
                <td>新华区支行</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>唐山分行</td>
                <td>路北区支行</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>廊坊</td>
                <td>固安县支行</td>
            </tr>
        </table>
        <br>
    </li>
</ul>
<button onclick="printFuc(this)" style="margin: 0 5ex">全局打印当前页面-缩放比例为1.5</button>
</body>
</html>

css实现打印时去除页眉页脚

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试案例</title>
    <!--media="print" 代表控制打印时的样式:去除打印时的页眉页脚-->
    <style media="print">
        @page {
            size: auto;
            margin: 0mm; /* 影响打印机设置中的边距 */
        }
    </style>
    <script type="text/javascript">
        <!--打印用户表-->
        function printUser(obj) {
            <!--获取网页整体内容-->
            var old_html = document.body.innerHTML

            <!--获取用户表网页内容-->
            var new_ele = obj.parentElement.innerHTML

            <!--将用户表网页内容赋值给网页整体内容-->
            document.body.innerHTML = new_ele

            <!--zoom 设置或检索对象的缩放比例-->
            document.getElementsByTagName('body')[0].style.zoom = 0.5

            <!--打印-->
            window.print()

            <!--还原对象的缩放比例-->
            document.getElementsByTagName('body')[0].style.zoom = 1

            <!--还原网页整体内容-->
            document.body.innerHTML = old_html
        }

        <!--打印当前页面-->
        function printFuc(obj) {
            <!--zoom 设置或检索对象的缩放比例-->
            document.getElementsByTagName('body')[0].style.zoom = 1.5

            window.print()

            document.getElementsByTagName('body')[0].style.zoom = 1
        }
    </script>
</head>
<body>
<ul>
    <li>
        <h3>用户管理</h3><br>
        <table border="2">
            <tr>
                <td>用户名</td>
                <td>年龄</td>
                <td>住址</td>
            </tr>
            <tr>
                <td>JACK</td>
                <td>20</td>
                <td>武汉</td>
            </tr>
            <tr>
                <td>JOHN</td>
                <td>30</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>MARY</td>
                <td>40</td>
                <td>上海</td>
            </tr>
        </table>
        <br>
        <button onclick="printUser(this)">局部打印用户表-缩放比例0.5</button>
    </li>
    <li>
        <h3>组织管理</h3><br>
        <table border="2">
            <tr>
                <td>一级部</td>
                <td>二级部</td>
                <td>三级部</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>石家庄分行</td>
                <td>新华区支行</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>唐山分行</td>
                <td>路北区支行</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>廊坊</td>
                <td>固安县支行</td>
            </tr>
        </table>
        <br>
    </li>
</ul>
<button onclick="printFuc(this)" style="margin: 0 5ex">全局打印当前页面-缩放比例为1.5</button>
</body>
</html>
<el-table ref="tableRef" :data="datas.list" table-layout="fixed" border class="table-print" style="width: 100%" show-summary :summary-method="getSummaries" highlight-current-row> <el-table-column prop="purFormDetail.purForm.opTime" label="时间" /> <el-table-column prop="purPayment.paymentMethod.name" label="付款方式" /> <el-table-column prop="purPayment.company.name" label="汇款帐户名称" /> <el-table-column prop="purPayment.amount" label="汇款金额" :formatter="formatScore" /> <el-table-column prop="purFormDetail.storePosition.product.name" label="产品名称" /> <el-table-column prop="purFormDetail.storePosition.productSpec.name" label="规格" /> <el-table-column prop="purFormDetail.storePosition.productState.name" label="交货状态" /> <el-table-column prop="purFormDetail.quantity" label="数量" :formatter="formatScore" /> <el-table-column prop="purFormDetail.storePosition.productUnit.name" label="单位" width="50" /> <el-table-column prop="purFormDetail.number" label="辅助数量" :formatter="formatScore" /> <el-table-column prop="purFormDetail.storePosition.supportUnit.name" label="单位" width="50"/> <el-table-column prop="purFormDetail.price" label="价格" :formatter="formatScore" /> <el-table-column prop="purFormDetail.priceType.name" label="价格类型" /> <el-table-column prop="purFormDetail.amounts" :formatter="formatScore" label="发货金额"/> <el-table-column label="期未余额"> <template #default="{row,$index}"> {{getEndBalance(row,$index)}} </template> </el-table-column> </el-table>printJS({ printable: 'purAccountDetail-print', type: 'html', targetStyles: ['*'], maxWidth: 1400, font_size: 'llllll', style: `@media print { /* 表格行高设置 - 针对Element UI表格结构 */ #purAccountDetail-print .el-table__body tr { height: 15px !important; } @page { margin: 0; /* 设置页面边距 */ size: A4 landscape; /* 页面大小自适应 */ /* 隐藏页眉页脚 */ @top-left { content: 'TCM管理软件'; font-size: 10px; } @top-center { content: ''; } @top-right { content: ''; } @bottom-left { content: ''; } @bottom-center { content: ''; } @bottom-right { content: ''; } } #purAccountDetail-print::before { content: "TCM 管理软件"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); font-size: 48px; opacity: 0.1; /* 调整透明度 */ color: #000; pointer-events: none; z-index: 9999; } }` });}catch (error) { ElMessage({ message: '打印过程中出错: ' + error.message, type: 'error', }); }打印样式的行高设置没作用
最新发布
07-21
<think>我们正在解决Element UI的el-table组件在打印时行高设置无效的问题。根据用户提供的引用和描述,我们可以尝试以下方法: 用户引用中提到了几种设置行高的方式: 1. 使用CSS深度选择器(/deep/ 或 ::v-deep)来设置表头(th)和单元格(td)的内边距(padding)和高度(height)、行高(line-height)[^1]。 2. 使用el-table的row-style和cell-style属性来设置行高和单元格内边距,同时设置表格的字体大小[^2]。 3. 调整表头行高时,设置header-cell-style,将内边置为0[^3]。 但是,这些设置在打印时可能无效,因为打印样式需要单独在@media print媒体查询中定义。 因此,我们可以在打印样式表中为打印时的表格设置行高。例如: ```css @media print { /deep/ .el-table th, /deep/ .el-table td { padding: 0 !important; height: 30px !important; /* 设置你期望的高度 */ line-height: 30px !important; /* 设置行高,确保文本垂直居中 */ } } ``` 注意:在Vue项目中,使用/deep/或::v-deep来穿透scoped样式。另外,打印时可能需要调整的内容不仅仅是行高,还可能有其他样式(如字体大小、边距等),需要一并考虑。 另外,用户提到在el-table上直接设置行高(:row-style)和单元格样式(:cell-style)的方法[^2],但打印时这些内联样式可能被浏览器默认的打印样式覆盖,因此建议在打印媒体查询中覆盖样式。 步骤: 1. 在组件的样式部分(如果是scoped样式,需要使用深度选择器)添加打印媒体查询。 2. 在媒体查询中,为表格的th和td设置高度、行高和内边距,并使用!important覆盖原有样式。 示例代码: ```vue <template> <el-table :data="tableData" style="width: 100%" class="print-table"> <!-- 表格列定义 --> </el-table> </template> <style scoped> /* 普通样式 */ </style> <style> /* 打印样式,注意:如果使用scoped,则深度选择器可能无法作用于el-table内部,因此可以单独放在一个非scoped的style标签中,或者使用::v-deep */ @media print { .print-table ::v-deep th, .print-table ::v-deep td { padding: 0 !important; height: 30px !important; line-height: 30px !important; font-size: 12px !important; /* 如果需要,调整字体大小 */ } } </style> ``` 注意:由于打印样式可能需要全局作用,所以如果放在scoped的style标签中,需要使用深度选择器(如::v-deep)。另外,确保在打印时表格的父元素没有设置固定高度,否则可能导致行高被压缩。 如果上述方法仍然无效,可能是因为打印时el-table生成的DOM结构比较复杂,可能存在多层嵌套,我们可以尝试更具体的选择器,例如: ```css @media print { .print-table ::v-deep .el-table__header-wrapper table tr th .cell, .print-table ::v-deep .el-table__body-wrapper table tr td .cell { height: 30px !important; line-height: 30px !important; } } ``` 因为el-table中的内容实际上是在.cell元素中,直接设置.cell元素的高度和行高可能更有效。 同时,用户也可以尝试调整行内样式,在打印媒体查询中覆盖行内样式: ```css @media print { .print-table ::v-deep tr>td, .print-table ::v-deep tr>th { height: 30px !important; line-height: 30px !important; } } ``` 请用户根据实际情况尝试以上方法。 相关问题: 1. 如何调整Element UI表格的打印样式? 2. 在打印时,Element UI表格的样式不生效怎么办? 3. 如何设置打印媒体查询来覆盖Element UI组件的样式?</think>### Element UI el-table 打印样式行高设置无效的解决方案 在设置 Element UI 表格的打印样式时,行高设置无效通常是由于**打印媒体查询未正确覆盖组件样式**或**CSS优先级问题**导致的。以下是具体解决方案: #### 方法一:使用打印媒体查询覆盖样式(推荐) 在全局 CSS 文件中添加打印样式: ```css @media print { /* 覆盖表头行高 */ .el-table__header-wrapper tr th { padding: 0 !important; height: 40px !important; /* 表头高度 */ line-height: 40px !important; } /* 覆盖表格行高 */ .el-table__body-wrapper tr td { padding: 0 !important; height: 35px !important; /* 内容行高度 */ line-height: 35px !important; } /* 单元格内容容器 */ .el-table .cell { line-height: inherit !important; transform: scale(0.9); /* 可选:缩放内容适应行高 */ } } ``` #### 方法二:强制穿透样式作用域 在组件样式中添加(使用 Vue 的深度选择器): ```vue <style scoped> /* 穿透组件样式作用域 */ ::v-deep .el-table__header tr, ::v-deep .el-table__header th { height: 40px !important; line-height: 40px !important; } ::v-deep .el-table__body tr, ::v-deep .el-table__body td { height: 35px !important; line-height: 35px !important; } </style> ``` #### 关键注意事项 1. **必须使用 `!important`** Element UI 的样式优先级较高,需用 `!important` 强制覆盖[^1][^2][^3] 2. **同时设置 `height` 和 `line-height`** 两者必须保持一致,否则内容会垂直偏移 3. **打印时移除内边距** `padding: 0 !important` 可避免默认间距影响行高[^1][^3] 4. **检查浏览器打印设置** 在浏览器打印预览中取消勾选 **"背景图形"** 选项,避免样式被忽略 #### 完整示例代码 ```vue <template> <el-table :data="tableData" class="print-table" :header-cell-style="{ padding: '0' }" :cell-style="{ padding: '0' }"> <!-- 列定义 --> </el-table> </template> <style scoped> .print-table ::v-deep th { height: 40px !important; line-height: 40px !important; } .print-table ::v-deep td { height: 35px !important; line-height: 35px !important; } </style> <style> @media print { .print-table .el-table__header th, .print-table .el-table__body td { padding: 0 !important; height: 35px !important; line-height: 35px !important; } } </style> ``` #### 验证步骤 1. 在浏览器中按 `Ctrl+P` 进入打印预览 2. 检查打印样式中行高是否生效 3. 若未生效,在开发者工具中检查哪些样式被覆盖 4. 逐步增加 CSS 选择器特异性(如添加父级类名) > 提示:打印样式可能需要调整 `transform: scale()` 使内容完全适应行高[^2]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值