iOS绘制HTML到多列PDF中

Question

我正在使用下面的代码将HTML绘制到PDF中。在HTML呈现到设备时，我使用CSS列来将HTML布局在两列中，但是呈现为PDF时它只有一列。是否有办法将HTML渲染为多列PDF？我猜测UIPrintPageRenderer不支持列，但找不到任何确认的东西。

我使用CSS列的原因是内容长度不定，希望动态地溢出到下一列。

这是我的代码。content是一个包含HTML的字符串。我将完全相同的字符串发送到UIWebView.loadHTMLString(_:baseURL:)，并以两列呈现。

    let renderer = UIPrintPageRenderer()
    renderer.headerHeight = 36
    renderer.footerHeight = 36

    let htmlFormatter = UIMarkupTextPrintFormatter(markupText: content)
    htmlFormatter.startPage = 0
    htmlFormatter.contentInsets = UIEdgeInsetsMake(0, 36, 0, 36)
    renderer.addPrintFormatter(htmlFormatter, startingAtPageAtIndex: 0)

    let paperRect = CGRectMake(0, 0, 612, 792)
    let printableRect = CGRectInset(paperRect, 0, 0)
    renderer.setValue(NSValue.init(CGRect: paperRect), forKey: "paperRect")
    renderer.setValue(NSValue.init(CGRect: printableRect), forKey: "printableRect")

    let pdfData = NSMutableData()
    UIGraphicsBeginPDFContextToData(pdfData, CGRectZero, metadata)

    for i in 0 ..< renderer.numberOfPages() {
        UIGraphicsBeginPDFPage()
        let bounds = UIGraphicsGetPDFContextBounds()
        renderer.drawPageAtIndex(i, inRect: bounds)
    }
    UIGraphicsEndPDFContext()

以下是用于 UIWebView.loadHTMLString(_:baseURL:) 渲染多列的CSS，但对于PDF无效。我在 @media 部分中设置了只在较小屏幕上显示单列。但是我已经尝试将其删除，并添加了一个 @media print 部分，但没有成功：在PDF中仍然只显示为单列。

    .content {
        -webkit-columns: auto 2; /* Chrome, Safari, Opera */
        -moz-columns: auto 2; /* Firefox */
        columns: auto 2;
    }
    @media screen and (max-width: 736px) {
        .content {
            width: 100%;
            -webkit-columns: auto 1; /* Chrome, Safari, Opera */
            -moz-columns: auto 1; /* Firefox */
            columns: auto 1;
        }
    }

- SeanR

---

你可以分享你的源代码吗？即使只是一些源代码片段。 - ylgwhyh

@ylgwhyh，我已经在上面添加了我的代码。 - SeanR

尝试在每个CSS列值的末尾添加!important？可能被覆盖了... - hakJav

@hakJav 谢谢，但那没起作用。 - SeanR

你修好了吗？我这里也遇到了同样的问题，尝试了很多不同的方法但都没有用。 - Alan Donizete

Answer 1

尝试使用HTML列而不是CSS列，并使用CSS样式化列，而不是CSS列。我认为UIGraphics只会获取HTML结构。

<table>
  <tr>
     <td>YourStuffHere</td>
     <td>YourStuffHere</td>
  </tr>
 </table>

- Ruan33

---

我希望列能根据内容自动调整。抱歉，我应该在问题中澄清。我现在会进行编辑。 - SeanR

你可能需要使用JavaScript来更改列，因为JavaScript有很多PDF编写器。 - Ruan33