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

luisluft commented 4 years ago

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);
    },

jofftiquez commented 4 years ago

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

luisluft commented 4 years ago

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

xtzgd commented 4 years ago

try "/print.css"

Bopsi commented 4 years ago

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

jofftiquez commented 3 years ago

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

Zanndorin commented 3 years ago

@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;
    }
}

Zanndorin commented 3 years ago

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) :)

jofftiquez commented 3 years ago

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

PachVerb commented 3 years ago

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: