javascript - Kendo UI Drawing API 导出 PDF 过早拆分 html 表格，在页面上生成无用的空白空间-6ren

javascript - Kendo UI Drawing API 导出 PDF 过早拆分 html 表格，在页面上生成无用的空白空间

转载作者：行者123 更新时间：2023-11-30 00:04:45

我正在使用 Kendo UI Drawing API 将一个简单的 html 表格导出为 PDF。

由于默认字体大小很大，我根据官方 Kendo UI 文档(可在 kendoui.io/kendo-ui/framework/drawing/drawing-dom#customizing-the-looks).

问题是减小字体大小会导出我的表格以错误的高度拆分，导致不必要的空白，如您在此处看到的:

你们知道为什么会这样吗？我已经尝试过:

不同的边距大小
不同的 forcePageBreak 值
不同的纸张尺寸(尽管我需要使用 A4 尺寸)

感谢您的关注。我希望你能帮助我解决这个问题。

我已经包含了一个非常基本的 JS、CSS 和 HTML 片段，以防您需要查看它:

	function getPDF(selector, nro, dateC) {	
		kendo.drawing.drawDOM(
			$(selector),
			{ 
				forcePageBreak: "-",
				paperSize: "A4",
				margin: "0cm",
				multiPage: true
			}).then(function(group) {
				//Render the result as a PDF file
				return kendo.drawing.exportPDF(group);
			}).done(function(data) {				
				//Save the PDF file
				kendo.saveAs({
					dataURI: data,
					fileName: "filename.pdf"
				});
			});
	}

	  .k-pdf-export *{
	    font-size: 6pt;
	    font-family:Arial, sans-serif;
	  }
	  .k-pdf-export h5 {
    	border: none;
    	padding-bottom: 0px;
    	font-weight:bold;
    	margin-bottom:5px;
	  }
	  .k-pdf-export .configuration-summary .quote-total td{
	  font-weight:bold;
	  }
	  .k-pdf-export strong{
	  	width:100px;
	  }

<body>
	<div class="wrapper">
		<header class="main-header">
			<section class="header"></section>
			<section class="main-menu">
				<div class="container" id="navmenu"> 
					<ul class="main-nav"></ul>		
				</div>
			</section>
		</header>
		<div class="content-wrapper">
			<div class="container">
				<section class="content">					
					<div class="container">
						<section class="content">
							<div class="form-horizontal">
								<div class="section-heading">
									<h3>Title</h3>
								</div>
								<div id="printable" class="row service-configuration configuration-summary service-quote">
									<div class="col-sm-12 main-column">
										<div class="white-space overf">
											<div class="quote-header">
												<hr class="blankspace-10">
												<div class="row">
													<div class="col-sm-6 billing-information">
														<h5>Information</h5>
														<p>
															<strong>Sit dolor</strong> <i>Lorem Ipsum</i>
															<br>
															<strong>Sit dolor</strong> <i>Lorem Ipsum</i>
															<br>
															<strong>Sit dolor</strong> <i>Lorem Ipsum</i>
															<br>

															<strong>Sit dolor</strong> <i>Lorem Ipsum</i>
														</p>
													</div>
													<div class="col-sm-6 order-information">
														<h5>Details</h5>
														<p>
															<strong>Sit dolor</strong>Lorem Ipsum
															<br>
															<strong>Sit dolor</strong>Lorem Ipsum
															<br>
															<strong>Sit dolor</strong>Lorem Ipsum
															<br> <strong>Sit dolor</strong>Lorem Ipsum
															<br>
														</p>
													</div>
												</div>
												<hr class="blankspace-40">
												<h5 class="quote-details-title">Table</h5>
												<div class="table loosetext">
													<table>
														<thead class="forcenowrap">
															<tr>
																<th>Field</th>
																<th>Field 2</th>
																<th class="qty">Field 3</th>
																<th class="price">Field 4</th>
															</tr>
														</thead>
														<tbody>
															<tr>
																<td colspan="4" class="addon-category">Suspendisse sed ex tristique</td>
															</tr>
															<tr>
																<td class="sku">Suspendisse sed ex tristique
																</td>
																<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae sagittis odio, eget malesuada neque.
																</td>
																<td class="qty">1</td>
																<td class="price"><span class="price">494.00</span>
																</td>
															</tr>
															<tr>
																<td colspan="4" class="addon-category">Suspendisse sed ex tristique</td>
															</tr>
															<tr>
																<td class="sku">Suspendisse sed ex tristique
																</td>
																<td>Consectetur adipiscing elit. Sed vitae sagittis.
																</td>
																<td class="qty">1</td>
																<td class="price"><span class="price">25.25</span>
																</td>
															</tr>
															<tr>
																<td class="sku">Suspendisse sed ex tristique
																</td>
																<td>Consectetur adipiscing elit. Sed vitae sagittis.
																</td>
																<td class="qty">1</td>
																<td class="price"><span class="price">125.88</span>
																</td>
															</tr>
															<tr>
																<td class="sku">Suspendisse sed ex tristique
																</td>
																<td>Consectetur adipiscing elit. Sed vitae sagittis.
																</td>
																<td class="qty">1</td>
																<td class="price"><span class="price">297.88</span>
																</td>
															</tr>
															<tr>
																<td class="sku">Suspendisse sed ex tristique</td>
																<td>Consectetur adipiscing elit. Sed vitae sagittis. </td>
																<td class="qty">1</td>
																<td class="price"><span class="price">563.73</span>
																</td>
															</tr>
															<tr>
																<td class="sku">Suspendisse sed ex tristique
																</td>
																<td>Consectetur adipiscing elit. Sed vitae sagittis.
																</td>
																<td class="qty">1</td>
																<td class="price"><span class="price">238.36</span>
																</td>
															</tr>
															<tr>
																<td class="sku">Suspendisse sed ex tristique
																</td>
																<td>Consectetur adipiscing elit. Sed vitae sagittis.
																</td>
																<td class="qty">1</td>
																<td class="price"><span class="price">63.32</span>
																</td>
															</tr>
															<tr>
																<td class="sku">Suspendisse sed ex tristique</td>
																<td>Consectetur adipiscing elit. Sed vitae sagittis.
																</td>
																<td class="qty">1</td>
																<td class="price"><span class="price">1,013.56</span>
																</td>
															</tr>
														</tbody>
														<tfoot class="quote-total">
															<tr>
																<td></td>
																<td colspan="3">Value <span class="price">999.99</span>
																</td>
															</tr>
														</tfoot>
													</table>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</section>
					</div>
				</section>
			</div>
		</div>
	</div>	
</body>

最佳答案

好的，经过一些测试我设法克服了这个问题。这是我在代码中修改的内容:

设置要导出的元素的宽度和高度，相当于 A4 页面，以英寸为单位(即设置 width: 7in 和 height: 9.25in)。这是使一切都适合的唯一变化。
在绘图函数中设置"landscape : false"。
为一些包含 div 设置 "border:none" 和 "overflow:initial"。
更改要导出的目标元素(因此它寻找通用容器 div，而不是带有类和定义的 css 的 div)。

我不确定哪一个解决了我的问题!但我希望它也能解决其他人的问题。

关于javascript - Kendo UI Drawing API 导出 PDF 过早拆分 html 表格，在页面上生成无用的空白空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38925479/

文章推荐： android - 强制 youtube 播放器以 hd720 质量播放

文章推荐： javascript - 如何调试 docker 容器中的段错误？

文章推荐： android - Ionic - 自定义字体不加载

pdf - 将多个 PDF 合并为一个 PDF
我的代码有一些问题。我正在尝试遍历包含许多 PDF 的 Drive 文件夹，然后将它们合并为一个文件。当我使用我的代码时，它只是为 Drive 文件夹中的最后一个 PDF 创建一个 PDF，而不是按预
pdf - PDF 规范中的最小 PDF 示例
我从 PDF Specification 获取了 PDF 规范中的最小 PDF 示例。，将其复制到记事本，将文件重命名为扩展名为 .pdf。我可以用其他 PDF 查看器(PDF-XChange、S
pdf - 在不破坏可访问性或 PDF 标签的情况下连接 PDF
感谢您在以下方面的帮助: 我有 2 个部分可访问的 PDF(包含标签)，我想使用一些命令行工具(如 PDFtk 或 Ghostscript，或任何 Perl 模块)将它们连接起来: 我已经尝试使用 P
pdf - Ghostscript - 将矢量 pdf 转换为光栅 pdf
我想使用 ghostscript 将矢量 pdf 转换为光栅 pdf(即光栅化矢量 pdf)。但是即使我添加了解析参数 -r300，我也找不到合适的参数来执行此操作。我使用的代码是-dSAFER -
pdf - iTextSharp 可以将 PDF 文档转换为 PDF/A
我无法在 FAQ 中找到这个功能是否存在于 API 中，尽管它在书中提到作为潜在可用的东西。有没有人有任何实现此功能的经验？最佳答案在 This thread (日期为 2007 年 6 月)Pa
pdf - 使用 pdf.js 在网站上显示 PDF
我要放文件sample.pdf在我的网站上，并希望使用 pdf.js 显示它.我想要的是显示我自己的文件，如 demo ，带有工具栏，放大/缩小等。到目前为止，我还不能这样做。我确实检查了 hell
pdf - 将 PDF 转换为 PDF/A-1
我知道这可能不是严格意义上的编程问题(也许是，我不知道)但我在尝试转换常规 pdf(带有超链接、书签、图像、嵌入字体等)时遇到了严重问题.) 转换为 PDF/A-1 格式。当我用 pdfaPilot
PDF.js 能够创建 pdf 文件或 PDF.js 只是一个让 PDF 文件显示在网络浏览器上的功能？
这是 PDF.js 网站 https://github.com/mozilla/pdf.js 我正在搜索和阅读很多文章，大多数编码都是将 pdf 导入 pdf.js 并在浏览器上显示，我不明白是不是
pdf-generation - 扫描图像/PDF 到可搜索图像/PDF
谁能建议我如何将扫描图像转换为可搜索图像或如何将扫描 pdf 转换为可搜索 pdf？很长一段时间以来，我一直陷入这种情况。我已经在 ubuntu 中尝试过 pdfocr 应用程序，但没有成功。最
pdf - Itext pdf 延迟签名导致 pdf 签名无效
作为我对客户端/服务器 pdf 签名研究的一部分，我测试了 itext pdf 延迟签名示例。不幸的是，我生成的 pdf 即合并空签名 pdf 和哈希值的输出显示无效签名。我的代码片段如下 cla
pdf - 在 PDF 中插入 PDF(不合并文件)
我想将一个 PDF 页面插入到另一个已缩放的 PDF 页面中。我想使用 iTextSharp 来实现此目的。我有一个矢量绘图，可以导出为单页 PDF 文件。我想将此文件添加到其他 PDF 文档的页面
pdf - Itext pdf 延迟签名导致 pdf 签名无效
作为我对客户端/服务器 pdf 签名研究的一部分，我测试了 itext pdf 延迟签名示例。不幸的是，我生成的 pdf 即合并空签名 pdf 和哈希值的输出显示无效签名。我的代码片段如下 cla
pdf - 裁剪基于文本的多页 PDF 文档的白边并将其转换为基于图像的 PDF 文档
我想为 Kindle 转换电子书。我尝试使用 Calibre 将具有复杂格式样式和图像的基于两种语言的基于文本的大型 PDF 电子书转换为适用于 Kindle 的 AZW3 电子书，并且还尝试了亚马逊
pdf - 如何仅使用 Adobe PDF 插件强制在谷歌浏览器中显示 PDF
我在 Google Chrome 中显示 pdf 时遇到问题。问题是 Chrome 将 pdf 的某些页面显示为黑色。启用 Chrome PDF 查看器时会发生这种情况。如果我禁用此插件并使用 Ad
pdf - 打印时将空白页插入 PDF
我确信这个问题无处不在，尽管我似乎找不到答案。我希望我的 PDF 文档在 PDF 阅读器中显示时没有空白页，但随后在封面后打印空白页，这样打印出来的文档在右侧甚至左侧都有奇数页。还有其他人遇到过这个问
pdf - 从命令行自动裁剪 pdf
我需要自动裁剪 pdf 文件(去除白边)。到目前为止，我尝试了两种并不完美的工具: pdf裁剪问题:它不会裁剪某些 pdf。 pdf-crop-margins 问题:有时它裁剪得太多(精细的细节)。
pdf - PDF 中的透明图像
This PDF由几个源文件组成。其中五个是包含 alpha channel 的 PNG。一种是没有 alpha channel 的 PNG。最后一 block 是带有透明效果的 Photoshop
pdf - 将内部维基页面转换为 PDF
我的团队将内部 wiki 页面用于各种内容。这些页面是使用 MediaWiki 创建的。我想知道是否有任何方法可以将 wiki 页面转换为 PDF 格式。我必须用它来将用户文档转换为 PDF 格式，以
pdf - 从结构化数据生成 PDF
我希望能够从我可能在数据库或 xml 或任何其他结构化形式中拥有的数据生成高度图形化(也包含大量文本内容)的 PDF 文件。目前，我们的平面设计师在将内容作为 MS Word 文档后，在 Photo
pdf - 查找重复的 PDF
我正在寻找可以帮助我找到重复 PDF 的实用程序。问题:我有 1000 个 PDF 文件。有些是重复的。由于不同的文件名和文件大小的微小差异，它们不容易被检测到。是否有实用程序/算法/库可以帮助我找到

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Kendo UI Drawing API 导出 PDF 过早拆分 html 表格，在页面上生成无用的空白空间