There is a way to insert local css?

[diogrocarvalho]

Hi, guys! Nice job with this plugin.

I'm new with javascript and I have a question/suggestion.

What do you guys think about an additional parameter to include local/custom css?

Like this

//main.js
import myCustomCssStyles from 'myCustomCssStylesString';

const options = {
  name: "_blank",
  specs: ["fullscreen=yes", "titlebar=yes", "scrollbars=yes"],
  styles: [
    "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
  ],
  localStyles: myCustomCssStyles.css
};

I did something similar to it, but I am not sure if it is the right way to do that. I've created a .js file with the styles as a string and insert a new style tag to the new HTML that your plugin creates. Like this:

//myCustomCssStylesString.js

export default {
  css :
   `content-holder {
     color: red;
   }
   ...
  `
}

function addStyles(win, styles, localStyles) {
  let link = win.document.createElement("style");
  link.type = "text/css";
  link.media = "print";
  link.innerHTML = localStyles;
  win.document.getElementsByTagName("head")[0].appendChild(link);
...
}

In short, I used the solution above to set a custom style in my print page passing those styles as string, and I don't know how, or if is possible, to pass a .css path file to your plugin and set the style tag content rather than using a string with the styles. So you have a clue how achieve this using a .css rather than a string with the style?

[jofftiquez]

@diogrocarvalho thanks for posting this. Have you tried passing the link of the local css to the styles array?

[diogrocarvalho]

Oh, sorry for delay...

@jofftiquez, I've tried to pass the location of a local css to styles array, but it inserts the path into href, so the browser tries to get the file from a directory on server, but there is no directory there because it's a SPA.

Like this: For instance, If the path to localCss.css is scr/assets/css/localCss.css the tag inserted to document generated is:

<link rel="stylesheet" type="text/css" href="http://localhost:8081/scr/assets/css/localCss.css">

[ChaStPierre]

works fine if you pass these via the option styles

[jofftiquez]

@diogrocarvalho as @ChaStPierre local css also works when you pass it the styles array. Maybe you should just do a little tweak on how you server your css.

[frederic117]

could you please provide an exemple :) I don't manage to pass a local css file like: options = { name: '_blank', specs: [ 'fullscreen=yes', 'titlebar=no', 'scrollbars=yes' ], styles: [ '@/assets/css/style.css', ]}

[jofftiquez]

@frederic117 don't use resolve alias, use relative or absolute path.

[frederic117]

Thanks for the answer, I dont know how to write that.. Should i put the CSS file i want to link on the static repo? Or put all the CSS in the styles array but how to write it ? Sorry for the simple question

[jofftiquez]

@frederic117 It's ok. You can either put your css to a CDN or just use relative path. You know something like this ../../path/to/css

[frederic117]

nice thanks a lot :)

[aizeek1]

i have not be able to include a local scss file and it works

[limsocheat]

@frederic117 It's ok. You can either put your css to a CDN or just use relative path. You know something like this ../../path/to/css

I am using with NuxtJS, I tried to include CSS with relative path, but it is not working.

 import Vue from 'vue';
import VueHtmlToPaper from 'vue-html-to-paper';
const options = {
    name: '_blank',
    specs: [
        'fullscreen=yes',
        'titlebar=yes',
        'scrollbars=yes'
    ],
    styles: [
        "./custom.css"
    ]
}
Vue.use(VueHtmlToPaper, options);

custom.css file is stored in the same directory.

[siva-569]

@limsocheat put the CSS file in the static folder

[BereketTsegay]

i have similar problem. that my local css is not working.

const options = { name: '_blank', specs: [ 'fullscreen=yes', 'titlebar=yes', 'scrollbars=yes' ], styles: [ 'http://localhost/project/public/css/app.css', ] }

despite i give the url path for the css

[positivethinking639]

What solution for this problem? I try import Vue from 'vue' import VueHtmlToPaper from 'vue-html-to-paper'

const options = {
  name: '_blank',
  specs: [
    'fullscreen=yes',
    'titlebar=yes',
    'scrollbars=yes'
  ],
  styles: [
    'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
    'https://unpkg.com/kidlat-css/css/kidlat.css',
    './assets/css/print.css'
  ]
}

Vue.use(VueHtmlToPaper, options)

But it does not works. I using nuxt.js

I try to put the CSS file in the static folder, it does not work Hope someone helps

[positivethinking639]

@limsocheat Have you found a solution? Seems our case is same @jofftiquez I try to use relative path, but it does not works

[BereketTsegay]

i think the creator/s have to look at their code. for us it is not possible to see where the problem is coming from. hope to see an explanation from them. the library looks like it creates an html page out of the given data and then to be printed but i couldn't able to see the generated code for at least to see how it displays the urls for the css.

[positivethinking639]

@ChaStPierre @siva-569 @frederic117 Maybe you can help me

[MarwaAbdelbasit]

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

[Yen-Peng]

I was facing the same issue myself in my Vue project and managed to make it work with Bobsi's solution in this link which is similar to the what @MarwaAbdelbasit mentioned: https://stackoverflow.com/questions/54415413/custom-print-style-with-vue-js-print-plugin/63634161#63634161

The font styling written in style.css in the public folder changes the font in the outputted pdf, and I used inline font styling for the fonts displayed.