How to apply styles and css and bootstrap cdn in window.print() when using vuejs?

Question

I want get Print From my component in Vuejs.

Also I want apply my css and bootsrap in window.print()

I use window.print() in mounted Like this:

       export default {
             mounted() {        
                  window.print();

               }
          }

But CSS and Bootstrap have not been applied to the print screen.

Can you tell me how to fix it?

UPDATE : I use adminlte Template.It may be a problem

Answer 1

Hi you can have two ways to achieve this

PrintScreen(el)
{
    let printWindow = window.open('', 'PRINT', 'height=600,width=800');

    printWindow.document.write('<html><head><title>' + document.title  + '</title>');
    printWindow.document.write('</head><body >');
    printWindow.document.write('<h1>' + document.title  + '</h1>');
    printWindow.document.write(document.getElementById(el).innerHTML);
    printWindow.document.write('</body></html>');

    printWindow.document.close(); // IE >= 10
    printWindow.focus(); //  IE >= 10*/

    printWindow.print();
    printWindow.close();

    return true;
}

Or

You can use a wrapper to do this stuff Npm Link

npm install vue-html-to-paper

How to apply styles and css and bootstrap cdn in window.print() when using vuejs?

Question

1 answers

solution1
0 2020-05-31 15:35:42

How to apply styles and css and bootstrap cdn in window.print() when using vuejs?

Question

1 answers

solution1 0 2020-05-31 15:35:42

solution1
0 2020-05-31 15:35:42