Images not showing up on PDF created from HTML

by

You can download the image file using URLfetchApp and convert it into a base64 data string and create a page with that. The remaining procedure is same as previous

function htmlToPDF() {
   var file = []
     file[0]="0BweO_SXcQGqgcEV3Mk9QYVRMczQ"
    file[1]="0BweO_SXcQGqgVU93ZU56WkRkN3c"
    file[2]="0BweO_SXcQGqgMkIxTlhKajk5MFk"
    var url = "https://drive.google.com/uc?export=view&id="
    var img = UrlFetchApp.fetch(url+file[0])
    file[0] = img.getBlob().getContentType()+';base64,'+ Utilities.base64Encode(img.getBlob().getBytes())
    var img = UrlFetchApp.fetch(url+file[1])
    file[1] = img.getBlob().getContentType()+';base64,'+ Utilities.base64Encode(img.getBlob().getBytes())
    var img = UrlFetchApp.fetch(url+file[2])
    file[2] = img.getBlob().getContentType()+';base64,'+ Utilities.base64Encode(img.getBlob().getBytes())
    var html = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv='Content-Type' content="text/html; charset=utf-8" /> <title>High Return Real Estate</title> <style> @charset 'utf-8'; /* CSS Document */ body,html{ font-family: 'Lato', sans-serif; background:#dfe7ea; margin-top: 0; margin-bottom:0; } .main_wrapper { width: 930px; margin: 0 auto; background: #fff; padding: 0 23px 0 23px; box-shadow: 1px 1px 8px -1px #bbbbbb; } .top_header { background: #dfe9e9; display: inline-block; width: 100%; margin-bottom: 6px; } .left_top { display: inline-block; width: 70%; padding: 26px 0 26px 50px; float: left; } p.contact_person.right_person { border-right: 0; padding-left: 25px; display: inline-block; } p.contact_person { width: 214px; display: inline-block; text-align: left; border-right: 1px solid #ccd4d3; } .left_top p span { font-size: 13px; color: #000; display: inline-block; width: 100%; margin-top: 2px; } .left_top p { font-size: 20px; font-weight: bold; color: #ea9a5a; margin: 0; } .right_top img { border-top: 7px solid #496bb3; border-bottom: 7px solid #496bb3; padding: 16px 5px 13px 4px; } .right_top { display: inline-block; position: absolute; background: #fff; } .galleryimage_main img { width: 100%; display: inline-block; } .property_address { } .property_address p { font-size: 15px; text-transform: uppercase; color: #fff; margin-bottom: 0; margin-top: 4px; } .common_box_style { padding: 20px; background: #496bb3; text-transform: uppercase; } .common_box_style h2 { margin-top: 2px; color: #54bb73; font-size: 20px; } .property_information { margin-left: 6px; } .property_information ul li p { font-size: 15px; color: #fff; text-transform: capitalize; margin-bottom: 3px; margin-top: 0; } .property_information ul li { list-style: none; margin-bottom: 5px; } .property_information ul li span { font-size: 15px; color: #fff; text-transform: capitalize; margin-bottom: 3px; margin-top: 0; width: 100px; display: inline-block; text-align: left; } .property_information ul { padding-left: 0; width: auto; display: inline-block; float: left; margin-right: 15px; margin-top: 0; margin-bottom: 4px; } .property_information ul li span.value_field { font-size: 13px; } ul.grpleft li span { width: 136px; } p.cash_prize { text-align: center; font-size: 18px; font-weight: bold; color: #fff; display: inline-block; width: 100%; margin: 0; } p.cash_prize span { padding-left: 10px; } .margintop{ margin-top: 6px; } .left_col { width: 34%; float: left; } .right_col { display: inline-block; width: 66%; } .gallery_small_images { display: inline-block; width: 99%; margin-left: 6px; margin-top: 6px; height: 232px; overflow: hidden; } .gallery_small_images img{ width:100%; } .gallery_small_image2 { width: 50%; float: left; } .gallery_small_image3 { width: 49%; display: inline-block; float: left; margin-left: 6px; } table.expense_info tr td.exp_info_disc { font-size: 14px; color: #fff; text-transform: capitalize; text-align: left; } tr.total_exp td { padding-top: 13px; padding-bottom: 30px; } .cashflow h2 { margin-bottom: 7px; } .roi input[type="text"] { font-size: 23px; text-align: center; font-weight: bold; height: 33px; margin-bottom: 5px; } .roi h2 { margin-top: 24px; font-size: 22px; font-weight: 800; } tr.total_exp { font-weight: bold; margin-top: 4px; /* display: table; */ width: 100%; } table.expense_info th { font-size: 12px; font-weight: bold; color: #fff; text-transform: capitalize; } td { font-size: 13px; color: #fff; text-align: center; vertical-align: middle; } .expense_info.common_box_style.margintop { padding: 20px 13px; } table.cashflow { text-align: center; margin: 0 auto; color: #fff; text-transform: capitalize; } table.cashflow tr th { font-size: 19px; font-weight: normal; } table.cashflow tr td { font-size: 17px; font-weight: bold; } .roi { display: inline-block; background: #2bb673; width: 99%; text-align: center; color: #000; padding: 10px 0px 20px 0; margin-left: 6px; margin-top: 6px; } .discliamer_sec { background: #dfe9e9; display: inline-block; text-align: center; font-size: 9px; width: 100%; padding: 10px 0; line-height: 18px; margin-top: 6px; } .discliamer_sec h2 { color: #768293; } .footer_cright { background: #496bb3; text-align: center; font-size: 8px; color: #fff; padding: 1px 0; font-weight: 400; margin-top: 7px; display: inline-block; width: 100%; } @media print { .common_box_style, .roi, .discliamer_sec, .footer_cright, .top_header { background: !important; -webkit-print-color-adjust: exact; } } </style> <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"> </head> <body> <div class="main_wrapper"> <div class="top_header"> <div class="left_top"><p class="contact_person">Xyz xyz<span>[email protected]</span></p><p class="contact_person right_person">Xyz xyz<span>[email protected]</span></p></div> <div class="right_top">";
    html +="<img src="images/logo.png" /></div> </div> <div class="galleryimage_main"> <img src="data:"+file[0]+"" alt="Gallery Image Here" height="350" width="885"/> </div> <div class="left_col"> <div class="property_address common_box_style margintop"> <h2>PROPERTY ADDRESS</h2> <p id='address_line_1' class="address_line_1">4043 N RAVENSWOOD AVE,</p> <p id='address_line_2' class="address_line_2">CSUITE 316, HICAGO,</p> </div> <div class="expense_info common_box_style margintop"> <h2>EXPENSE INFORMATION</h2> <table id='expense_information' class="expense_info" cellpadding='3' cellspacing='1'> <tr> <th></th> <th>%of Rent</th> <th>Monthly</th> <th>Yearly</th> </tr> <tr> <td class="exp_info_disc">Estimated Taxes:</td> <td>-</td> <td>345</td> <td>777</td> </tr> <td class="exp_info_disc">Estimated Insurance:</td> <td>-</td> <td>200</td> <td>133</td> </tr> <tr> <td class="exp_info_disc">Management Fee:</td> <td>4</td> <td>344</td> <td>5200</td> </tr> <tr> <td class="exp_info_disc">Vacancy Adjustment:</td> <td>2</td> <td>555</td> <td>50</td> </tr> <tr> <td class="exp_info_disc">Repairs & Maintenance: </td> <td>10</td> <td>500</td> <td>50</td> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr is="total_exp" class="total_exp"> <td class="exp_info_disc">TOTAL EXPENSES:</td> <td></td> <td>343</td> <td>342</td> </tr> <tr> </tr><tr> </tr><tr> </tr> </table> </div> <div class="cashflow common_box_style margintop"> <h2>CASH FLOW ESTIMATE</h2> <table id='cashflow' class="cashflow" cellpadding='3' cellspacing='5'> <tr> <th>Per Month</th> <th>Per Year</th> </tr> <tr> <td>123</td> <td>4533</td> </tr> </table> </div> </div> <div class="right_col"> <div id='property_information' class="property_information common_box_style margintop"> <h2>PROPERTY Information</h2> <ul> <li><span>List Price:</span><span class="value_field">100</span></p></li> <li><span>Rehab Costs:</span><span class="value_field">100</span></p></li> <li><span>Structure:</span><span class="value_field">Single Family</span></li> <li><span>Current Rent:</span><span class="value_field">29</span></li> </ul> <ul class="grpleft"> <li><span>Bedrooms:</span><span class="value_field">100</span></li> <li><span>Bathrooms:</span><span class="value_field">100</span></p></li> <li><span>Square Footage:</span><span class="value_field">100</span></p></li> <li><span> Current Status:</span><span class="value_field">Rented and Performing </span></li> </ul> <p class="cash_prize">CASH PRICE<span>300</span></p> </div> <div class="gallery_small_images"> <div class="gallery_small_image2"> <img src="data:"+file[1]+"" /> </div> <div class="gallery_small_image3"> <img src="data:"+file[2]+"" /> </div></div> <div class="roi" id='cash_on_cash'> <h2>CASH-ON-CASH ROI</h2> <input type="text" value="1200" id='cash_roi_input'></input> </div> </div> <div class="discliamer_sec"> <h2>Information deemed reliabale but not guranteed. Images not to scale. Buyer responsible for <br>due diligence for all information provided and should conduct their own research.</h2> </div> <div class="footer_cright"> <h2>Copyright © High Return Real Estate LLC - 2017</h2> </div> </div> </body> </html>"; 
    var blob = HtmlService.createHtmlOutput(html);
    //Utilities.newBlob(html, "text/html", "text.html");
    
    blob = blob.getBlob();
    var pdf = blob.getAs("application/pdf");
    
    
    DriveApp.createFile(pdf).setName("text.pdf");
}

More Related Contents:

  1. Uploading Multiple Files to Google Drive with Google App Script
  2. Google apps script – iterate folder and subfolder
  3. Using base64-encoded images with HtmlService in Apps Script
  4. How to compress an image via Javascript in the browser?
  5. Change image size with JavaScript
  6. How can I determine if an image has loaded, using Javascript/jQuery?
  7. Javascript: Cancel/Stop Image Requests
  8. How to silently hide “Image not found” icon when src source image is not found
  9. How to save a base64 image to user’s disk using JavaScript?
  10. How to display image with JavaScript?
  11. Using raw image data from ajax request for data URI
  12. JS – get image width and height from the base64 code
  13. How to copy a row from one google spreadsheet to another google spreadsheet using google apps script?
  14. Emailing Google Sheet range (with or without formatting) as a HTML table in a Gmail message
  15. importing external javascript to google apps script [duplicate]
  16. UrlFetchApp request fails in Menu Functions but not in Custom Functions (connecting to external REST API)
  17. Synchronize independent spreadsheet rows, filled by IMPORTRANGE()
  18. How to go about debugging JavaScript in the HtmlService in Google Scripts
  19. How to run certain scripts under the authority of a specific user?
  20. JavaScript loading progress of an image
  21. Image brightness detection in client side script
  22. What does “[Ljava.lang.Object;@” mean?
  23. Using Google Apps Script to scrape Dynamic Web Pages
  24. Using image.complete to find if image is cached on chrome?
  25. What is the best way to parse html in google apps script
  26. Is google apps script synchronous?
  27. jQuery, JavaScript, HTML: how to load images after everything else is loaded?
  28. Google Script: Play Sound when a specific cell change the Value
  29. Failure of calling Google App Script onEdit function many times in a second
  30. How do I get natural dimensions of an image using JavaScript or jQuery?

Leave a Comment