为什么在iOS中显示为PDF时,具有居中文本的底部表格单元会被切断？
Zio*_*rez 39 html css pdf ios swift
题
我有一个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()函数从中提取html源代码sample.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.
小智 0
据我所知，问题发布已经有一段时间了。但我对此很感兴趣，并试图找出为什么会发生这种情况。
我还尝试测试各种组合来检查这一点。但看起来原生 iOS 代码没有任何帮助。但是，为底部的桌子分配自动高度似乎可以完成这项工作。但设置明确的高度并不起作用。
table.bottom-table {
width: 1012px;
height: auto;
}
在另一种情况下，渲染的 PDF 看起来在设置 PDF 框架时可能存在一些问题。我想您也知道，当高度超过一定限制时，该问题在纵向和横向模式下都存在。
| 归档时间： |
|
| 查看次数： |
1066 次 |
| 最近记录： |