☰

如何将 HTML 转换为 PDF 并保持可滚动区域内内容的可见性

tag-icon • tag-icon firefox microsoft-word pdf html
如何将 HTML 转换为 PDF 并保持可滚动区域内内容的可见性

问题

当我使用将 HTML 内容转换为 PDF 时

  1. “将页面打印为 PDF“ Firefox 插件（滚动区域内容被保留但无法看到它们）
  2. CutePDF 作家缺少内容（无格式，但可读）
  3. 另存为 HTML -> 打开方式微软 Word 2010-> PDF（格式被破坏）

有什么方法可以确保可滚动区域内的内容正确可见？

示例场景：

Stack Overflow 上的一个问题截屏

一个 stackoverflow 问题

如您所见，滚动视图隐藏了一些代码。

转换后，PDF 中缺少不可见部分

转换后

答案1

根本原因

在这个特定案例中，问题的根本原因是 的样式表存在缺陷stackoverflow.com。

如果你检查另一个网站的 CSS比如codereview.stackexchange.com，你会看到

@media print {
    …

    pre {
        max-height: none;
        display: block;
        width: 600px;
        height: auto;
        overflow-x: auto;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap !important;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        clear: both
    }

    …
}

关键属性是white-space: pre-wrap。

解决方法

您可以使用许多 Firefox 插件，例如萤火虫，Web开发人员， 或者时髦的，在打印前临时调整样式规则。页面卸载后，此类更改将不会保留。

或者，你可以使用以下方法半永久地覆盖 CSS，无需任何附加组件：編輯userContent.css具体来说，解决此布局问题的最窄定制是：

@-moz-document domain(stackoverflow.com) {
    @media print {
        pre {
            white-space: pre-wrap;
        }
    }
}

申请后userContent.css

成功输出

隐藏代码被保留。

答案2

解决方案 1：输出 PDF（可读，但样式不保留）

使用可读性插件或网站

Readability 是一个免费的阅读平台，旨在无论您身在何处都能提供出色的阅读体验，并提供一个系统将读者与他们喜欢的作家联系起来。

和打印 编辑插入

打印编辑允许在打印预览模式下编辑网页内容。打印前编辑网页可以压缩布局并删除不需要的内容，例如广告、侧边栏和空白页。

在打印编辑模式下，可以在打印预览模式下打印之前格式化、隐藏或删除任何显示的内容元素。可以在打印编辑模式和打印预览模式之间反复切换。

脚步：

  1. 将文章添加到可读性
    将文章添加到可读性
  2. 改变外观直到满意为止
    外观
  3. 单击打印编辑
    打印 编辑
  4. 删除内容
    在此处输入图片描述
  5. 按预览
  6. 按页面设置并做出改变
  7. 按制作 PDF然后保存 PDF
  8. 重命名文件以包含 PDF 扩展名

解决方案 2：输出 MAFF（所有内容均保留，但文件格式不同）

使用 MAFF（Mozilla 存档格式）

此扩展增强了网页在您的计算机上保存的方式。

与内置保存系统相比，它具有以下优点：

  • 完整的页面可以保存为单个文件（网络存档）
  • 您可以使用页面标题命名文件（标题保存）
  • 保存的页面忠实于原始页面（精确保存）

您可以查看和保存 MHT（MHTML）文件，与 Internet Explorer 具有出色的兼容性；但更重要的是，您可以使用 MAFF 文件格式，具有以下优点：

  • 节省磁盘空间，因为 MAFF 文件是压缩的
  • 包括嵌入在页面中的视频和音频
  • 具有通用性，因为 MAFF 基于 ZIP 并且与 Linux 和其他平台兼容
  • 使用开放格式，没有供应商锁定的风险

相关内容