How to print a part of a vue component without losing the style

Question

I want to print some content from a vue component. For example from the following snippet, I would like to print the v-card-text element which also has an id of

Answer 1

You need to copy over the styles from the original document. Try something like this:

// Get HTML to print from element
const prtHtml = document.getElementById('print').innerHTML;

// Get all stylesheets HTML
let stylesHtml = '';
for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {
  stylesHtml += node.outerHTML;
}

// Open the print window
const WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');

WinPrint.document.write(`

  
    ${stylesHtml}
  
  
    ${prtHtml}
  
`);

WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();