If a new window is opened, why does a style file placed under public work?

VueHtmlToPaper opens a new window with its own style tag. So when you pass a CDN it works, if u pass a local file it does not because it tries to access the resource in your web server but in the wrong URL. Let's see how the page looks when we use a CDN and a local CSS file.

CDN

<html>
  <head>
    <link rel="style" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
  </head>
  <body>
  </body>
</html>

Local CSS file

And let's say you are calling the print function from http://localhost:8080/somepage

<html>
  <head>
    <link rel="style" href="./myPrint.css">
    </head>
  <body>
  </body>
</html>

This will try to open http://localhost:8080/somepage/myPrint.css. Obviously this will not be accessible to print dialogue.

Solution

Put your custom CSS file in the public or static folder (Where you usually keep favicon)
Modify script path in options, prepend server basepath with the CSS file

Sample Option

import VueHtmlToPaper from 'vue-html-to-paper'

/* This will change according to your server */
let basePath= 'http://localhost:8080';

const options = {
  name: '_blank',
  specs: [
   'fullscreen=yes',
   'titlebar=yes',
   'scrollbars=no'
  ],
  styles: [
    'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
    `${basePath}/myPrint.css`
  ]
}

Vue.use(VueHtmlToPaper, options)

Also, the simplest way to access root-relative path is to use /. User /style.css instead of ./style.css

Originally posted by @Bopsi in https://github.com/mycurelabs/vue-html-to-paper/issues/47#issuecomment-682530153

mycurelabs / vue-html-to-paper