vue-html-to-paper I moved the css into the public directory but the same behaviour continues.

I moved the css into the public directory but the same behaviour continues.

Originally posted by @luisluft in https://github.com/mycurelabs/vue-html-to-paper/issues/46#issuecomment-633228181

    print() {
      const local_options = {
        styles: ["./print.css"]
      };
      this.$htmlToPaper("print_me", local_options);
    },

May 24 '20 13:05 luisluft

Can you make the link relative to your CCI.vue? Like so, ../../../public/? Or try removing the ./.

May 26 '20 06:05 jofftiquez

same error happens for both '../../../public/print.css' and 'print.css'

May 26 '20 12:05 luisluft

try "/print.css"

Aug 05 '20 08:08 xtzgd

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

Aug 28 '20 12:08 Bopsi

Thanks @Bopsi this actually make sense. Would mind trying this @Zanndorin? Thanks.

Oct 25 '20 02:10 jofftiquez

@jofftiquez I have tried the basePath thing, but it didn't change anything. I tried with localOptions or what it was called.

I'll try again later, might try uploading it to a S3 bucket and getting it from there to get it to work... 🤔 But the CSS file I provided should work as I expect? I.e. make the default print settings "labelsized"?

@media print {
    @page {
        size: 50mm 25mm;
        margin: 2mm;
    }
}

Oct 25 '20 12:10 Zanndorin

I don't seem to get this to work at all, maybe it is my browser... (Tried with a css from S3 bucket and locally, doesn't seem to change anything) :)

Oct 26 '20 19:10 Zanndorin

Hi v1.4.1 is now available, please check. Thanks.

May 05 '21 02:05 jofftiquez

I moved the css into the public directory but the same behaviour continues.

Originally posted by @luisluft in #46 (comment)
    print() {
      const local_options = {
        styles: ["./print.css"]
      };
      this.$htmlToPaper("print_me", local_options);
    },

maybe just, put your css file in the public, and you can set script options styles of property path. just likes:

souce dir: