search

cesarvr / pdf-generator

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

Styles do not apply for iOS #98

Open CooperLaredo opened 5 years ago

CooperLaredo commented 5 years ago

I followed along with the example in the documentation and I can't seem to get the styles to show up in the Print Preview for iOS.

-Since it's iOS, I set cssFile to www/styles.bundle.css -Content is just the innerHTML of the page I'm trying to make a pdf of.

I'm not sure if cssFile is set to the correct path because the pdf looks completely unformatted except for a couple colors from inline styles. Any help would be appreciated!

createPDF(cssFile, content) {
    const opts = {
        documentSize: "A4",
        landscape: "portrait",
        type: "share",
        fileName: 'my-pdf.pdf'
    };

    const payload = _.template('<head><link rel="stylesheet" href="<%=css_file%>"></style></head><body><%=content%></body>');

    cordova.plugins.pdf.fromData(payload({ css_file: cssFile, content: content }),
        opts)
        .then()
        .catch();
}
cesarvr commented 5 years ago

Assuming that file is in the FileSystem then, in iOS you'll need to use the cordova-plugin-file, example: 

if (cordova.platformId === 'ios') {

        // this function is from the cordova-plugin-file...
        window.resolveLocalFileSystemURL(cordova.file.applicationDirectory,
            function(url) {
               //url represents the asset folder www/

              // generate your template   
             let tmpl = payload({ css_file: url + '/' +cssFile, content: content })

             // generate PDF
             pdf.fromData(payload, opts).then(/.../)
           },
            function(err) {
                console.log('error', err, '  args ->', arguments)
            }
        );

Working example...