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

最新推荐文章于 2023-09-15 09:51:03 发布
原创 最新推荐文章于 2023-09-15 09:51:03 发布 · 6.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js

这篇博客介绍了如何使用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>
前端打印只需要一分总可以吧
06-20
4. **打印选项**：PrintJS提供了丰富的选项来调整打印行为，例如忽略CSS、添加页眉和页脚、自动调整页面大小等。这些选项可以通过配置对象传递给`printJS()`函数。 5. **跨浏览器支持**：PrintJS兼容主流的浏览器，...
通过css布局实现去掉window.print()打印界面的页眉页脚
banweili008的博客
02-26 2060
通过css布局实现去掉window.print()界面的页眉页脚 写在style中 @page{ size: auto; /* auto is the initial value */ margin: 3mm; /* this affects the margin in the printer settings */ }
打印去除页眉页脚
qq_39691676的博客
07-28 334
<!DOCTYPE html> <html> <head> <title>打印</title> <style type="text/css"> html,body,img{ padding: 0px; margin: 0px; } @media print { .print { display:block; } .noprint { visibility:hid
js调用打印，并且将页面缩放后进行打印，同时可自定义分页打印demo
Leemeea的博客
08-07 3622
话不多说，直接上demo，注释备注相当清晰 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>缩放打印与分页</title> <script type="te...
js 怎么知道打印完成_你真的知道缩放打印怎么用吗？
weixin_39981360的博客
12-10 397
当你要打印一个Excel表格的时候，是否会遇到这样的情况呢：你想要将表格的所有数据列打印在同一页面上，可你怎么调整列宽大小，却死活做不到你要的打印效果。那是因为你忽略了页面设置的一个小小技巧——缩放。怎么利用这个缩放技巧达到你的要求呢？今天就给你分享一下这个技巧吧。>> 第一种方法文件→打印→在【缩放选项】里选择对应的选项 优缺点：不需要进行多次调整，一步到位；但是系统预设好的，往往是...
js使用页面打印window.print() 记录，并进行缩放打印
热门推荐
WangYangXiang的博客
11-04 1万+
//打印 print:function(){ //获取打印的页面内容 let subOutputRankPrint = document.getElementById('print-div'); let newContent = subOutputRankPrint.innerHTML; let oldContent = document.bod...
【打印性能优化】：JavaScript中的高效打印技术大揭秘
![【打印性能优化】：JavaScript中的高效打印技术大揭秘]...文章接着提供了实用的JavaScript打印性能实践技巧，涵盖代码层面优化、打印流程优化以及资源加载与缓存
【Vue.js打印功能终极指南】：20个步骤打造完美打印体验
![【Vue.js打印功能终极指南】：20个步骤打造完美打印体验]...本文全面探讨了Vue.js中实现打印功能的多种技术手段，从基础的打印集成到进阶的打印预览与自定义设置，再到高级应用如第三方库优化和打印任务管理。此外
【Vue复杂报表打印秘籍】：深入Lodop打印模块的8个诀窍
![【Vue复杂报表打印秘籍】：深入Lodop打印模块的8个诀窍]...结合Lodop打印模块，开发者可以轻松实现复杂报表的打印功能。本文旨在探讨Vue与Lodop模块结合使用的基础知识及进阶技术点，涵盖从简
【Vue打印功能实践指南】：快速集成Lodop模块的6个技巧
Vue打印功能的实现面临一系列需求与挑战，特别是在集成第三方打印模块如Lodop时。本文介绍了Lodop模块的基础知识，包括其历史、功能特点、安装、配置以及基本使用方法。接着，详细探讨了Vue与Lodop模块集成的技巧，...
打印html时设置去掉页眉页脚 简单一行代码搞定（记录一下）
fighting_sunnyGirl的博客
08-21 5294
media="print"> @page{ size: auto; margin: 0mm; }
js 打印 print 功能，无法缩放问题
m0_37681570的博客
03-19 1055
在调用js window.print() 打印的时候，css有可能会影响print打印 无法缩放页面的情况。 通常情况下是父级某个元素 设置了overflow: hidden;导致。 去掉即可。
js html整体页面放大,js使用页面打印window.print()_记录，并进行缩放打印
weixin_34684705的博客
05-31 824
//打印print:function(){//获取打印的页面内容let subOutputRankPrint = document.getElementById('print-div');let newContent = subOutputRankPrint.innerHTML;let oldContent = document.body.innerHTML;document.body.inner...
压缩JavaScript的宏
dingbiebin1233的博客
01-15 126
编者按：现在开发Web应用程序时，尤其是使用了无刷新技术的应用程序，JavaScript文件成为一种必不可少的组成部分。大量的函数和代码被转移到客户端脚本文件中，使得脚本文件的体积急剧膨胀。大家知道，我们在编写JavaScript的时候，通常为了是代码更具可读性，因此增加了很多空格和tab控制符以及很多注释。但是，对应脚本解释器来讲，这些是没有什么实际意义的，而这些字符缺占据了总体积的1...
js window.print打印页面缩放
qq_38060935的博客
08-12 5031
javascirpt``` document.getElementsByTagName(‘body’)[0].style.zoom=0.8;
html打印页面设置缩放,js使用页面打印window.print() 记录，并进行缩放打印
weixin_29214691的博客
06-03 3748
//打印print:function(){//获取打印的页面内容let subOutputRankPrint = document.getElementById('print-div');let newContent = subOutputRankPrint.innerHTML;let oldContent = document.body.innerHTML;document.body.inner...
JS作用域（Scope）
weixin_45846139的博客
12-23 962
在js中，有着一种被称为作用域（scope）的特性。 那么什么是作用域呢？ 作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性，即作用域控制着变量与函数的可见性和生命周期。简单来讲，就是变量和函数生效的“范围”。而作用域又分为全局作用域和局部作用域。 什么叫全局作用域？ 任何地方都能访问到的对象拥有全局作用域。在函数外面定义的变量就属于全局变量，拥有全局作用域。没有定义，却直接赋值的...
C-Lodop打印文字超长自动缩小(文字按固定宽度缩放、js计算文本宽度)
jeesr的博客
09-15 1122
以上代码固定宽度300px，文字短了会拉长，长了会压缩。如果短的时候不想让他拉长，那么可以先计算一下文本的宽度，如果宽度长于300，那textLength就设置300，如果小于300，那textLength就设置为这个文本宽度。
JavaScript作用域（scope）
离殇人一曲的博客
03-24 955
文章目录前言一、全局作用域二、函数作用域1.在函数作用域中可以访问到全局作用域的变量2.在全局作用域中无法访问到函数作用域的变量3.就近原则4.在函数作用域中有声明提前的特性5.在函数中，不使用var声明的变量都会成为全局变量 前言 作用域即一个变量的作用范围，在js中作用域分为全局作用域和函数作用域 一、全局作用域 ——直接编写在script标签中的js代码，都在全局作用域 ——全局作用域在页面打开时创建，在页面关闭时销毁 ——在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由
<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、付费专栏及课程。

余额充值