前端打印，如何一个div换一张打印纸

最新推荐文章于 2024-07-24 09:49:11 发布
最新推荐文章于 2024-07-24 09:49:11 发布
阅读量352 收藏
点赞数 1
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yytasty/article/details/107470244
版权

只需要在div里面添加下面的样式，打印到这个div时，就会在新的打印纸顶部开始打印
page-break-before: always;

yytasty
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div+js实现翻页
majic_Jing的博客
09-11 1524
div+js实现翻页 首先打开你的记事本，先进行框架的编写，如下图： 然后进行style的编写，设置div框架的样式： 下面是一个for循环生成多个div块： function byid(id) {return document.getElementById(id);} function circle(a,count,sum){ for(var i = 0 ; i < sum...
一个不错的html 打印代码支持翻页
09-28
在这个例子中，`.Noprint`类定义了不希望在打印页面上显示的内容（如打印按钮），而`.PageNext`类的作用是在打印时在其后添加分页符，使得内容能够分页打印。 3. CSS布局和样式定义： 文档中的`<style>`标签内还...
HTML 打印 换页
wukongpai的博客
07-17 875
打印 HTML 无法强制换页其实是一件很令人困扰的事，要达到这个功能其实可以透过 CSS 的 Pagebreak 来处理。 强制分页有大概只有二种用的到: [color=darkred] { page-break-after: always; /*在标签后换页*/ } { page-break-before: always; /*在标签前换页*/ } [/color] 这二个...
html打印，可以控制换页
qq_23392319的博客
12-13 2120
控制打印，自动换页，换页，html打印，打印换行
js，简单的打印例子，自定义换页
Web前端工程师
08-05 317
<body> <input type="button" value="打印此页面" onclick="printpage()" /> <div id="printContent">打印内容</div> <script> function printpage() { let newstr = document.getElementById("printContent").innerHTML; le...
vue使用printJs实现前端打印,以及打印分页实现
最新发布
weixin_41978174的博客
07-24 236
我的需求为将表格打印出来,并且超过分页数进行分页展示以下内容参考了其他博主的实现方法,仅供参考。
HttpPrinter前端打印demo，及说明文档
06-20
在现代网页应用中，前端打印功能是不可或缺的一部分，它使得用户能够在浏览器环境中直接打印网页内容，无需通过后端服务进行数据交互。HttpPrinter是一款专为前端设计的打印解决方案，它提供了一种高效、便捷的方式...
window.print打印指定div实例代码
09-04
在网页开发中，有时我们需要提供一个功能，让用户能够打印页面上的特定内容，而不是整个页面。`window.print()` 是JavaScript中的一个方法，它用于打开浏览器的打印对话框，从而让用户选择打印当前网页。但是，这个...
jquery打印指定的div
02-23
在网页开发中，有时我们需要实现一个功能，让用户能够打印页面上的特定区域，比如一个`div`元素。jQuery，作为一个广泛使用的JavaScript库，提供了方便的方法来实现这个需求。本篇文章将详细探讨如何使用jQuery来...
JS控制打印指定div（且控制css样式）的一种另类思路
01-25
打印指定div的插件并不多，使用JPrintArea进行指定div打印也并不好控制，此段js代码是在他人基础上融入了自己的想法，经过测试，纸张打印出来的样式在多个浏览器（ie6、ie7、ie8、火狐、谷歌）上可以做到基本统一，...
javascript打印大全(打印页面设置/打印预览代码)
10-27
打印页面设置,打印页面预览在打印过程中经常会遇到，网上搜集整理了一些实用的打印方法与大家分享，感兴趣的朋友可以了解下哈
vue实现页面打印自动分页的两个方法
weixin_51697449的博客
09-28 2806
一、通过ref方式获取元素进行打印 1.封装一个js文件 // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof
前端页面打印分页
weixin_44997513的博客
07-25 941
前端打印
html页面打印强制换页
spring_007_999的博客
03-02 545
前端打印强制换页
前端实现分页打印(一)
我是渣渣
12-16 4872
实现页面为结算单，也页面由固定头部，订单信息，产品列表，金额汇总，订单明细 其中产品列表需要动态计算分压，订单明细由于存在多个子单，订单收费项目可配置化，导致也存在多个分页需要处理
使用window.print() 打印指定的内容,并打印在一页纸上
web_houzhanguo的博客
11-11 1522
使用window.print() 打印指定的内容,并打印在一页纸上 html <!-- 打印的内容会生成两页纸 --> <div id="report"> <h1>..</h1> <----重点 <div>..</div> </div> javscript function doPrint(){ //根据div标签ID拿到div中的局部内容 let bdhtml=window.d
页面打印表格换页问题
ravenYoung的博客
06-16 2008
在打印一个html页面时，会出现table数据过长，需要分多个页面打印，这时候会出现一行切成两行，导致表格行错乱。
用CSS设置打印换页
weixin_30493321的博客
04-09 668
用CSS设置打印换页： 用page-break-before或者page-break-after就可以了。 以page-break-before为例： 属性值：auto|always|left|right 初始值：auto 适用于：在表格外的块级元素，继承：否，百分比值：不适用。 这个元素属性指定浏览器应该在哪一个元素之前分页。属性值共有4个关键字：“aut...
怎么让一个前端界面转为pdf打印出来
07-12
要将前端界面转换为 PDF 并进行打印，你可以使用 JavaScript 库，如 jsPDF 或 pdfmake。这些库允许你在客户端生成 PDF 文件，并提供了一些功能来控制其样式和内容。 以下是使用 jsPDF 库的示例代码： ```html <!DOCTYPE html> <html> <head> <title>转换为 PDF 并打印示例</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script> </head> <body> <h1>转换为 PDF 并打印示例</h1> <!-- 打印按钮 --> <button onclick="convertToPdf()">转换为 PDF 并打印</button> <!-- 需要转换为 PDF 的内容 --> <div id="content"> <p>这是需要转换为 PDF 的内容。</p> <p>你可以在这里添加更多内容。</p> </div> <script> function convertToPdf() { // 创建一个新的 jsPDF 实例 const doc = new jspdf.jsPDF(); // 获取需要转换的 HTML 元素 const contentElement = document.getElementById("content"); // 将 HTML 元素的内容添加到 PDF 中 doc.html(contentElement, { callback: function (pdf) { // 使用浏览器的打印功能打印生成的 PDF pdf.autoPrint(); pdf.output("dataurlnewwindow"); } }); } </script> </body> </html> ``` 在这个示例中，我们使用了 jsPDF 库来生成 PDF 文件。当用户点击 "转换为 PDF 并打印" 按钮时，会触发 `convertToPdf()` 函数。该函数创建一个新的 jsPDF 实例，并使用 `html()` 方法将需要转换的 HTML 元素的内容添加到 PDF 中。然后，我们使用 `autoPrint()` 方法来设置自动打印，并使用 `output()` 方法将生成的 PDF 在新窗口中打开。 你可以根据自己的需求修改需要转换为 PDF 的内容和页面样式。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值