Print js踩坑之路

已于 2023-07-18 11:53:05 修改
阅读量464 收藏
点赞数
分类专栏： 前端 print.js 文章标签： 前端 js
于 2023-06-15 19:54:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35084280/article/details/131234642
版权
文章探讨了如何使用CSS属性`page-break-after:always`进行页面分页打印，同时指出了在使用div布局时可能出现的内容缺失、图片顺序混乱和浮动覆盖的问题。推荐使用table布局来避免这些问题。此外，针对部分页面内容换行并遮盖其他内容的异常情况，文章提出了给换行单元格设定固定宽度的解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 使用page-break-after:always实现页面分页打印

2.出现空白、内容缺失、图片顺序错乱和覆盖的问题？

解决方案就是通过table对内容进行布局，div布局容易出现浮动覆盖的问题

3.部分页面出现内容换行、遮盖其他行内容?,而且只有部分电脑会出现这个问题？

这时候给换行的单元格给一个固定宽度就解决了

word打印---doc转html后进行打印，window.print、print-js、vue-print-nb
weixin_44434938的博客
08-01 850
word打印---doc转html后进行打印，window.print、print-js、vue-print-nb
Vue使用PrintJS实现页面打印功能
m0_72416767的博客
10-26 5143
收到一个需求,要求实现 拼接成表格并能一键回填数据并能打印成A4大小(或者生成pdf)的功能。实际上回填数据以及拼接部分都很简单,稍微陌生的就是调用浏览器打印功能并将页面内容变成pdf并打印。然后百度了一下发现百度上给出的解决方案并不够具体,很容易踩坑出现各种奇怪的错误,于是就将本人的踩坑解决方案以及思路都记录下来。
JS 实现分页打印功能
01-19
在调用window.print()时，可以实现打印效果，但内容太多时要进行分页打印。 在样式中有规定几个打印的样式 page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。 每个打印属性都可以设定4种设定值：auto、always、left和right。其中Auto是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。 page-break-before若设定成always，则是在遇到特定的组件时，打印机会重新开始一个新的打印页。 page-break-before若设定成left，则会
printjs打印踩坑
博客
02-28 760
一：打印element-table，当表格内容行过多时，表头和表格body分离，表格另开一页。
vue使用print.js详解（打印不全、样式丢失等）
热门推荐
落花生
07-12 1万+
首先网上已经有很多使用步骤，比如 https://www.jianshu.com/p/c5363ddf7d43 相关链接：pringt.js github地址里面也有使用说明 主要记录以下使用时发现的问题： 1.样式问题 我使用的element组件，发现分栏布局 xs\md\lg没有效果。我想大概这种组件封装的样式使用都有点问题。从这思路去入手解决吧。我看了许多，目前好像没有什么好的解决样式的方法。（我的改动不大，把css改成了本地媒体查询显示百分比。当然打印时，只使用基础的显示样式，不会根据屏.
window.print()；html 打印 之 print.js
Midpuss的博客
08-24 763
最近顾客需要把html打印，用window.print() 需要自己创建iframe 把打印内容放入到js创建的iframe 中，调用该iframe 的window.print()进行实现html打印。但是兼容性不怎么好毕竟自己写的哈哈。支持vue，cdn 引入方式，有需要的小伙伴可以自己研究下。
使用print.js进行分页打印
qq_41834729的博客
04-22 7842
如何进行表格大量数据的分页打印 print.js官网 目的：实现大量数据的分页打印 探究过程：几种流行的打印插件， vue-print-nb vue-easy-print 都没有实现自动分页打印功能(网上讲解混乱，有的说可以自动分页，有的说不能，导致在这两个插件上耗费很长时间也没实现功能) 最后选取了print-js， 操作过程 使用 npm 安装： npm install print-js --save html <div id="print-box" style={{ fontS
tinymce 之vue集成+最终实现及从0-1踩坑记录
weixin_40703217的博客
06-01 459
tinymce 之vue集成+最终实现及从0-1踩坑记录
html5 pdf.js无法展示标题,pdf.js 踩坑日志，使用说明， 中文不能显示， 字体模糊， 签名不能显示...
weixin_30871695的博客
06-30 1192
使用版本外链接引入该版本引入上面的链接后， 全局暴露出来PDFJS这个对象遇到的问题中文字体缺失PDFJS.cMapUrl= 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/cmaps/' // include "/"PDFJS.cMapPacked= true // set cMapPacked = true to ignore Warning:...
HarmonyOS应用开发实战：ArkTS语言踩坑解决方案
maniu110的博客
07-12 2462
TaskPool的生命周期无需开发者手动去管理。有一定时间没有执行新的任务，或者在TaskPool线程上没有执行监听任务的情况下，线程可能会被销毁。
jqprint可分页打印页面内容
12-09
利用jquery插件jqprint打印当前页面的标签内容，自动换页，包含jar包，js，java代码。
HTML print打印(分页,统计,排版)
11-21
方案一(适用于动态页面)分层结构 方案二(适用于静态页面)独立结构 /** * 基于jquery的打印分页插件 * 方法API: * loadDate data,model,shownum(数据源[数组],模板页面,每页显示数) data 建议最大数据量不要超过500 * loadTABLE 利用模版创建TABLE代码 * insertTABLE 插入数据 * formwork 创建分页框架 * setAlign 设置排版样式 右对齐 - 居中 * setWidth 设置宽度 * setLineHide 影藏一列数据 * rowspans 合并多列字段 用,隔开 注意:最好查询时使用排序后合并 * rowspan 合并一列字段 注意:最好查询时使用排序后合并 * StringtoJSON 将JSON的String字符,转换成JS对象数据 * getalign 字符切换 对应setAlign 方法 * SumTable 计算表的列("2,3,4") 对应层级TABLE **/
JS分页打印使用window对象的print方法实现
luolinyin的专栏
08-15 508
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分页打印 - JS分页打印使用window对象print的方法实现</title> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compa.
print-js分页批量打印
chiwawa_的博客
06-13 947
解决分页打印页面控制问题
js实现分页打印表格和打印图片print-js
qq_33440740的博客
04-06 858
【代码】js实现分页打印表格和打印图片print-js。
【利用printJS + html2canvas解决前端多页打印并自动分页需求】
siv2333的博客
10-25 953
利用printJS和html2canvas解决前端多页打印并自动分页需求
vue使用printJs实现前端打印,以及打印分页实现
Arcobaleno_1177的博客
08-08 8051
在web端可以直接使用原生调用方法调用打印,但是往往需要单独把需要打印的东西拎出来画一个单独的html,而使用printJs则可选中你需要打印的代码块,进行页面局部打印。
print.js如何实现分页行不被截断且每一页都有表头
weixin_48117629的博客
09-28 1352
print.js分页不断行。
在mongoDB 怎么导入js文件 ，点击>_MONGOSH吗
最新发布
04-03
同时提醒常见错误，比如路径问题、权限问题、语法错误等，帮助用户避免踩坑。在 MongoDB 中通过 mongosh 导入/执行 JS 文件的操作步骤如下： --- ### 方法一：直接执行脚本（推荐） ```bash mongosh "mongodb://...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值