无法使用文本颜色打印 UIWebView。为什么？

Question

我有一个UIWebView。我想使用 AirPrint 打印它的内容。我想出了这段代码：

@IBAction func print(_ sender: Any) {
    let printController = UIPrintInteractionController.shared

    let printInfo = UIPrintInfo(dictionary:nil)
    printInfo.outputType = UIPrintInfoOutputType.general
    printInfo.jobName = "some name"
    printController.printInfo = printInfo

    let formatter = webView.viewPrintFormatter()

    formatter.perPageContentInsets = UIEdgeInsets(top: 72, left: 72, bottom: 72, right: 72)
    printController.printFormatter = formatter

    printController.present(animated: true, completionHandler: nil)
}

当我运行应用程序时，打印交互控制器和一切正常。

但是，我在 html 中有这样的内容，因为我想强调一些文本：

<span style="color: #ff0000">some text</span>

"some text" 在 web 视图中显示为红色，但是当我在打印交互控制器中查看预览时它是黑色的！换句话说，所有的颜色都消失了！

我尝试将 HTML 更改为：

<span style="background: #ff0000">some text</span>

但打印预览显示相同。我很惊讶，因为<hr> 和<h3> 标签在预览中都呈现得很好。

有没有办法打印彩色文本？

注意事项：

• 我确实选择了“模拟彩色激光打印机”
• 我知道我可以截取 web 视图并打印出来。但这不会只打印屏幕上显示的 HTML 部分吗？

Answer 1

看看你的 CSS 的这一部分：

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

此@media print 部分为您的内容在打印时的外观定义了额外的规则。 link

在此部分中，您有一个 *:after 元素，它在页面上的每个元素之后应用内容。 link

在*:after 部分中，您声明黑色（#000），甚至通过将这种颜色声明为!important 来加倍确定黑色 - 赋予此声明比元素中任何颜色声明更重要的权重本身。 link

所以你有几个解决这个问题的选择：

1. 只需从颜色行中删除!important标签：

   颜色：#000;

2. 从您的 CSS 中删除整条颜色线。

3. 从您的 CSS 中删除 *:after 部分。
4. 从您的 CSS 中删除 @media 打印部分。

这完全取决于你的具体目标。