开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js控制打印局部页面的高度

在JavaScript中，控制打印局部页面的高度通常涉及到CSS的媒体查询（Media Queries）以及JavaScript对DOM的操作。以下是一些基础概念和相关方法：

基础概念

媒体查询（Media Queries）：CSS3的一项功能，允许内容根据不同的设备特性（如视口宽度、打印模式等）应用不同的样式。
打印样式表：专门为打印设计的CSS样式表，可以通过<link rel="stylesheet" href="print.css" media="print">引入。
JavaScript DOM操作：JavaScript可以用来动态修改页面内容，包括在打印前调整元素的样式或结构。

相关优势

用户体验：允许用户打印页面的特定部分，而不是整个页面，提高了打印的效率和准确性。
节省资源：减少不必要的内容打印，节省纸张和墨水。
灵活性：可以根据需要动态调整打印内容。

类型

CSS媒体查询：通过CSS控制打印样式。
JavaScript动态调整：在打印前使用JavaScript修改页面布局。

应用场景

发票打印：只打印订单详情部分。
报告生成：只打印数据分析结果部分。
表单打印：只打印填写好的表单部分。

示例代码

使用CSS媒体查询控制打印高度

@media print {
  body * {
    visibility: hidden;
  }
  #print-section, #print-section * {
    visibility: visible;
  }
  #print-section {
    position: absolute;
    left: 0;
    top: 0;
    height: auto; /* 根据需要调整高度 */
    width: 100%;
  }
}

<div id="print-section">
  <!-- 这里是需要打印的内容 -->
</div>
<button onclick="window.print()">打印</button>

使用JavaScript动态调整打印内容

function printPartialPage() {
  // 创建一个新的iframe用于打印
  const iframe = document.createElement('iframe');
  iframe.style.position = 'absolute';
  iframe.style.top = '-9999px';
  document.body.appendChild(iframe);

  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  iframeDoc.open();
  iframeDoc.write(`
    <html>
      <head>
        <title>打印内容</title>
        <style>
          /* 打印样式 */
          body {
            height: auto; /* 根据需要调整高度 */
          }
        </style>
      </head>
      <body>
        ${document.getElementById('print-section').innerHTML}
      </body>
    </html>
  `);
  iframeDoc.close();

  iframe.contentWindow.focus();
  iframe.contentWindow.print();
  document.body.removeChild(iframe);
}

document.getElementById('print-button').addEventListener('click', printPartialPage);

解决问题的方法

如果遇到打印局部页面高度不正确的问题，可以尝试以下方法：

检查CSS样式：确保打印样式表中的高度设置正确。
调整iframe尺寸：在使用iframe打印时，确保iframe的尺寸足够容纳要打印的内容。
调试JavaScript：确保JavaScript代码正确地将内容写入iframe，并且没有错误。

通过以上方法，可以有效地控制打印局部页面的高度，提升打印效果和用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js或jquery实现页面打印可局部打印

1、js实现（可实现局部打印）代码如下: js打印 function preview(oper) { if (oper < 10) { bdhtml=window.document.body.innerHTML;//获取当前页的...--endprint1--> 2、调用windows底层打印，报安全警告，不建议使用（不支持局部打印）代码如下: 3、jQuery实现（支持局部打印）代码如下: js"> $(function(){ $("input#biuuu_button").click(function(){ $("div#

8K2 0

js 打印机打印指定局部区域

--endprint--> 打印" onclick="doPrint()"> function doPrint() ...--startprint-->"; //开始打印标识字符串有17个字符 eprnstr = ""; //结束打印标识字符串 prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17); //从开始打印标识之后的内容...prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容 window.document.body.innerHTML = prnhtml; //把需要打印的指定内容赋给...body.innerHTML window.print(); //调用浏览器的打印功能打印指定区域 location.reload(); //重新给页面内容赋值； }

6.7K5 0

JS 实现简单的页面局部打印

JS实现局部打印和预览：第一种： JS 实现简单的页面局部打印 function preview(oper) { if (oper < 10)...{ bdhtml=window.document.body.innerHTML...;//获取当前页的html代码 sprnstr="";//设置打印开始区域 eprnstr=" 再加个打印按纽 onclick=preview(1) 第二中: 下面就是实现局部打印的代码，跟大家分享一下，希望能够对大家有所帮助。...navigator.userAgent.indexOf("MSIE") > 0) { document.body.removeChild(iframe); } } 将要想打印局部内容

6.4K2 0

局部打印插件 jquery.PrintArea.js

{ $("iframe#" + id).remove(); }; })(jQuery); 打印..."/> 要打印的内容区域 $(function(){ $("btnPrint

5.4K10 0

web页面的单页打印以及批量打印实现方法

打印事件：window.print() 1.单页打印（布局打印）： function printCnt(){ //1.获取当前页的html代码 var body = window.document.body.innerHTML...; //2.要打印的部分（#print里面的内容就是要打印的内容） window.document.body.innerHTML =document.getElementById(...window.print()第二次点击事件失效问题 2.批量打印注意点： (1).控制网页的分页：page-break-after:always 注意：避免在表格、浮动元素、带有边框的块元素中使用分页属性...(2).给每个分页的内容要加一个高度，防止变样报告单2 (3).如果使用window.open(“showPrint.html”,”print”); 打印预览页面的话

5K0 0

js 实现用window.print(）打印页面中的部分内容，局部打印

如下方法： function printProof(){ var printData = document.getElementById("forPrint").innerHTML; // 只打印...window.document.body.innerHTML = printData; //把 html 里的数据复制给 body 的 html 数据，相当于重置了整个页面的内容 window.print

4K1 0

用js在控制台打印html页面,vue 使用print-js 打印html页面

Print.js 官网官网优点：可以打印多种格式的内容(pdf、json、html等) 打印json时可以添加表头。...打印html页时可以继承原有页面的样式，局部打印，过滤掉要打印的元素，及其方便。...一、vue安装命令： npm install print-js –save 二、引入这个引入不需要在main.js中，直接在使用的.vue中引入即可这里颜色虽然是灰色，但是也要添加，否则会报错。...properties:是打印json时所需要的数据属性。 gridHeaderStyle和gridStyle都是打印json时可选的样式。...repeatTableHeader:在打印JSON数据时使用。设置为时false，数据表标题将仅在第一页显示。 scanStyles:设置为false时，库将不处理应用于正在打印的html的样式。

8.7K3 0

js如何在前端控制台打印

在js中右中全局方法可以在控制台console中打印信息： 1、console.log(123); 2、console.info(456); 3、console.warn(666); 4、console.error

5.1K2 0

js控制两个元素高度保持一致

}else{ 6 　　　　$("#left").css("height",$("#right").height()); 7 　　} 8 }) 9 下面是解决侧边导航栏与主内容区的高度视觉上相同的解决方法...initial-scale=1.0"> 6 7 左边导航栏与右边内容区高度保持一致的视觉解决方案...#aside{ /* 侧边栏 */ 31 float: left; 32 width: 246px; 33 height: 200px; /* 侧边栏高度与右边实际高度不同...* 分割侧边栏与内容区 */ 42 } 43 #right-main { 44 width: 100%; 45 height: 600px; /* 实际高度用元素来拉伸...*/ 46 min-height: 200px; /*让他的最小高度为侧边栏高度保持高度一致*/ 47 background-color: #fff; /* 内容去主要部分与侧边栏颜色一致

1.8K6 0

html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结

js实现进入页面先刷新在继续进行js的功能 js实现，进入页面先刷新一下，然后在执行之后js代码需要完成的工作 js或者jquery实现固定时间刷新页面 js怎么写2秒后再刷新当前页面设置定时2秒后执行刷新...语法：location.reload([bForceGet]) 参数： bForceGet，可选参数，默认为 false，从客户端缓存里取当前页。...JS刷新当前页面的几种方法总结 reload 方法，该方法强迫浏览器刷新当前页面。...语法：location.reload([bForceGet]) 参数： bForceGet，可选参数，默认为 false，从客户端缓存里取当前页。...用JS如何控制页面刷新后随机排列LI 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/158242.html原文链接：https://javaforall.cn

13.8K3 0

Javascript 将 HTML 页面生成 PDF 并下载

项目源码地址：https://github.com/linwalker/render-html-to-pdf html2canvas 简介我们可以直接在浏览器端使用html2canvas，对整个或局部页面进行.../js/jsPdf.debug.js"> var downPdf = document.getElementById...这个问题好回答，我们可以设置一个 pageHeight，超过这个高度的内容放入下一页pdf。...以第二页为例，将竖直方向上的偏移设置为 -841.89即一张a4纸的高度，又因为超过a4纸高度范围的图片不显示，所以第二页显示了图片竖直方向上[841.89,1682.78]范围内的内容，这就得到了分页的效果...，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < pageHeight)

4.3K2 0

浏览器分页静默打印

这些打印 js 库各有其优缺点，这里不做分析和评价。这里介绍两个最简单的方法：方法一：直接调用window.print()。...1）约定的数据格式 const data = { pageTitle: '多页模板的数据', pageList: [ { // 只有第一页有head，后面的页没有...pageList 包含的是各个页面的数据，而 list 包含的是某一页的列表数据。除此之外，还有当前页面的页码，是否应该包含头部信息等。...所以，我们还需要用 css 来做一些布局来保证 pageList 里面的一个 item 的总高度为 A4 的高度。...因此，此文件通过设置各个 body 容器和 page 容器的高度将每一页设置为固定高度，这样我们打印出来的内容就是我们最终期望的分页数据了。

7011 0

html页面导出为pdf（jsPDF、iText、wkhtmltopdf）

支持支持支持支持支持 wkhtmltopdf 1、调用方式简单(只需执行一行脚本)；2、生成pdf质量较高 1、服务器需要安装wkhtmltopdf环境；2、根据网址生成pdf，对于有权限控制的页面需要在拦截器进行处理...html2canvas遍历页面中的dom节点，渲染成canvas image，再用jsPDF把canvas image转化为pdf，最后转化的pdf的内容都是图片形式，类似于把整个网页截图、切割，再一页一页拼接成一个完整的...)： js/jspdf.debug.js"> js/html2canvas.js"> 面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页...wkhtmltopdf的版本号，则说明OK了，下面来一个打印html页面的例子试试看，就把本页面转化成pdf吧： wkhtmltopdf --disable-smart-shrinking https:

6.7K1 0

Javascript 将 HTML 页面生成 PDF 并下载

项目源码地址：https://github.com/linwalker/render-html-to-pdf html2canvas 简介我们可以直接在浏览器端使用html2canvas，对整个或局部页面进行.../js/jsPdf.debug.js"> var downPdf = document.getElementById...这个问题好回答，我们可以设置一个 pageHeight，超过这个高度的内容放入下一页pdf。...以第二页为例，将竖直方向上的偏移设置为 -841.89即一张a4纸的高度，又因为超过a4纸高度范围的图片不显示，所以第二页显示了图片竖直方向上[841.89,1682.78]范围内的内容，这就得到了分页的效果...，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < pageHeight)

2.4K3 0

H5网页播放器EasyPlayer.js播放器界面的加载效果无法消失是什么原因？

为了满足用户的个性化需求，EasyPlayer拥有多个版本，如EasyPlayer-RTSP、EasyPlayer.js、EasyPlayerPro等，并且EasyPlayer还拥有Windows、Android...、iOS版本，EasyPlayer.js还可支持Linux平台。

1.7K2 0

Javascript 将 HTML 页面生成 PDF 并下载

项目源码地址：https://github.com/linwalker/render-html-to-pdf html2canvas 简介我们可以直接在浏览器端使用html2canvas，对整个或局部页面进行.../js/jsPdf.debug.js">script> var downPdf = document.getElementById("renderPdf...这个问题好回答，我们可以设置一个 pageHeight，超过这个高度的内容放入下一页pdf。...以第二页为例，将竖直方向上的偏移设置为 -841.89即一张a4纸的高度，又因为超过a4纸高度范围的图片不显示，所以第二页显示了图片竖直方向上[841.89,1682.78]范围内的内容，这就得到了分页的效果...，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < pageHeight) { pdf.addImage

3.2K1 0

Javascript将HTML转成PDF并下载「支持多页」

html2canvas 简介我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行"截图"。.../js/jsPdf.debug.js"> var downPdf = document.getElementById...，将图片赋予这页pdf来显示。那么我们如何确定哪里分页？这个问题好回答，我们可以设置一个 pageHeight，超过这个高度的内容放入下一页pdf。...以第二页为例，将竖直方向上的偏移设置为-841.89即一张a4纸的高度，又因为超过a4纸高度范围的图片不显示，所以第二页显示了图片竖直方向上[841.89,1682.78]范围内的内容，这就得到了分页的效果...，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < pageHeight)

3.8K2 0

Chrome断点调试

大家都知道，加载更多就是一个下一页的功能，而其中最核心的一个就是传给后台的页码数值，每当我点击加载更多按钮一次，页码的数值就要加1，所以如果下一页的数据没出来，是不是有可能是因为页码数值也就是[i变量]...[$”.div”)这种]是否选中了我们想要的元素等，都可以在控制台打印出来。...给大家示范一下在console里打印我们想要选中的元素。上图~ 在控制台中输入$(this)，即可得到选择的元素，没错，正是我们所点击的对象——加载更多按钮元素。...在这里给大家说说我对console这个控制台的理解：这个东东就是一个js解析器，是浏览器本身用来解析运行js的家伙，只不过浏览器通过console让我们开发者在调试过程中，可以控制js的运行以及输出。...个人理解这时候i只是一个局部变量，如果不打上断点，浏览器会把所有的js全部解析完成，console并不能访问到局部变量，只能访问到全局变量，所以这时候console会报错i未定义，但是当js打上断点时，

4.6K2 0

JAVA—— AJAX

也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新。 ...也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新。同步和异步同步：服务器端在处理过程中，无法进行其他操作。异步：服务器端在处理过程中，可以进行其他操作。...公式：(滚动条距底部的距离(自定义高度) + 滚动条上下滚动的距离 + 当前窗口的高度) >= 当前文档的高度当前文档高度：存储10条数据，100px。滚动条距底部的距离：1px。...获取必要信息(当前窗口的高度,滚动条上下滚动的距离,当前文档的高度)。计算当前展示数据是否浏览完毕。判断请求标记是否为 true。...根据当前页和每页显示的条数来请求查询分页数据。当前页码+1。服务器获取请求参数(当前页,每页显示的条数)。根据当前页码和每页显示的条数，调用业务层的方法，得到分页 Page 对象。

3K3 0

表格打印分页实践小结

前言 print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容，我们可以在mdn上查看到mdn相关的简单介绍。...，还可以控制一些基本的样式，标题，页眉页脚的设置等。...常识展示高度页面的展示高度一般设置为950 ui页面 && 打印预览 ui页面的显示与打印预览的部分有较大的差别，并不是完全打印ui页面的效果。...81高度 let pageInit = true // 默认的页面高度 let pageHeight = 950 // 初始化页面高度参数为0 不断累加 let initHeight = 0 // 计算当前页面的可用展示高度...经过这个方法将数据进行分割到两个数据后（countArr），前面的部分放到上一页，剩下的数据放到下一页，并计算出下一页还剩余的空间（newPageHeight），暂时没考虑第二页也放不下的情况。

1.8K3 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭