☰

變更 Internet 瀏覽器中顯示的 pdf 頁面和字體顏色

tag-icon • tag-icon google-chrome firefox browser pdf colors
變更 Internet 瀏覽器中顯示的 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

以下範例使用此處和中所示的切換器變體https://stackoverflow.com/a/71777470/10802527

在此輸入影像描述

沒有多少人明白，要在「瀏覽器」中查看 PDF，實際上必須下載它（除非煙霧和鏡子，將頁面複製為帶有 html 文字覆蓋的圖像）。因此，對於 Chromium/Edge，您可以設定為“僅下載”，然後在“深色閱讀器”中開啟 PDF。如果不需要，您可以稍後處理 pdf，就像瀏覽器處理其快取副本一樣。 在此輸入影像描述

對於 Windows，您可以在 Wine 中使用 SumatraPDF（如上所示）或 Okular（如下所示），或 Linux、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/

相關內容