我有一个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 class="main-table"> <tr><td>Hello World.</td></tr> </table> <table class="bottom-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 class="main-table"> <tr><td>Hello World.</td></tr> </table> <table class="bottom-table"> <tr><td>This text gets cut off when centered. It does *not* get cut when left-aligned.</td></tr> </table> </body> </html>
其他问题：
你能用调试器在仿真中检查它吗？
或者,您是否可以更改输出pdf的方式以显示错误？
行的高度可以是百分比吗？
