☰

更改互联网浏览器中显示的 PDF 页面和字体颜色

tag-icon • tag-icon google-chrome firefox browser pdf colors
更改互联网浏览器中显示的 PDF 页面和字体颜色

PDF文件在Chrome、Firefox等浏览器中打开时显示的页面颜色和字体可以改变吗？

我想在笔记本电脑上阅读长篇 PDF 文本，同时能够更改页面背景和文本的颜色。 我是不是对反转颜色感兴趣——这将导致在深黑色背景上出现亮白色文字

在此处输入图片描述

而是调整这两个元素的颜色，得到更平衡、更赏心悦目的效果，类似于电子书阅读器显示电子书的方式：

在此处输入图片描述

使用不同的 PDF 阅读器可以实现这一点。在 Linux 中我可以使用Adobe 阅读器、福祉阅读器，尤其是掌握 PDF 编辑器，它不仅可以更改基于文本的 PDF（保存/导出/打印为 PDF 的文本文档）中显示的页面和字体颜色，还可以更改基于图像的 PDF（扫描并保存为 PDF 的纸质文本）中显示的页面和字体颜色。有关此内容的更多详细信息这里。

那么网络浏览器呢？我知道主流浏览器很擅长阅读 PDF 文件。

答案1

嗯，Chrome 目前仍然不能，但旧版浏览器可以根据自己的能力进行自定义，这里的反转只需按I 在此处输入图片描述 在此处输入图片描述

在当前的 Firefox 中，你可以设置书签来改变颜色，但你的里程可能会有所不同，请参阅
https://stackoverflow.com/questions/61814564/how-can-i-enable-dark-mode-when-viewing-a-pdf-file-in-firefox

以下示例使用 toggler 变体，如此处和中所示https://stackoverflow.com/a/71777470/10802527

在此处输入图片描述

很多人不明白，要在“浏览器”中查看 PDF，实际上必须下载它（除非是障眼法，将页面复制为带有 h​​tml 文本覆盖的图像）。因此，对于 Chromium/Edge，您可以设置为“仅下载”，然后在“Dark Reader”中打开 PDF。如果不需要，您可以随后处理 PDF，就像浏览器处理其缓存副本一样。 在此处输入图片描述

对于 Windows，您可以使用 SumatraPDF（如上所示）或 Okular（如下图所示），或者对于 Linux，您可以使用 Wine 中的 Okular 原生或 SumatraPDF（32/64/Arm）。
在此处输入图片描述

答案2

在 Firefox 版本 112.02 中，这对我来说有效：

强制 Firefox pdf 查看器背景和前景色

在地址栏中输入：

about:config

在搜索字段中输入：

pdfjs

设置这些配置选项：

pdfjs.forcePageColors          true
pdfjs.pageColorsBackground     #202020 
pdfjs.pageColorsForeground     #d1d1d1

切换到已加载 pdf 的选项卡并按 F5（刷新）以查看结果。

由于只强制使用背景色和前景色，pdf 中的图像保持完整，这非常好（其他/较旧的解决方案完全反转了 pdf）。

示例图像 1

相对

示例图像 2

答案3

我检查了基于 Chromium 的浏览器和 Edge，答案是否定的。随附的 PDF 查看器非常基础。您可能会留意第三方扩展，但我没有发现任何

答案4

也许可以用这个解决方法：

将其粘贴到浏览器控制台（Ctrlshifti）中，然后单击enter

function toggle() {
    let q = document.querySelectorAll('#nightify')
    if(q.length) {
        q[0].parentNode.removeChild(q[0])
        return false
    }
    var h = document.getElementsByTagName('head')[0],
        s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    s.setAttribute('id', 'nightify');
    s.appendChild(document.createTextNode('html{-webkit-filter:invert(100%) hue-rotate(180deg) contrast(70%) !important; background: #fff;} .line-content {background-color: #fefefe;}'));
    h.appendChild(s); 
    return true
}

toggle()

来源：https://dev.to/jochemstoel/re-add-dark-mode-to-any-website-with-just-a-few-lines-of-code-phl

其他选择：

var cover = document.createElement("div");
let css = `
position: fixed;
pointer-events: none;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #cecece;
mix-blend-mode: difference;
z-index: 1;
`
cover.setAttribute("style", css);
document.body.appendChild(cover);

改编自：https://windowsreport.com/invert-colors-pdf/

相关内容