Estoy haciendo un diploma que debe ser descargable.

Así que hice un componente vue específico (diploma en sí) que está en el dom pero oculto con v-show (display: none).

Ahora solo necesito que se imprima ese componente específico (o se guarde como pdf) y no una página completa. Por lo tanto, no puedo iniciar window.print(), pero de alguna manera necesito aislar un componente específico, así que pensé que podría usar el iframe oculto y cargar el componente allí e iniciar la impresión en iframe.contentWindow.print() .

Un problema es que no veo cómo puedo cargar el componente en un iframe.

Una forma sería usar algo como

 iframe.srcdoc = downloadRef.value.$el.innerHTML;

pero no tengo estilo de esta manera.

También probé algo en la línea de

 iframe.srcdoc = ` ${css} ${downloadRef.value.$el.innerHTML}`;

donde css es una cadena de etiquetas de estilo con estilos, pero nuevamente no todos los estilos son aplicables.

¿Hay alguna otra forma de cargar el componente vue en iframe y representarlo como tal (con vue naturalmente), o hay alguna otra forma de hacer que cierto componente se pueda imprimir con todos los estilos necesarios aplicados, sin usar iframe en absoluto?

Gracias por adelantado.