草庐IT

jsPDF + html2canvas A4分页截断 完美解决方案(含代码 + 案例)

业务需求网页html生成A4大小分页的pdf,翻遍了整个互联网发现没有很系统的整理与分析,甚至对jsPDF的解析也没有几篇。遇到过几次,用的比较多,完成代码编写后特此整理分析,自我记录。业务难点1.存在图片/组件/文字被分割的现象,即分页处理2.包括页头、页脚、上下安全间隔的情况3.富文本分页情况处理思路通过深度搜索优先遍历,从顶部遍历需要转换的HTML节点,并将节点分为三种情况进行处理(1.普通节点。2.需要进行分页处理并且内部可能包含也需要分页处理子节点的节点。3.需要进行分页内部不包含需要分页处理的节点,即深度搜索的终点节点),通过从高到低遍历维护一个分页数组pages,该数组记录每一页

javascript - 拉伸(stretch) div 到 A4 大小

我有以下功能,效果很好。functionprintDiv(printpage){varheadstr="";varnewstr=document.all.item(printpage).innerHTML;varoldstr=document.body.innerHTML;document.body.innerHTML=headstr+newstr;window.print();document.body.innerHTML=oldstr;returnfalse;}但是我的div大约是纸张大小的一半。有没有办法在调用该函数时使我的div拉伸(stretch)到完整的纸张大小?

javascript - 拉伸(stretch) div 到 A4 大小

我有以下功能,效果很好。functionprintDiv(printpage){varheadstr="";varnewstr=document.all.item(printpage).innerHTML;varoldstr=document.body.innerHTML;document.body.innerHTML=headstr+newstr;window.print();document.body.innerHTML=oldstr;returnfalse;}但是我的div大约是纸张大小的一半。有没有办法在调用该函数时使我的div拉伸(stretch)到完整的纸张大小?

html - 具有精确 A4 横向尺寸的空正文元素打印在 2 页上

演示:print()@page{size:A4landscape;margin:0;}html,body{margin:0;}html{background:cyan;}body{width:297mm;height:210mm;background:red;}A4横向的尺寸是正确的,但打印溢出到第二页。这些发生在Win10Chrome63、FF52和Edge41中。WhenIusetheportraitdimensionsandprintA4Portrait,thenonlyonepageisprintedasexpected,withoutanyoverflow.有人知道这个问题吗

html - 具有精确 A4 横向尺寸的空正文元素打印在 2 页上

演示:print()@page{size:A4landscape;margin:0;}html,body{margin:0;}html{background:cyan;}body{width:297mm;height:210mm;background:red;}A4横向的尺寸是正确的,但打印溢出到第二页。这些发生在Win10Chrome63、FF52和Edge41中。WhenIusetheportraitdimensionsandprintA4Portrait,thenonlyonepageisprintedasexpected,withoutanyoverflow.有人知道这个问题吗

html - A4 页面像 html 中的布局

我正在开发基于web的小型应用程序,向用户显示2-3页长的报告,可以打印为PDF。我在stackoverflow上查看了不同的解决方案/互联网,并找到了打印方面的一些工作解决方案(内容打印有额外的边距,但我需要解决这个问题)我目前的问题是我无法在浏览器中显示html内容,页面布局。我能够显示A4尺寸的第一页,但一旦内容超出一页,它就会显示为打印在页面外,您可以查看下面的图片页面在浏览器中的显示方式打印预览的样子这是CSS.A4{background:white;width:21cm;height:29.7cm;display:block;margin:0auto;padding:10p

html - A4 页面像 html 中的布局

我正在开发基于web的小型应用程序,向用户显示2-3页长的报告,可以打印为PDF。我在stackoverflow上查看了不同的解决方案/互联网,并找到了打印方面的一些工作解决方案(内容打印有额外的边距,但我需要解决这个问题)我目前的问题是我无法在浏览器中显示html内容,页面布局。我能够显示A4尺寸的第一页,但一旦内容超出一页,它就会显示为打印在页面外,您可以查看下面的图片页面在浏览器中的显示方式打印预览的样子这是CSS.A4{background:white;width:21cm;height:29.7cm;display:block;margin:0auto;padding:10p

javascript - phantomjs 使内容适合 A4 页面

我想将HTML页面转换为A4大小的PDF。page.paperSize={format:'A4',orientation:'portrait',border:'1cm'};有没有办法缩放网站以适应A4的宽度?如果我有以下HTML:right1500pxdiv的右端脱离页面。我玩过viewportSize属性:page.viewportSize={width:480,height:800};我原以为较大的视口(viewport)宽度会导致页面的较大部分被渲染到PDF中。page.zoom也没有达到预期的效果。PDF文件是报告。为了专业的外观,它们应该是A4,而不是任意大小。或者phant

javascript - phantomjs 使内容适合 A4 页面

我想将HTML页面转换为A4大小的PDF。page.paperSize={format:'A4',orientation:'portrait',border:'1cm'};有没有办法缩放网站以适应A4的宽度?如果我有以下HTML:right1500pxdiv的右端脱离页面。我玩过viewportSize属性:page.viewportSize={width:480,height:800};我原以为较大的视口(viewport)宽度会导致页面的较大部分被渲染到PDF中。page.zoom也没有达到预期的效果。PDF文件是报告。为了专业的外观,它们应该是A4,而不是任意大小。或者phant

c# - iTextSharp 设置文档横向(横向)A4

如何在iTextSharp中设置横向(水平)格式的A4文档? 最佳答案 您可以将页面大小设置为旋转的A4。例如。(假设是PDF,但无论如何都应该适用):iTextSharp.text.Documentdoc;//...initialize'doc'...//Setthepagesizedoc.SetPageSize(iTextSharp.text.PageSize.A4.Rotate());我已经毫无困难地使用PDF完成了此操作,还没有尝试使用其他文档类型。 关于c#-iTextShar