html – 为什么在iOS中显示为PDF时,具有居中文本的底部表格单元

发布时间：2020-12-14 21:24:10 所属栏目：资源来源：网络整理

导读：题我有一个iOS应用程序,它接受一个html文件,将其转换为PDF,并将其显示到WebKit Web视图.我有一个奇怪的问题,当我显示为PDF时,底部表格单元被切断.奇怪的是,只有当文本居中时才会切断底部表格.如果左对齐,一切正常.为什么会这样？请注意,我不是在寻找解决方

题

我有一个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的方式以显示错误？

行的高度可以是百分比吗？

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!