有没有一种样式设置Google Chrome默认PDF查看器的样式 [英] Is there a way to style Google Chrome default PDF viewer

问题描述

有没有一种样式可以设置谷歌chrome默认pdf视图的样式?我正在尝试将灰色背景颜色更改为白色，如果可能的话，还可以使滚动条更大一些以适合移动设备.

Is there a way to style google chrome default pdf view? I'm trying to change the gray background color to white also make the scroller little bigger for mobile devices if possible.

我没有运气就把它瞄准了css

I tried to target it on css with no luck

// pdf viewer custom style
iframe {
    html {
        body {
            background-color: #ffffff !important;
        }
        #zoom-toolbar {
            display: none !important;
        }
        #zoom-buttons {
            display: none !important;
        }
    }
}

看起来它正在html上创建影子文档，但我找不到任何针对它的方法

It looks like it's creating shadow document on the html but I couldn't find any way to target it

推荐答案

无法直接设置Chrome默认的PDF查看器(PDFium)的样式.由于该插件显示和控制当前页面DOM范围之外的内容，因此只能由该插件修改.如此处所示，无法对此类插件进行控制内容，除非插件还添加了内容脚本，该脚本允许页面将消息传递给插件；该插件还必须进行编程以响应消息并适当地更新内容.换句话说，PDF查看器对页面使用单独的DOM，该DOM无法直接访问.相反，您需要访问已实现的API.

There is no way to directly style the Chrome default PDF viewer (PDFium). Because the plugin displays and controls content outside the scope of the current page's DOM, it can only be modified by the plugin. As indicated here it is impossible to make modifications to this sort of plugin controlled content unless the plugin also adds a content script that allows the page to pass messages to the plugin; the plugin must additionally be programmed to respond to messages and appropriately update the content. In other words the PDF viewer uses a separate DOM to the page which is not directly accessible. Instead you need to access an implemented API.

在此讨论中West(Google/Chromium开发人员)说，在Chrome浏览器的PDF查看器中有关DOM可访问性的问题的回答:

In this discussion Mike West (Google/Chromium dev) states, in answer to a question on DOM accessibility in Chrome's PDF viewer:

(故意)相当有限地限制了PDF查看器中的功能...难以找到的API根本不存在.

The functionality available in the PDF viewer is (intentionally) fairly limited ... The APIs you're having trouble finding simply don't exist.

基本API函数是Adobe在其此处确定，从中可以看出查看器无法进行高级样式设置，例如更改颜色.(

Basic API functions are some of those specified by Adobe in their Parameters for Opening PDF Files and are accessed through the URL (eg http://example.org/doc.pdf#page=3&pagemode=thumbs. They are, as indicated above, quite limited, allowing the user to go directly to a page, set zoom factor, show thumbnails etc. Accessing an expanded API through content script messages can potentially be done if you know the available JavaScript messages. A complete list of available JS message names can be determined from the relevant PDFium source here from which it can be seen that advanced styling of the viewer, such as changing colours, isn't possible. (This question gives an example of how to implement the API). Certainly there is no access to PDFium's DOM.

故意不记录该API；它随时可能随添加或删除而发生变化.因此，尽管将来可能会有一个API可以让您对查看器的某些方面进行样式设置，但几乎没有任何东西会改变背景颜色或修改CSS阴影.而且，如上所述，如果没有API，就无法在无法访问其DOM的情况下修改由插件控制的内容.

This API is deliberately left undocumented; it may change with additions or removals at any time. Thus, while it's possible that in the future there will be an API to let you style some aspects of the viewer, it's very unlikely that any would go so far as to change the background colour or modify a CSS shadow. And, as stated above, without an API you can't modify content controlled by a plugin when you don't have access to its DOM.

您可能希望尝试 PDF.js .这是一个开放源代码的JavaScript库，可使用HTML5 Canvas呈现PDF文件.它也是Firefox的默认PDF查看器，功能强大.

You may, instead, wish to try PDF.js. It is an open source JavaScript library that renders PDF files using HTML5 Canvas. It is also Firefox's default PDF viewer and is quite capable.

将其作为Web应用程序实现不在此问题的范围内，但是有许多有用的教程可用.而且，作为开发人员，您将有权访问所有组成文件，因此您当然可以根据需要设置样式的PDF.js查看器.

Implementing it as a web app is beyond the scope of this question, but there are many helpful tutorials available. And as you, the developer, will have access to all constituent files, you will certainly be able to style the PDF.js viewer as much as you wish.

这篇关于有没有一种样式设置Google Chrome默认PDF查看器的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！