Guarde una copia exacta de una página web segura en forma de gráficos vectoriales

Me gustaría guardar una réplica exacta de una página web en forma de gráficos vectoriales, por lo que no puedo usar una técnica de captura de pantalla (ya que almacena la imagen en forma de gráficos de rastreo).

Intenté 'imprimir en pdf' y 'guardar como pdf' a través de Safari, Chrome y Firefox. Esto funciona la mayor parte del tiempo. Sin embargo, el pdf guardado no es una réplica exacta para todas las páginas web. Por ejemplo, intente guardar esta página web como un pdf y observe cómo los íconos de votación positiva / negativa no se incluyen en el PDF guardado.

También he intentado guardar como un WebArchive con Safari. El problema aquí es que necesito recortar el archivo resultante, y no sé cómo recortar un WebArchive, ya que Vista previa no puede abrirlo, y simplemente se abre en Safari (de vuelta al punto de partida).

También probé los complementos del navegador web que proporcionan una solución de un solo clic para guardar la página web como pdf (formulario de gráficos vectoriales). Esto funciona mejor (se guarda la página exacta) y casi resuelve el problema, excepto que estos programas funcionan enviando la URL de la página a un programa basado en la nube para consultar y luego guardar la página. Esto significa que esta técnica no funcionará para sitios https que necesitan mis credenciales para iniciar sesión.

Entonces estoy en una esquina. Estoy tratando de guardar una réplica exacta de gráficos vectoriales de una página web que necesita mis credenciales de inicio de sesión para ver. ¿Cómo puedo hacer esto?

macos google-chrome vector-graphics

— Clayton Stanley
fuente

Creo que estás confundido: el PDF no es un formato vectorial.

— Kevin Panko

No confundido solo que no se preocupe demasiado por el detalle de que un pdf es un contenedor que puede almacenar cosas de gráficos vectoriales, ya que creo que el punto principal de la pregunta se está transmitiendo

— Clayton Stanley

Su pregunta parece ser "¿Cómo puedo guardar una página web como un archivo PDF, exactamente como se muestra en la pantalla, y funciona con una página que requiere una contraseña para iniciar sesión?"

— Kevin Panko

No tiene que ser pdf; esa es solo una ruta para guardar una página web donde el texto está en forma de gráficos vectoriales. No tengo que comprometerme con ese formato. Sin embargo, agregaré seguridad al título para la segunda nota, para que esto se enfatice mejor.

— Clayton Stanley

Respuestas:

Obtendrá resultados diferentes al imprimir la página en PDF que cuando ve la página en la pantalla.

Esto sucede porque la página web incluye una hoja de estilo CSS que cambia la página cuando se imprime.

Esta pregunta lo ayudará a evitar ese problema: ¿Cómo imprimo con la hoja de estilo de la pantalla?

Siga las instrucciones allí para imprimir la página con la hoja de estilo en pantalla.

Entonces debería poder imprimir en PDF y obtener el mismo resultado que ve en la pantalla.

— Kevin Panko
fuente

Solo para obtener la documentación completa, terminé usando el complemento Chrome Web Developer y editando el CSS a través de este complemento. No pude hacer que la página de impresión se actualizara después de editar el CSS usando las herramientas de desarrollo integradas de Google Chrome, pero esto es muy probable porque no estoy familiarizado con esa herramienta.

— Clayton Stanley

Si no tiene miedo de un poco de secuencias de comandos, puede intentar usar la aplicación phantomjs para OSX desde http://phantomjs.org/

Luego, simplemente ejecutaría el binario incluido usando el script rasterize.js con un comando como:

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

Un par de notas:

Se llama 'rasterize.js' pero el texto en sí se guarda en el PDF como texto real.
La autenticación en un sitio seguro mediante la autenticación de Windows se puede lograr agregando un par de líneas al script rasterize.js después de inicializar el objeto de página:

var page = require ('página web'). create (),
    system = require ('sistema'),
    dirección, salida, tamaño;
    page.settings.userName = "serviceUserName"; // agregué estos
    page.settings.password = "servicePassword"; // 2 líneas aquí

if (system.args.length 5) {

— nvuono
fuente

phantomjs rocas!

— Matthew Lock