Enregistrer une copie exacte d'une page Web sécurisée sous forme de graphiques vectoriels

Je voudrais enregistrer une réplique exacte d'une page Web sous forme de graphiques vectoriels, donc je ne peux pas utiliser une technique de capture d'écran (car cela stocke l'image sous une forme de graphiques rastor).

J'ai essayé d'imprimer au format PDF et d'enregistrer au format PDF via Safari, Chrome et Firefox. Cela fonctionne la plupart du temps. Cependant, le pdf enregistré n'est pas une réplique exacte pour toutes les pages Web. Par exemple, essayez d'enregistrer cette page Web au format PDF et notez que les icônes de vote positif / négatif ne sont pas incluses dans le fichier PDF enregistré.

J'ai également essayé d'enregistrer en tant qu'Archive Web avec Safari. Le problème ici est que j'ai besoin de recadrer le fichier résultant, et je ne sais pas comment recadrer un WebArchive, car Aperçu ne peut pas l'ouvrir, et il s'ouvre simplement dans Safari (retour à la case départ).

J'ai également essayé des plugins de navigateur Web qui fournissent une solution en un clic pour enregistrer la page Web au format PDF (sous forme de graphiques vectoriels). Cela fonctionne mieux (la page exacte est enregistrée) et résout presque le problème, sauf que ces programmes fonctionnent en envoyant l'URL de la page à un programme basé sur le cloud pour interroger puis enregistrer la page. Cela signifie que cette technique ne fonctionnera pas pour les sites https qui ont besoin de mes informations d'identification pour se connecter.

Je suis donc dans un coin. J'essaie d'enregistrer une réplique exacte des graphiques vectoriels d'une page Web qui a besoin de mes informations de connexion pour afficher. Comment puis-je faire ceci?

macos google-chrome vector-graphics

— Clayton Stanley
source

Je pense que vous êtes confus - le PDF n'est pas un format vectoriel.

— Kevin Panko

Pas confus; ne vous inquiétez pas trop du détail qu'un pdf est un conteneur qui peut stocker des éléments graphiques vectoriels, car je pense que le point principal de la question est transmis

— Clayton Stanley

Votre question semble être "Comment puis-je enregistrer une page Web en tant que fichier PDF, exactement comme il apparaît à l'écran, et fonctionne avec une page qui nécessite un mot de passe pour se connecter?"

— Kevin Panko

Ne doit pas nécessairement être pdf; ce n'est qu'un moyen de sauvegarder une page Web où le texte est sous forme de graphiques vectoriels. Je n'ai pas à m'engager sur ce format. J'ajouterai cependant au titre de la deuxième note, afin que cela soit mieux souligné.

— Clayton Stanley

Réponses:

Vous obtenez des résultats d'impression de la page au format PDF différents de ceux que vous voyez lors de l'affichage de la page à l'écran.

Cela se produit car la page Web comprend une feuille de style CSS qui modifie la page lors de son impression.

Cette question vous aidera à éviter ce problème: comment imprimer avec la feuille de style d'écran?

Suivez les instructions pour imprimer la page avec la feuille de style à l'écran.

Ensuite, vous devriez pouvoir imprimer au format PDF et obtenir le même résultat que celui que vous voyez à l'écran.

— Kevin Panko
source

Juste pour une documentation complète, j'ai fini par utiliser le plugin Chrome Web Developer et à éditer le CSS via ce plugin. Je n'ai pas pu obtenir la mise à jour de la page d'impression après avoir modifié le CSS à l'aide des outils de développement intégrés de Google Chrome, mais cela est probablement dû au fait que je ne connais pas cet outil.

— Clayton Stanley

Si vous n'avez pas peur d'un peu de script, vous pouvez essayer d'utiliser l'application phantomjs pour OSX à partir de http://phantomjs.org/

Ensuite, vous exécutez simplement le binaire inclus en utilisant le script rasterize.js avec une commande comme:

phantomjs.exe rasterize.js http://www.example.com/sitepage 8.5in*11in outfile.pdf

Quelques notes:

Il s'appelle 'rasterize.js' mais le texte lui-même est enregistré dans le PDF en tant que texte réel.
L'authentification sur un site sécurisé à l'aide de l'authentification Windows peut être effectuée en ajoutant quelques lignes au script rasterize.js après l'initialisation de l'objet de page:

var page = require ('page Web'). create (),
    system = require ('system'),
    adresse, sortie, taille;
    page.settings.userName = "serviceUserName"; // J'ai ajouté ces
    page.settings.password = "servicePassword"; // 2 lignes ici

if (system.args.length 5) {

— nvuono
source

phantomjs rocks!

— Matthew Lock