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.
有没有办法设置Google Chrome默认pdf视图的样式?我试图将灰色背景颜色更改为白色,如果可能的话,也会使滚动条对于移动设备来说更大。
I tried to target it on css with no luck
我试着用css瞄准它而没有运气
// pdf viewer custom style
iframe {
html {
body {
background-color: #ffffff !important;
}
#zoom-toolbar {
display: none !important;
}
#zoom-buttons {
display: none !important;
}
}
}
It looks like it's creating shadow document on the html but I couldn't find any way to target it
它看起来像是在html上创建阴影文档,但我找不到任何方法来定位它
1 个解决方案
#1
7
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.
无法直接设置Chrome默认PDF查看器(PDFium)的样式。因为插件显示和控制当前页面DOM范围之外的内容,所以它只能由插件修改。如此处所示,除非插件还添加允许页面将消息传递给插件的内容脚本,否则无法对此类插件控制的内容进行修改。必须另外对插件进行编程以响应消息并适当地更新内容。换句话说,PDF查看器使用单独的DOM来访问不可直接访问的页面。相反,您需要访问已实现的API。
In this discussion Mike West (Google/Chromium dev) states, in answer to a question on DOM accessibility in Chrome's PDF viewer:
在这次讨论中,Mike West(谷歌/ Chromium dev)在回答Chrome的PDF查看器中有关DOM可访问性的问题时说:
The functionality available in the PDF viewer is (intentionally) fairly limited ... The APIs you're having trouble finding simply don't exist.
PDF查看器中可用的功能(有意)相当有限......您找不到的API根本不存在。
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函数是Adobe在其打开PDF文件的参数中指定的一些函数,可以通过URL访问(例如http://example.org/doc.pdf#page=3&pagemode=thumbs。如上所述,它们是相当有限,允许用户直接转到页面,设置缩放系数,显示缩略图等。如果您知道可用的JavaScript消息,则可以通过内容脚本消息访问扩展的API。可用的JS消息名称的完整列表可以可以从相关的PDF源确定,从中可以看出观察者的高级样式,例如改变颜色,是不可能的。(这个问题提供了如何实现API的示例)。当然没有访问权限到PDFium的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.
这个API故意没有记录;它可能随时随着添加或删除而改变。因此,尽管将来可能会有一个API让您为查看器的某些方面设置样式,但是任何方法都不太可能改变背景颜色或修改CSS阴影。并且,如上所述,如果没有API,则在无法访问其DOM时无法修改插件控制的内容。
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.
相反,您可以尝试使用PDF.js.它是一个开源JavaScript库,使用HTML5 Canvas呈现PDF文件。它也是Firefox的默认PDF查看器,非常强大。
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.
将其实现为Web应用程序超出了本问题的范围,但有许多有用的教程可用。而且,作为开发人员,您可以访问所有组成文件,您当然可以根据需要设置PDF.js查看器的样式。
#1
7
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.
无法直接设置Chrome默认PDF查看器(PDFium)的样式。因为插件显示和控制当前页面DOM范围之外的内容,所以它只能由插件修改。如此处所示,除非插件还添加允许页面将消息传递给插件的内容脚本,否则无法对此类插件控制的内容进行修改。必须另外对插件进行编程以响应消息并适当地更新内容。换句话说,PDF查看器使用单独的DOM来访问不可直接访问的页面。相反,您需要访问已实现的API。
In this discussion Mike West (Google/Chromium dev) states, in answer to a question on DOM accessibility in Chrome's PDF viewer:
在这次讨论中,Mike West(谷歌/ Chromium dev)在回答Chrome的PDF查看器中有关DOM可访问性的问题时说:
The functionality available in the PDF viewer is (intentionally) fairly limited ... The APIs you're having trouble finding simply don't exist.
PDF查看器中可用的功能(有意)相当有限......您找不到的API根本不存在。
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函数是Adobe在其打开PDF文件的参数中指定的一些函数,可以通过URL访问(例如http://example.org/doc.pdf#page=3&pagemode=thumbs。如上所述,它们是相当有限,允许用户直接转到页面,设置缩放系数,显示缩略图等。如果您知道可用的JavaScript消息,则可以通过内容脚本消息访问扩展的API。可用的JS消息名称的完整列表可以可以从相关的PDF源确定,从中可以看出观察者的高级样式,例如改变颜色,是不可能的。(这个问题提供了如何实现API的示例)。当然没有访问权限到PDFium的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.
这个API故意没有记录;它可能随时随着添加或删除而改变。因此,尽管将来可能会有一个API让您为查看器的某些方面设置样式,但是任何方法都不太可能改变背景颜色或修改CSS阴影。并且,如上所述,如果没有API,则在无法访问其DOM时无法修改插件控制的内容。
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.
相反,您可以尝试使用PDF.js.它是一个开源JavaScript库,使用HTML5 Canvas呈现PDF文件。它也是Firefox的默认PDF查看器,非常强大。
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.
将其实现为Web应用程序超出了本问题的范围,但有许多有用的教程可用。而且,作为开发人员,您可以访问所有组成文件,您当然可以根据需要设置PDF.js查看器的样式。