Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
luisluft opened this issue May 24, 2020 · 11 comments
Open

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

luisluft opened this issue May 24, 2020 · 11 comments
Labels
hacktoberfest Hacktoberfest 2020

Comments

@luisluft
Copy link

luisluft commented May 24, 2020 •
edited
Loading

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

image

image
@jofftiquez
Copy link
Member

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

@luisluft
Copy link
Author

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

@xtzgd
Copy link

xtzgd commented Aug 5, 2020

try "/print.css"

@hqzh hqzh mentioned this issue Aug 21, 2020
Closed
@Bopsi
Copy link

Bopsi commented Aug 28, 2020 •
edited
Loading

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

  1. Put your custom CSS file in the public or static folder (Where you usually keep favicon)
  2. 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 jofftiquez added the hacktoberfest Hacktoberfest 2020 label Oct 1, 2020
@Zanndorin Zanndorin mentioned this issue Oct 24, 2020
Closed
@jofftiquez
Copy link
Member

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

@Zanndorin
Copy link

Zanndorin commented Oct 25, 2020 •
edited
Loading

@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
Copy link

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
Copy link
Member

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

@PachVerb
Copy link

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

image

image

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

souce dir:
image

use this css file:

image

note: do not use pathname public, just use your css file in the directory

@PachVerb PachVerb mentioned this issue Jun 20, 2021
Closed
@ploissken
Copy link

I've spent a day on this, only thing that worked was uploading it to a webserver and using a regular https.

@arthurnassar
Copy link

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

souce dir:
image

use this css file:

image

note: do not use pathname public, just use your css file in the directory

This worked very well

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
hacktoberfest Hacktoberfest 2020
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@jofftiquez @Zanndorin @Bopsi @xtzgd @ploissken @PachVerb @luisluft @arthurnassar