web-dev-qa-db-fra.com

Existe-t-il un moyen de styliser Google Chrome default PDF viewer

Existe-t-il un moyen de styliser google chrome vue pdf par défaut? J'essaie de changer la couleur d'arrière-plan grise en blanc pour rendre la roulette un peu plus grande pour les appareils mobiles si possible.

J'ai essayé de le cibler sur CSS sans succès

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

On dirait qu'il crée un document fantôme sur le html mais je n'ai trouvé aucun moyen de le cibler

cssgoogle-chromebackground-colorpdf-viewer
26
Tan Kucukhas

Il n'y a aucun moyen de styliser directement le Chrome default PDF viewer (PDFium). Étant donné que le plug-in affiche et contrôle le contenu en dehors de la portée du DOM de la page actuelle, il ne peut être modifié que par le plugin. Comme indiqué ici il est impossible d'apporter des modifications à ce type de contenu contrôlé par le plugin à moins que le plugin ajoute également un script de contenu qui permet à la page de transmettre des messages au plugin ; le plugin doit en outre être programmé pour répondre aux messages et mettre à jour le contenu de manière appropriée. En d'autres termes, la visionneuse PDF utilise un DOM distinct pour la page qui n'est pas directement accessible. Au lieu de cela, vous devez accéder à une API implémentée.

Dans la discussion this , Mike West (développeur Google/Chromium) déclare, en réponse à une question sur l'accessibilité du DOM dans Chrome PDF viewer:

La fonctionnalité disponible dans la visionneuse PDF est (intentionnellement) assez limitée ... Les API que vous avez du mal à trouver n'existent tout simplement pas.

Les fonctions de base de l'API sont certaines de celles spécifiées par Adobe dans leurs Paramètres d'ouverture PDF et sont accessibles via l'URL (par exemple http://example.org/doc.pdf#page=3&pagemode=thumbs. Ils sont, comme indiqué ci-dessus, assez limités, permettant à l'utilisateur d'accéder directement à une page, de définir le facteur de zoom, d'afficher des miniatures, etc. L'accès à une API développée via des messages de script de contenu peut potentiellement se faire si vous connaissez les messages JavaScript disponibles. Une liste complète des noms de messages JS disponibles peut être déterminée à partir de la source PDFium appropriée ici à partir de laquelle on peut voir que le style avancé de la visionneuse, comme le changement de couleurs, n'est pas possible. ( This question donne un exemple de mise en œuvre de l'API). Certes, il n'y a pas d'accès au DOM de PDFium.

Cette API est délibérément laissée sans document; il peut changer à tout moment avec des ajouts ou des suppressions. Ainsi, bien qu'il soit possible qu'à l'avenir il y ait une API pour vous permettre de styliser certains aspects de la visionneuse, il est très peu probable que l'un d'entre eux irait jusqu'à changer la couleur d'arrière-plan ou modifier une ombre CSS. Et, comme indiqué ci-dessus, sans API, vous ne pouvez pas modifier le contenu contrôlé par un plugin lorsque vous n'avez pas accès à son DOM.

Vous pouvez, à la place, souhaiter essayer PDF.js . Il s'agit d'une bibliothèque JavaScript open source qui affiche des fichiers PDF en utilisant HTML5 Canvas. C'est également la visionneuse par défaut de Firefox PDF et est tout à fait capable).

L'implémenter en tant qu'application Web dépasse le cadre de cette question, mais de nombreux didacticiels utiles sont disponibles. Et comme vous, le développeur, aurez accès à tous les fichiers constitutifs, vous pourrez certainement styler le visualiseur PDF.js autant que vous le souhaitez.

8
jla

Collez simplement ceci dans la console de votre navigateur.

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