print-js分页批量打印

最新推荐文章于 2024-07-31 17:50:19 发布
最新推荐文章于 2024-07-31 17:50:19 发布
阅读量365 收藏
点赞数 1
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chiwawa_/article/details/139648050
版权

在进行批量导出时，对需要导出的内容进行分页

在这里插入图片描述
在上图 两个人的信息其实是用两个div分别包裹着的，一般情况下，就算设置了高度100vh,由于它拿到的是页面的高度，无法匹配打印纸的高度，如下图
在这里插入图片描述
这时候就要在各自的divbox上增加一个属性`

.printBox {
  width: 100%;
  page-break-after: always;
}

完美解决

在这里插入图片描述

chiwawa_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现打印，可以自动分页！
01-30
js打印,将数据读取到打印页面，用js截取，从而实现打印指定模块！打印的时候如果页面数据过多，打印机可以自动分页打印！我的是hp的打印机，下载的朋友可以试试！注意，本人声明：这个并不是针对于打印分页而写，只是普通的js打印！
web页面批量打印
01-31
批量打印 HTML：打印页面预览，跳转到打印那边使其 分页（使每个报告单占据一页）
vue中使用vue-print.js实现多页打印
11-21
本文主要介绍了vue项目中使用print.js打印，解决多页，分页，打印预览样式修改等问题。 引入安装vue-print.js cnpm i vue-printjs --save-dev 解决打印多页只出现一页问题 由于打印插件存在问题，如果打印文件超出一页，只显示一页，所以我们需要修改print.js源文件，所以只能手动下载vue-print.js到本地，做一些修改，然后引入到项目中，不能使用npm安装 下载 print.js https://github.com/zxc19890923/print/blob/master/print.js 在src目录下面创建plugins/pri
print打印（超简单实现打印）
s2974240889的博客
10-18 554
注意：这个插件不支持批量打印 可以参考vue-pdf-embed 的使用方法 进行批量打印。printable: [‘打印的pdf文件’，‘图片’],type: 'pdf', // 打印类型。
Vue3+TypeScript+printjs 实现标签批量打印功能
最新发布
溫問問
07-31 578
方法中使用nextTick是当el-dialog弹窗DOM加载完成后在调用PrintJS获取需要打印的区域，这个直接打印过程其实会先弹窗然后DOM加载完成后直接调用浏览器打印界面，后面把弹出关闭，如果不加载el-dialog可以通过动态加载html内容来实现直接打印，我这里图方便就用该方法实现了。实现过程：主界面点击"打印标签"调用el-dialog弹窗(预览和直接打印都居于弹窗实现)实现功能：前端点击"打印标签"弹出打印界面进行打印作业。最后，如果需要带二维码的同学可以添加。打印组件：Print-JS。
利用pdf-poppler和printJS完成pdf批量打印
不会霞
09-28 3351
前段时间遇到了这么个需求,需要根据后端返回的多个pdf流(如下图),整合成一个pdf文件并打印,在这里分享一下我使用的方法。
javascript实现批量打印
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-03 831
javascript实现批量打印
vue使用printJs实现前端打印,以及打印分页实现
Arcobaleno_1177的博客
08-08 6409
在web端可以直接使用原生调用方法调用打印,但是往往需要单独把需要打印的东西拎出来画一个单独的html,而使用printJs则可选中你需要打印的代码块,进行页面局部打印。
Print.js实现打印pdf，HTML，图片(可设置样式可分页)
热门推荐
Ghmin的博客
12-28 1万+
Print.js四种打印类型：'pdf'、'html'、'image'、'json'一文搞懂
前端实现分页打印(一)
我是渣渣
12-16 4863
实现页面为结算单，也页面由固定头部，订单信息，产品列表，金额汇总，订单明细 其中产品列表需要动态计算分压，订单明细由于存在多个子单，订单收费项目可配置化，导致也存在多个分页需要处理
js分页批量打印例子并去掉页码和下面的地址
04-15
综上所述，这个例子中涉及的JS分页批量打印并去除页码和地址，是一个综合性的任务，需要结合JavaScript和CSS来完成。在实践中，可能还需要考虑到不同浏览器的兼容性问题，以及如何优雅地处理大量数据的分页和打印。
js分页批量打印例子
04-12
在JavaScript（JS）开发中，实现分页批量打印是一项常见的需求，特别是在网页应用中处理大量数据时。这个“js分页批量打印例子”提供了一个解决方案，帮助开发者将多个页面的内容一次性打印出来，同时确保用户体验...
在vue中使用的打印插件
11-16
以`vue-print-nb`为例，它支持批量打印和分页，非常适合我们的需求。 2. **安装插件** 首先，我们需要通过npm或yarn来安装插件。对于`vue-print-nb`，在命令行中输入以下命令： ``` npm install vue-print-nb --...
打印及批量打印
qvanminpiao的博客
02-15 4568
开发十年，就只剩下这套架构体系了！ >>> ...
JS打印多页面
云梦泽
09-05 711
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><%@ page  language="java" contentType="text/html; charset=gb2312" %><html&
教你如何用JS操作打印机进行打印（这个是批量打印）
I_am_ken的博客
02-27 5859
前言： 看到本文的你，一定会是看过各种博客说如何进行“批量打印”，也有很多说了一些“指定区域打印”的，各种博客都不能满足你在开发中的定制开发？那本文就带你简单、通俗易懂地进行开发打印功能。 一、先创建最原始、最简单的html、css、js、img四个文件夹。 1、html: 按平常的创建html无异 2、css: 最重点的是，想要打印上下有空隙。可以这样设置： <style media=...
使用print.js进行分页打印
qq_41834729的博客
04-22 7235
如何进行表格大量数据的分页打印 print.js官网 目的：实现大量数据的分页打印 探究过程：几种流行的打印插件， vue-print-nb vue-easy-print 都没有实现自动分页打印功能(网上讲解混乱，有的说可以自动分页，有的说不能，导致在这两个插件上耗费很长时间也没实现功能) 最后选取了print-js， 操作过程 使用 npm 安装： npm install print-js --save html <div id="print-box" style={{ fontS
print-js批量分页打印
10-18
您可以使用以下步骤来实现print-js批量分页打印： 1. 首先，您需要在您的HTML文件中引入print-js库。您可以使用以下代码： ```html <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script> ``` 2. 接下来，您需要为每个要打印的页面创建一个按钮，并将其与print-js库中的print()函数关联。您可以使用以下代码： ```html <button onclick="printJS('page1.html')">Print Page 1</button> <button onclick="printJS('page2.html')">Print Page 2</button> <button onclick="printJS('page3.html')">Print Page 3</button> ``` 3. 最后，您需要在每个要打印的页面中包含一个隐藏的div元素，其中包含要打印的内容。您可以使用以下代码： ```html <div id="print-content" style="display:none;"> <!-- Your content goes here --> </div> ``` 然后，在按钮上调用print()函数时，它将自动打印与相应页面关联的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值