首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用javascript函数window.print()在下一页写入一些内容

使用JavaScript函数window.print()可以实现在下一页写入一些内容的功能。window.print()函数用于触发浏览器的打印功能,将当前页面的内容打印出来。在打印的过程中,可以通过CSS样式控制打印的布局和样式。

要在下一页写入内容,可以通过以下步骤实现:

  1. 创建一个新的HTML页面,用于打印内容的展示。可以使用HTML标签和CSS样式来设计页面的布局和样式。
  2. 在原始页面中,使用JavaScript监听window的beforeprint事件。当用户点击打印按钮或者调用window.print()函数时,该事件会被触发。
  3. 在beforeprint事件的处理函数中,使用JavaScript的window.open()函数打开新的页面,将新页面的URL设置为第一步创建的打印页面的URL。
  4. 在新的打印页面中,使用JavaScript获取需要写入的内容,并将其插入到页面中的适当位置。可以使用DOM操作方法,如createElement()和appendChild()来创建和插入HTML元素。
  5. 在新的打印页面中,使用CSS样式来控制内容的布局和样式。可以通过内联样式或者外部样式表来设置。
  6. 在新的打印页面中,使用JavaScript的window.onload事件来确保页面加载完成后再执行写入内容的操作。可以将写入内容的代码放在window.onload事件的处理函数中。

以下是一个示例代码:

代码语言:txt
复制
window.onbeforeprint = function() {
  var printWindow = window.open("print.html", "_blank");
  
  printWindow.onload = function() {
    var content = "这是要写入的内容";
    var paragraph = document.createElement("p");
    paragraph.innerHTML = content;
    
    printWindow.document.body.appendChild(paragraph);
  };
};

在上述示例代码中,当用户点击打印按钮或者调用window.print()函数时,会打开一个新的页面print.html,并在该页面中写入内容"这是要写入的内容"。

注意:为了保证写入内容的可靠性和兼容性,建议在写入内容时使用合适的HTML标签和CSS样式,并进行充分的测试。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

浏览器分页静默打印

最简单的做法就是直接打印整个网页,在浏览器直接打印或者调用window.print()。 这样就能将当前页面整个打印出来了。...document.body.appendChild(iframe); } const doc = iframe.contentWindow.document; // 将需要打印的html字符串写入...甚至还有一些合理但是毕竟复杂的要求: 比如:第一页需要页头,每一页都需要表头,最后一页需要签名,等等。 很显然,面对这些“有理”要求,上面这个方案是无法实现了。...所以,我们还需要用 css 来做一些布局来保证 pageList 里面的一个 item 的总高度为 A4 的高度。...因此,此文件通过设置各个 body 容器和 page 容器的高度将每一页设置为固定高度,这样我们打印出来的内容就是我们最终期望的分页数据了。

63810
  • 【前端】使用window.print() 前端实现网页打印详细教程(含代码示例)

    本文目录 前言 一、打印基础知识 二、打印控制 2.1 使用打印样式表 2.2 使用媒介查询 2.3 内联样式使用media属性 2.4 css中使用@import引入打印样式表 2.5 打印指定区域...虽然浏览器提供了自己的打印预览和打印功能,但使用 JavaScriptwindow.print() 方法可以更灵活地控制打印内容和样式。...本文洲洲将详细介绍如何使用 window.print() 方法实现网页打印,并提供代码示例。...2、JavaScript 捕获事件并调用 window.print() 方法。 3、浏览器显示打印预览窗口,用户可以设置打印选项并打印。 print() 方法用于打印当前窗口的内容。...JavaScript 来隐藏那些不需要打印的元素。

    3.1K31

    jQuery 点击按钮打印指定文本内容

    这是在做 JavaScript 调用浏览器打印快递单功能时所遇到的一些坑,总结了一下,分享给大家 先大概说下需求,表格里的每一行存储一张订单信息,包括购买的商品、商家信息、联系人信息等等,勾选需要打印的订单...,点击打印按钮,将订单信息填充到快递单模板中,然后 JavaScript 调用浏览器的打印功能,这里只会展示项目中所涉及到的主要代码,完整的代码将不会在这里展示 打印页面指定部分 通过window.print...();的方法,可以让 JavaScript 打印当前窗口的内容,不过打印的是整个窗口内容,而我们只是需要打印页面的某一个部分,并且该部分的内容是隐藏的,这要怎么实现呢?...originalContents; }) 生成二维码及条形码 在快递单中,我们需要把快递单号生成对应的条形码及二维码,需要大家注意的是,条形码编码有 EAN8、EAN13、EAN128 等编码方式,大家可根据使用环境的不同...,以及条形码数字的个数,来选择相应的编码方式,我们在这里使用的是 Code128 编码方式 条形码及二维码的生成都需要引入指定的jquery-barcode文件,条形码生成的文件直接把下面的代码复制到你的文件中即可

    4.1K20

    HTML局部打印,区域打印的两种实现方法总结

    "print()"> doPrint dddddddddd需要打印,两种实现方法如下: 方法一、替换body 代码: <script type="text/<em>javascript</em>...(); window.document.body.innerHTML = bdhtml; }; 因为<em>window.print</em>()这个方法只能打印全部...body<em>内容</em>,所以这个方法大体来讲,分四个步骤: 1.获取原有body里面的所有<em>内容</em> var bdhtml = window.document.body.innerHTML 2.获取待打印<em>内容</em> var...= prnhtml; <em>window.print</em>(); 4.打印完成,恢复原来页面body window.document.body.innerHTML = bdhtml; 总结: **优点:...ps: PrintArea还提供<em>一些</em>打印时的附加优化功能,例如: 1.mode:模式,当点击打印按钮时触发模式,默认为iframe,当设置为popup则会新开一个窗口页面打印。

    5.4K30

    如何将HTML表格转换成精美的PDF

    该应用是用基本的 HTML、CSS 和 JavaScript 构建的,但你可以使用你的 UI 框架或选择的库轻松创建相同的输出。 每个导出按钮都使用不同的方法生成 PDF。...在 JavaScript 中 window 对象公开了一个 print 方法,所以我们可以写一个简单的 JavaScript 函数,并将其附加到我们的一个按钮上,就像这样: function downloadPDFWithBrowserPrint...这是没有帮助的,因为当你忘记任何给定列包含什么数据时,你需要返回到第一页。第一页的表格底部也有点被切断,因为浏览器试图在创建下一页之前尽可能多地挤进内容。...但是,请注意在第一页和第二页之间发生了什么。表格一直延伸到第一页的底部,然后在第二页的顶部直接接上。没有应用额外的边距,而且表文本内容有可能被切成两半。...要创建页眉和页脚文本,DocRaptor 建议你使用一些 CSS 与 @page 选择器,就像这样。

    6.8K20

    原 八、BOM

    作者:汪娇娇 时间:2017年11月18日 BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。 一、window 对象 BOM的核心对象是window,它表示浏览器的一个实例。...= null){ alert("Welcome", + result); } // print window.print(); // find window.find(); 二、location...back() :后退 forward():前进 length:保存着历史记录的数量 // 后退一页 history.go(-1); history.back(); // 前进一页 history.go...同时,,window对象还是 ECMAScript中的 Global 对象,因而所有全局变量和函数都是它的属性,且所有原生的构造函数及其他函数也都存在于它的命名空间下。...在使用框架时,每个框架都有自己的 window 对象以及所有原生构造函数及其他函数的副本。每个框架都保存在 frames 集合中,可以通过位置或通过名称来访问。

    87250

    angular页面打印局部功能实现方法思考

    、页面获取缓存数据, 4、调用浏览器打印方法, 5、操作完毕页面后退一步 调用打印页面 this.cach.setBylocal({key: key, value: data}); // 写入缓存...this.cach.getBylocal(key) ; this.cach.removeBylocal(key); setTimeout(() => { window.print...测试一页A4纸适合页面840px-1225px 打印文件里会自动添加页面标题和日期,下方会自动添加页面地址,不知道如何去掉 在后台生成pdf页面显示自带打印下载功能 1、后台生成PDF文件,返回二进制流...3、需要token验证的情况下,使用blob类型来接收数据,并创建一个本地地址供浏览器访问,后面操作如第二步。 private down(url: string, body?...效果 在iframe页面里调用打印 这个方法可以结合前两个方法使用,把前两个页面放在在iframe页面里。 略。

    1.7K20

    表格打印分页实践小结

    window.print api介绍 caniuse print:包括print的事件,分页,媒体查询等兼容性部分 https://github.com/DoersGuild/jQuery.print...备注:juqery的print除了基本的打印之外,还可以控制一些基本的样式,标题,页眉页脚的设置等。...,进行计算分割出还可以放下几行内容,剩下的内容放到下一页。...经过这个方法将数据进行分割到两个数据后(countArr),前面的部分放到上一页,剩下的数据放到下一页,并计算出下一页还剩余的空间(newPageHeight),暂时没考虑第二页也放不下的情况。...return countHeight }, 0) + 20 } 小结 以上是这次表格分页小小的实践,虽然浏览器打印整页已经技术非常成熟,但是根据产品需求进行指定的分页和一些数据的分割控制和显示还是需要一些代码设计的

    1.8K31

    Python学习,还在用正则或者bs4做爬虫吗?来试试css选择器吧

    之前写的一些爬虫都是用的正则、bs4、xpath做为解析库来实现,如果你对web有所涉及,并且比较喜欢css选择器,那么就有一个更适合的解析库—— PyQuery。...attr()方法,取出标签的某属性,2中写法都可以:new.attr.href 和new.attr('href') 然后在看翻页,我们只需要判断是否存在下一页,存在时,查找所有的标题和url,然后获取下一页的...url,继续查找,直到不存在下一页,所有的页面就都遍历过了!...为了方便,直接做成了一个函数,来看代码 ? 这里同样的用class属性来定位,找到它下的a标签,然后判断‘下一页’是否存在a标签的文本中,存在则取出下一页的url,然后再次调用函数,不存在则退出!...这样,我们就取到了所有内容,整合下,最后代码如下: ? ? 随手写的代码,就不写入文本或者数据库什么了,主要是学习css选择器的使用

    66320
    领券