我有一个iOS应用程序,它接受一个HTML文件,将其转换为pdf,并将其显示到WebKit Web视图.我有一个奇怪的问题,当我显示为pdf时,底部表格单元被切断.奇怪的是,只有当文本居中时才会切断底部表格.如果左对齐,一切正常.为什么会这样？
请注意,我不是在寻找解决方案.相反,我想了解为什么会发生这种情况.这是iOS中的错误吗？还是我错过了什么？
概观
在下图中,有两个表< table>.一张桌子很大,背景为红色(珊瑚色),高度为505px.另一张桌子位于第一张白色背景下面(未设置高度).两者都有一些文字.文本以两个表为中心.
导航栏标题显示当前视图的详细信息.例如,如下图所示,pdf横向505的标题表示视图以横向尺寸显示pdf,主表高度为505px.
问题
当我将高度增加10px时会出现问题.在下图中,主表高度为515px,下表现已切断.
使用完全相同的HTML和CSS代码并仅更改文本对齐方式以使其左对齐.现在下桌不再被切断了.我还将背景颜色更改为绿色以区分.绿色表示文本左对齐.红色表示文本居中.
下图显示主表高度为745px,但下表仍然没有被切断,因为它是左对齐的.
码
下面是用于此测试的HTML代码.
<!DOCTYPE HTML><HTML><head> <Title>#color#</Title> <Meta charset="utf-8"> <style> table,th,td { border-collapse: collapse; border: 3px solID black; text-align: #AliGN#; } table.main-table { wIDth: 1012px; height: #HEIGHT#px; background-color: #color#; } table.bottom-table { wIDth: 1012px; } </style></head><body> <table > <tr><td>Hello World.</td></tr> </table> <table > <tr><td>This text gets cut off when centered. It does *not* get cut when left-aligned.</td></tr> </table></body></HTML> 在MyVIEwController中,getHTML()函数从sample.HTML中提取HTML源代码.然后,该函数将#AliGN#,#color#和#HEIGHT#替换为各自的值.
func getHTML() -> String? { let HTMLPath: String? = Bundle.main.path(forResource: HTMLResource,ofType: "HTML") guard let path = HTMLPath else { return nil } do { // Load the HTML template code into a String variable. var HTML = try String(contentsOffile: path) HTML = HTML.replacingOccurrences(of: "#HEIGHT#",with: tableHeight.description) HTML = HTML.replacingOccurrences(of: "#color#",with: colorState.rawValue) HTML = HTML.replacingOccurrences(of: "#AliGN#",with: alignState.rawValue) return HTML } catch { print("Error: " + error.localizedDescription) } return nil} pdfBuilder类使用一个函数处理pdf创建：
static func exportHTMLTopdf(HTML: String,frame: CGRect) -> Data { // Set a printable frame and inset let pageFrame = frame let insetRect = pageFrame.insetBy(dx: 10.0,dy: 10.0) // Create a UIPrintPageRenderer and set the paperRect and printableRect using above values. let pageRenderer = UIPrintPageRenderer() pageRenderer.setValue(pageFrame,forKey: "paperRect") pageRenderer.setValue(insetRect,forKey: "printableRect") // Create a printFormatter and pass the HTML code as a string. let printFormatter = UIMarkupTextPrintFormatter(markupText: HTML) // Add the printFormatter to the pageRenderer pageRenderer.addPrintFormatter(printFormatter,startingAtPageAt: 0) // This data var is where the pdf will be stored once created. let data = NSMutableData() // This is where the pdf gets drawn. UIGraphicsBeginPdfcontextToData(data,pageFrame,nil) UIGraphicsBeginpdfpage() pageRenderer.drawPage(at: 0,in: UIGraphicsGetPdfcontextBounds()) print("bounds: " + UIGraphicsGetPdfcontextBounds().deBUGDescription) UIGraphicsEndPdfcontext() return data as Data} 这个项目也在Github：
https://github.com/starkindustries/PrintPDFTest
采取的故障排除步骤
>尺寸：我尝试过使用pdf尺寸的大小.这对结果没有影响.
>列：我尝试使用多个列而不是一个.同样的问题;没有不同.
>表：我尝试只使用一个表而不是两个.使用一个表格和两个单元格,当文本居中时,底部单元格仍会被切断;当文本左对齐时,底部单元格不会被切割.
> iPhone：我尝试在不同的iPhone设备(iPhone 6s,iPhone 8,iPad Pro)上进行模拟.同样的问题.
> div：如果使用div而不是第二个表,问题就会神奇地修复.但为什么div工作而不是表？
应用笔记
顶部工具栏有两个按钮：绿色和红色.绿色使文本左对齐.红色使文本居中.
底部工具栏有五个按钮：倒带,HTML,纵向,横向和快进.倒带按钮可将主桌的高度降低10px.快进将高度增加10px. HTML按钮显示HTML视图.纵向和横向以各自的方向显示pdf.
解决方法 我认为这是问题所在：table,td { border-collapse: collapse; border: 3px solID black; text-align: #AliGN#; } 在桌子上设置规则,& th,td对我来说很麻烦(麻烦多了几个pdf渲染问题)
如果它不是文本对齐,根据DeadLock的评论…那么它可能是应用于td的边界崩溃(我认为它只需要在桌子上).
这种事情的另一个前端调试技巧是：
* {border：1px solID#f00}或* {Box-shadow：inset 0 0 1px#f00}(后者不会冒任何因素添加任何元素的比例,但可能无法在pdf视图中呈现)这些规则将帮助您一目了然地看到每个编辑对布局的影响,而不必转向元素检查器.
此外,请确保您很好地理解表格元素在该dom中默认呈现的方式.
在声明元素和element.class的规则时,你可能会抛出一些东西.与没有样式的行为相比,然后逐个添加它们.
我重写了你的代码：
<!DOCTYPE HTML><HTML><head> <Title>color</Title> <Meta charset="utf-8"> <style> table{ border-collapse: collapse; } th{ } td { border-wIDth:3px; border-style:solID; border-color:#000000; } tr{ text-align: center; } table.main-table { wIDth: 1012px; height: 515px; /* There's a lot you can do here instead of height: 515px; if needed I can elaborate. I'm guessing the content is varible-height? does flex-Box make it through the pdf-generator? */ background-color: #ccc; } table.bottom-table { wIDth: 1012px; } </style></head><body> <table > <tr><td>Hello World.</td></tr> </table> <table > <tr><td>This text gets cut off when centered. It does *not* get cut when left-aligned.</td></tr> </table></body></HTML> 其他问题：
你能用调试器在仿真中检查它吗？
或者,您是否可以更改输出pdf的方式以显示错误？
行的高度可以是百分比吗？
总结以上是内存溢出为你收集整理的html – 为什么在iOS中显示为PDF时,具有居中文本的底部表格单元格会被切断？全部内容，希望文章能够帮你解决html – 为什么在iOS中显示为PDF时,具有居中文本的底部表格单元格会被切断？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）