Turn a section of a template into a PDF

davidtweaver commented 7 years ago

Hello,

I'm using your plugin with Ionic 2 - I'm basically creating an export component which should work by writing data into a hidden div tag (called print-area) which I then send to your PDF plugin. Unfortunately it just keeps crashing. Do you have any ideas what I can do to fix this?

  printToPDF() {

     let content = document.getElementById('print-area');
     const before = Date.now();
    document.addEventListener('deviceready', () => {
                console.log('DEVICE READY FIRED AFTER', (Date.now() - before), 'ms');

                //generate the pdf.
                cordova.plugins.pdf.htmlToPDF({
                        data: content,
                        type: "share"

                    },
                    (sucess) => console.log('sucess: ', sucess),
                    (error) => console.log('error:', error));
            });

  }

cesarvr commented 7 years ago

Are you using this version 1.0.13 ? if not, just update to this one, as older version are affected by a bug in the rendering stage that use to crash the app.

If it doesn't work just let me know.

davidtweaver commented 7 years ago

Yeah I'm still getting some errors when selecting HTML like that (I can put HTML directly into the data field and it's fine, just seems to be selecting by is that causes it)

cesarvr commented 7 years ago

that field {data: } , just take raw html, so whatever you put there will be rendered by the browser, if you still facing problems, just post a quick example.

davidtweaver commented 7 years ago

Sorry, what I'm trying to do is turn an existing page (in ionic 2) into a PDF - is that possible to do? I can an example of post my code shortly

cesarvr commented 7 years ago

To do that you need the raw html in string format you have two options:

you can get all the document at its current state with something like this: document.getElementsByTagName('html')[0].innerHTML , but if you are using CSS files you wont see the styling.
Other option is to have a specific template to display your content in the PDF, this template should have <style></style> tags for styling and then you can use underscore template engine, with that you create a specific template with the style tags hardcoded so you can style your page with CSS.

davidtweaver commented 7 years ago

Hey, sorry for the late response - theres a quick example of the HTML I'm trying to convert to PDF here:

   <div class="col-xs-4 muted" style="box-sizing:border-box;color:#666666;">
                    <aside style="box-sizing:border-box;margin-top:1em;margin-bottom:1em;">
                        <small style="box-sizing:border-box;font-size:9pt;">Care Plan Report: <br style="box-sizing:border-box;" >

Screening date: {{report?.answers.date | date:'dd MMMM yyyy' }}<br style="box-sizing:border-box;" >

Screened by: {{report?.answers.observedBy}}</small>

                    </aside>
                </div>

It's currently rendered to a hidden div - is it possible to access that, using this plugin? (I realise you said above that it needs raw html, so I'm not sure if the angular2 parts are causing the crash)

Also here's the Xcode output:

2017-04-06 23:53:46.222 WIS-FRAT[7122:1868260] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSDictionaryM dataUsingEncoding:]: unrecognized selector sent to instance 0x608000245790'
*** First throw call stack:
(
    0   CoreFoundation                      0x0000000107b7ab0b __exceptionPreprocess + 171
    1   libobjc.A.dylib                     0x00000001075b6141 objc_exception_throw + 48
    2   CoreFoundation                      0x0000000107bea134 -[NSObject(NSObject) doesNotRecognizeSelector:] + 132
    3   CoreFoundation                      0x0000000107b01840 ___forwarding___ + 1024
    4   CoreFoundation                      0x0000000107b013b8 _CF_forwarding_prep_0 + 120
    5   WebKitLegacy                        0x0000000112e15bb4 -[WebFrame _loadHTMLString:baseURL:unreachableURL:] + 52
    6   WebCore                             0x00000001140fc906 _ZL15HandleRunSourcePv + 806
    7   CoreFoundation                      0x0000000107b20c01 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ + 17
    8   CoreFoundation                      0x0000000107b060cf __CFRunLoopDoSources0 + 527
    9   CoreFoundation                      0x0000000107b055ff __CFRunLoopRun + 911
    10  CoreFoundation                      0x0000000107b05016 CFRunLoopRunSpecific + 406
    11  WebCore                             0x00000001140fc155 _ZL12RunWebThreadPv + 469
    12  libsystem_pthread.dylib             0x000000010b9999af _pthread_body + 180
    13  libsystem_pthread.dylib             0x000000010b9998fb _pthread_body + 0
    14  libsystem_pthread.dylib             0x000000010b999101 thread_start + 13
)
libc++abi.dylib: terminating with uncaught exception of type NSException

cesarvr commented 7 years ago

Yes I mean with raw that you need to transform your HTMLElement or (DOM) to string, field data won't take a element as a parameter just strings.

davidtweaver commented 7 years ago

Sorry if this is a really n00bish question for me to ask, but how do I turn the HTML Element to string? I've tried casting, but it didn't work

cesarvr commented 7 years ago

no problem, you can use innerHTML, method.

davidtweaver commented 7 years ago

Ah, having tested it a bit more - it seems to be a different issue to the issue I thought I was having (when I first look for the data, I don't think it's rendered properly - possibly something to do with the async nature of Angular2's data binding?) - hence I'm always getting blank pages on the first try (but when I hit back and try again the page seems to render correctly). Thank you for your help - I'll close the issue whilst I experiment some more

cesarvr / pdf-generator

Turn a section of a template into a PDF #17