search

cesarvr / pdf-generator

Cordova plugin to generate pdf in the client-side
MIT License
106 stars 62 forks source link

CSS style #80

Closed smart548 closed 6 years ago

smart548 commented 6 years ago

I've tried to add some css (not in-line) to the html which I want to use to make the pdf document but I noticed it is not replicated into the built pdf. Is that possible to achive or only in-line styling is allowed? Thank you all.

cesarvr commented 6 years ago

Hi, you can use non in-line CSS you just need to make it reachable to the plugin, check this examples

smart548 commented 6 years ago

Hola Cesar, thank you for replying. I feel sorry to bother you but I need some more explanations. As my comprehension, what I need to do is to set the "baseUrl" parameter as an option, so that what I end up having is something like:

let options = { documentSize: 'A4', type: 'base64', baseUrl: './' //<------------------------ }

What I do not understand is how should I set this parameter. I need to read the rules included in a .scss file which is located in the same path as the typescript file (in which I call the plugin). How can I achieve that?

p.s. I am building my app with:

Thank you again.

smart548 commented 6 years ago

Hey Cesar, I've tried to build your example app. The problem still remains because when I try to include a .css file in the "raw HTML example", the pdf generated does not respect the css rules defined in the .css file...

smart548 commented 6 years ago

Just to add some more info: I've opened the .ipa generated and discovered my built css is located in root/www/build and that if I open the app in the browser (through the ionic serve command) I can open it reaching localhost:8100/build/main.css

cesarvr commented 6 years ago

I updated the plugin and added the functionality that allow you to load css from your file system , to learn how to use take a look at the sample app I fix some errors there as well (thanks for reporting) related to the progress bar, I test it with iOS 9 - 11 so it should work any problem let me know 👍.

basically you assuming your CSS is in the root folder of www , you can use it inside your HTML by doing: 

pdf.fromData("
<head>
    <link rel=\"stylesheet\" href=\"www/test.css\">
</head>
<body>
   <h1> Hello World </h1>
</body>",
                        opts)
                    .then(function(s){ console.log('success', s)})
                    .catch(function(e) { console.log('err', e)});

For android you need to use file:///android_asset/www/test.css

smart548 commented 6 years ago

Thank you for finding the time to reply; does the baseUrl option need to be set though?

cesarvr commented 6 years ago

No. At the moment the plugin make the assumption that if you passing raw data, it will use css available in FS and if you are using some cloud template then it will work as expected.

Cheers.

smart548 commented 6 years ago

Thank you Cesar! You have been helpful :)

smart548 commented 6 years ago

One last thing Cesar: now that I can import my .css sheets I am seeing the generated pdf look "weird"(attached screenshot). The same template in HTML looks different (it is correctly formatted). Notice that I only added the red color to the first element on my css,

Thank you again. schermata 2018-05-07 alle 17 40 04

Update: Removing the link to the css stylesheet fix the template. P.s. I'm really sorry to bother you.

smart548 commented 6 years ago

I've fixed that setting a min and max-width for the html template ;)