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

Unable to generate PDF with a big data (Ionic 3 app is crashing) #110

Open
lukawal-miller opened this issue Nov 26, 2019 · 8 comments
Open

Unable to generate PDF with a big data (Ionic 3 app is crashing) #110

lukawal-miller opened this issue Nov 26, 2019 · 8 comments

Comments

@lukawal-miller
Copy link

lukawal-miller commented Nov 26, 2019 •
edited
Loading

Our app is crashing while we are trying to generate quite a big PDF file.

        var options = {
            documentSize: 'A4',
            type: 'base64',
        }

        var html = `<html>
        
          <body style="font-family: 'Roboto', 'Helvetica Neue' , sans-serif;">
            <div style='width: 100%; display: flex; align-items: center; padding: 0; margin: 0;'>
              <div style='float: left; width: 40%;'>
        
              </div>
              <div style='float: right; width: 60%;'>
                <div style='text-align: left; padding-left: 40px;'>
                  <h3 style='margin: 3px 0'><b>Site: </b> <span style='font-weight: 400;'>Newton 2</span></h3>
                  <hr style='border: 1px solid black; margin: 5px 0;'>
                  <h3 style='margin: 3px 0'><b>Created by: </b> <span style='font-weight: 400;'>LW</span></h3>
                  <h3 style='margin: 3px 0'><b>Created: </b><span style='font-weight: 400;'>26/11/2019, 15:52:19</span></h3>
                </div>
              </div>
            </div>
            <div style='clear: both;'></div><br>
            <h3>Plot 0001 - Snagging List (Ordered by trade)</h3>
            <table style='width:100%; border-collapse:collapse;'>
              <thead style='background-color: lightgray;'>
                <tr>
                  <th style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p style='margin: 0'><b>Image</b></p>
                  </th>
                  <th style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p style='margin: 0'><b>Trade</b></p>
                  </th>
                  <th style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p style='margin: 0'><b>Area</b></p>
                  </th>
                  <th style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p style='margin: 0'><b>Issue / Description</b></p>
                  </th>
                  <th style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p style='margin: 0'><b>Target date</b></p>
                  </th>
                  <th style='border: 1px solid black; width: 14%; text-align: center;'>
                    <p style='margin: 0'><b>Completed</b></p>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--QcTbkE79--/v1574768464/updu43acfmzhdrrchcfg.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Bricklayer</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Tape up telescopic vents on foundations</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--8lIUOkSq--/v1574768481/dwvphchttjbg7na25eh7.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Bricklayer</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Cut blocks at all times</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--vCfLC_Bb--/v1574768487/uojexdjsamu4ycs6tmyr.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Bricklayer</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Dpc to fit at p42 has box</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--uVLqBecI--/v1574768480/qmynbrehhoecihdf0u7x.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Electrician</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Metwr board to fit in plot 42, services 9/12</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--9faKbjFl--/v1574768474/qh8d64wyca1rh4e9cudy.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Groundworker</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Back fill at scaffold laydown area</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--nGlC1VbH--/v1574768469/vdswpjzmzcdpexenlefv.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Groundworker</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Establosh new conceete washout area and tidy steel area</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--lUyM41cL--/v1574768474/xdgquymah5kpl7djkh0z.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Groundworker</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Fit water toby boxes at scaffold laydown area and back fill</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--nttXhp6U--/v1574768476/f14fffzcn7muyn7ktrne.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Groundworker</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Fit water toby boxes at concrwte washout area and back fill</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--BOwD7VqH--/v1574768473/ne4kuahzukfsdzkcwpft.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Groundworker</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Back fill area at front of plot 51</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--woBG-8GI--/v1574768486/uxhtzbg4txeyts7ncw1k.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Groundworker</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Tidy Groundworkers storage area</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--cxbWomo9--/v1574768464/fanehlp8mhdjsaqg7c5b.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Joiner</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Fix rips in kit and fire bag at top corner to close gap</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--cQb6HwKV--/v1574768412/o2z08ypuobvgjlquhpe1.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Joiner</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>PLOT 82 Fire bags at steel on plot 82</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'>
                    <div style='vertical-align: middle; margin: 0 auto; width: 125px; height: 125px;'><svg xmlns="http://www.w3.org/2000/svg" viewBox="89 -11 621 621" style="display: inline-block; vertical-align: middle;">
                        <path fill="#DADBDC" d="M109 10h581v581H109z" />
                        <path fill="#F3F4F4" d="M89-11h622v622H89V-11zm381 260l-8-48-167 30 24 140 17-3v12h170V249h-36zM336 354l-6 1-20-113 141-25 6 32H336v105zm156 12H350V263h142v103zm-133-94v77l29-20 18 12 43-48 6 2 28 33v-56H359zm27 33c-6 0-12-6-12-12 0-7 6-12 12-12 7 0 13 5 13 12 0 6-6 12-13 12z" /></svg></div>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Joiner</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>PLOT 44 (Gap at fire bags in garage)</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--Ik3fuWYw--/v1574768465/xmryfaro5fuk4bs7jcef.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Joiner</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>PLOT 43 FIRE BAGS AT GARAGE DOOR {gap)</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'>
                    <div style='vertical-align: middle; margin: 0 auto; width: 125px; height: 125px;'><svg xmlns="http://www.w3.org/2000/svg" viewBox="89 -11 621 621" style="display: inline-block; vertical-align: middle;">
                        <path fill="#DADBDC" d="M109 10h581v581H109z" />
                        <path fill="#F3F4F4" d="M89-11h622v622H89V-11zm381 260l-8-48-167 30 24 140 17-3v12h170V249h-36zM336 354l-6 1-20-113 141-25 6 32H336v105zm156 12H350V263h142v103zm-133-94v77l29-20 18 12 43-48 6 2 28 33v-56H359zm27 33c-6 0-12-6-12-12 0-7 6-12 12-12 7 0 13 5 13 12 0 6-6 12-13 12z" /></svg></div>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Joiner</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Sort fire bag at porch area plot 83</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--Xh-no89I--/v1574768467/chxqzofcspebobk1ommo.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Joiner</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Tidy truss rack area</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--3d_o1XiL--/v1574768470/rs19de3mknvkyyub1z8f.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Joiner</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Centre favings in wardrobe arwa at plot 41</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--ZyfiCPEB--/v1574768480/lv1gjmjsqudxqpvhczzb.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Joiner</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Make sure all fire bags under steel is fitted in garages</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--TPMZfDzy--/v1574768481/ugbjyfg7t1naperg3qzh.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Joiner</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Floor to fix at shower in p42 ES</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--1Nxy8Rgc--/v1574768487/rqqpoxfhvkojj7ksz4si.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Joiner</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Rips on paper and protect baywindow cills, brickies to clean</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--qitlHlr1--/v1574770481/diavjnxd6kyicgvrvzvj.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Joiner</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Fire bags at steel on plot 82</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--1yYcfUCv--/v1574768474/qeveu0hc01hfjoli69mo.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Labourer</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Update all plot boards</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--hBSbH1RU--/v1574768480/rnby936uttnlfdabuxrw.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Labourer</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Tidy back of plots 41-44</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--GVUzgfp---/v1574768481/e7w89hkvp00nlqrnjiry.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Labourer</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Remove osb from p42 back bedroom</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--YJU9r4Wd--/v1574768487/r5khypvlp4gccb0xoxyg.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Labourer</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Tidy area at back of storage area</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--1qe-stWP--/v1574768488/f7xbmhdofso5vo4yjacy.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Labourer</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Tidy Groundworkers storage area</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--DG2vDzz5--/v1574768480/cecercxw8imjpcczcumy.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Landscaper</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Book in service strip turfing P84-83</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--GWEbBp2i--/v1574768473/fbomcgman2aspplasepy.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Painter</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Tape patches in P41 Kitchen</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--49GbRDyr--/v1574768481/htacemyxqyohkh7jamq7.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Plasterer</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Tape to finish in p42 ensuite</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--4oJpHIQY--/v1574768479/qkrsn0cbd4dg5i0sc8h0.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Plumber</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Tape piework in p42 wc</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--c-wa6VuI--/v1574768402/msrj0zannyu5op0uwl4w.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Plumber</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Tape pipe work red and blue tape</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td style='border: 1px solid black; border-top-width: 0px; width: 15%; text-align: left;' colspan='1'><img src='https://res.cloudinary.com/millerbsnv2/image/authenticated/s--sY3fWVaa--/v1574768477/cb2mnylsrj7a5rsnftn6.jpg' height='200' width='200' style='vertical-align: middle; margin: 0 auto; max-width: 125px; max-height: 125px;'></td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>Plumber</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>External</p>
                  </td>
                  <td style='border: 1px solid black; width: 0%; text-align: center;'>
                    <p>Re Patanate plot 84 baywindow leadwork</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <p>29/11/2019</p>
                  </td>
                  <td style='border: 1px solid black; width: 15%; text-align: center;'>
                    <div style='padding: 10px; margin: 5px auto; width: 0px; height: 0px; border: 2px solid black;'></div>
                  </td>
                </tr>
              </tbody>
          </body>
        
        </html>`;

        pdf.fromData(html, options).then((base64) => {
            console.log(';data:application/pdf;base64,' + base64);
        });

Would you mind helping us resolve this issue @cesarvr ?
@cesarvr
Copy link
Owner

cesarvr commented Nov 26, 2019

Hi @lukawal-miller , can you please attach logs ?

In this example there is a case similar to yours where I attach multiple pages maybe can be of help.

@lukawal-miller
Copy link
Author

lukawal-miller commented Nov 27, 2019 •
edited
Loading

@cesarvr I've tried attaching debugger to the function, but app did not stop, just crashed. And since it crashed, debugger did not work. Code below:

pdf.fromData(html, options)
.then((base) => console.log(base) )
.catch((error) => debugger )

Is there a better way to get a log for you to look at?
Is there a known limit on the file size generated?

Cheers.

@cesarvr
Copy link
Owner

cesarvr commented Nov 27, 2019

Look what I did:

I get my sample project and execute it using:

open platforms/iOS/Testing.xcworkspace

Once there I run the simulator and hook Safari (I'm using a Mac), then in the console I copy paste your code and got this:

Screenshot 2019-11-27 at 08 56 43

Now safari is struggling to draw the resulting base64 because the content is large, so if I have to guess, your crash has to do more with an out of memory error or something similar, in that case you maybe need to treat the resulting data with careful like not printing it in the console or whatever action that may tax your device.

Here is a screen shot of the content:

Screenshot 2019-11-27 at 09 03 41

Hope this helps :)
Cesar.

@lukawal-miller
Copy link
Author

@cesarvr Thanks for your reply. I was able to generate base64 in console (43 MB as base64 string). I've also tried to run our app on a newer device with 4GB RAM... and document got generated without app crashing.
Looks like the issue has to be related to our devices since they come with 3 GB RAM or less.

@lukawal-miller
Copy link
Author

@cesarvr Guessing there is nothing else we can do? Thanks.

@cesarvr
Copy link
Owner

cesarvr commented Nov 28, 2019

= Is this crash happening when the promise returns ?
= or the promise never returns and the process just die ?
= Also is this Android or iOS ?

@lukawal-miller
Copy link
Author

App is crashing while base64 string gets generated. So promise never returns and app just dies. We are working with Android devices.

@anapaulaweiss
Copy link

conseguiram resolver de alguma forma? estou com o mesmo problema.

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

No branches or pull requests
3 participants
@cesarvr @lukawal-miller @anapaulaweiss