在Google Apps脚本中从HTML创建PDF并包含图片 - 图片未显示 [英] Create PDF from HTML in Google Apps Script and include images - Images not showing up

查看：188
本文介绍了在Google Apps脚本中从HTML创建PDF并包含图片 - 图片未显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想动态创建PDF。这意味着我从Google Drive获取文件，然后将它们放入HTML代码中，并尝试从中创建PDF。



一切正常，除了图片不是显示出来。



我现在正在做的是：


  1. 创建HtmlOutput从HTML字符串获取。

  2. 获取该HTML的Blob。
    3. 然后，该blob getAs PDF
  3. 然后finally保存在驱动器中的PDF。

我想也许它需要一些时间来渲染图像，所以我增加了睡眠。 b
$ b

另外建议/解决方案/代码也很受欢迎。

以下是我使用的代码:: 

  function htmlToPDF（）{$​​ b $ b var file1 =0BweO_SXcQGqgcEV3Mk9QYVRMczQ; 
 var file2 =0BweO_SXcQGqgVU93ZU56WkRkN3c; 
 var file3 =0BweO_SXcQGqgMkIxTlhKajk5MFk; 
 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>< 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;颜色：＃000;显示：inline-block;宽度：100％; margin-top：2px; } .left_top p {font-size：20px; font-weight：bold;颜色：＃ea9a5a;保证金：0; } .right_top img {border-top：7px solid＃496bb3; border-bottom：7px solid＃496bb3; padding：16px 5px 13px 4px; } .right_top {display：inline-block;位置：绝对;背景：#fff; } .galleryimage_main img {width：100％;显示：inline-block; } .property_address {} .property_address p {font-size：15px;文字转换：大写;颜色：#fff; margin-bottom：0; margin-top：4px; } .common_box_style {padding：20px;背景：＃496bb3;文字转换：大写; } .common_box_style h2 {margin-top：2px;颜色：＃54bb73; font-size：20px; } .property_information {margin-left：6px; } .property_information ul li p {font-size：15px;颜色：#fff; text-transform：大写; margin-bottom：3px; margin-top：0; } .property_information ul li {list-style：none; margin-bottom：5px; } .property_information ul li span {font-size：15px;颜色：#fff; text-transform：大写; margin-bottom：3px; margin-top：0;宽度：100px;显示：inline-block; text-align：left; } .property_information ul {padding-left：0;宽度：自动;显示：inline-block;向左飘浮; 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;颜色：#fff;显示：inline-block;宽度：100％;保证金：0; } p.cash_prize span {padding-left：10px; } .margintop {margin-top：6px; } .left_col {width：34％;向左飘浮; } .right_col {display：inline-block;宽度：66％; } .gallery_small_images {display：inline-block;宽度：99％; margin-left：6px; margin-top：6px;身高：232px;溢出：隐藏; } .gallery_small_images img {width：100％; } .gallery_small_image2 {width：50％;向左飘浮; } .gallery_small_image3 {width：49％;显示：inline-block;向左飘浮; margin-left：6px; } table.expense_info tr td.exp_info_disc {font-size：14px;颜色：#fff; text-transform：大写; 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;身高：33px; margin-bottom：5px; } .roi h2 {margin-top：24px; font-size：22px; font-weight：800; } tr.total_exp {font-weight：bold; margin-top：4px; / *显示：表格; * /宽度：100％; } table.expense_info th {font-size：12px; font-weight：bold;颜色：#fff; text-transform：大写; } td {font-size：13px;颜色：#fff; text-align：center; vertical-align：middle; } .expense_info.common_box_style.margintop {padding：20px 13px; } table.cashflow {text-align：center;保证金：0汽车;颜色：#fff; text-transform：大写; } table.cashflow tr th {font-size：19px; font-weight：normal; } table.cashflow tr td {font-size：17px; font-weight：bold; } .roi {display：inline-block;背景：＃2bb673;宽度：99％; text-align：center;颜色：＃000; padding：10px 0px 20px 0; margin-left：6px; margin-top：6px; } .discliamer_sec {background：＃dfe9e9;显示：inline-block; text-align：center; font-size：9px;宽度：100％;填充：10px 0; line-height：18px; margin-top：6px; } .discliamer_sec h2 {color：＃768293; } .footer_cright {background：＃496bb3; text-align：center; font-size：8px;颜色：#fff;填充：1px 0; font-weight：400; margin-top：7px;显示：inline-block;宽度：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'> < /头> <身体GT; < div class ='main_wrapper'> < div class ='top_header'> < div class ='left_top'>< p class ='contact_person'> Xyz xyz< span> xyz@xyz.com< / span>< / p>< p class ='contact_person right_person'> Xyz xyz< span> xyz@xyz.com< / span>< / p>< / div> < div class ='right_top'>; 
 html + =< img src ='images / logo.png'/>< / div> < / DIV> < div class ='galleryimage_main'> < img src ='https：//drive.google.com/uc？export = view& id =+ file1 +'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>费用信息< / h2> < table id ='expense_information'class ='expense_info'cellpadding ='3'cellspacing ='1'> < TR> <的第i;< /第>租金的百分比（％） <的第i;月刊< /第> <的第i;年度< /第> < / TR> < TR> < td class ='exp_info_disc'>估计税金：< / td> < TD>  - < / TD> < TD> 345°; / TD> < TD> 777< / TD> < / TR> < td class ='exp_info_disc'>预计保险：< / td> < TD>  - < / TD> < TD> 200℃; / TD> < TD> 133< / TD> < / TR> < TR> < td class ='exp_info_disc'>管理费用：< / td> < TD> 4℃; / TD> < TD> 344< / TD> < TD> 5200< / TD> < / TR> < TR> < td class ='exp_info_disc'>空缺调整：< / td> < TD> 2'; / TD> < TD> 555< / TD> < TD> 50℃; / TD> < / TR> < TR> < td class ='exp_info_disc'>修理&维护：< / 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> < /表> < / DIV> < div class ='cashflow common_box_style margintop'> < h2>现金流估计< / h2> < table id ='cashflow'class ='cashflow'cellpadding ='3'cellspacing ='5'> < TR>每月第< th> < th>每年< / th> < / TR> < TR> < TD> 123< / TD> < TD> 4533< / TD> < / TR> < /表> < / DIV> < / DIV> < div class ='right_col'> < div id ='property_information'class ='property_information common_box_style margintop'> < h2> PROPERTY信息< / h2> < UL> < li>< span>清单价格：< / span>< span class ='value_field'> 100< / span>< / p>< / li> < li>< span>修复成本：< / span>< span class ='value_field'> 100< / span>< / p>< / li> < li>< span>结构：< / span>< span class ='value_field'>单身家庭< / li>< < li>< span>目前租金：< / span>< span class ='value_field'> 29< / span>< / li> < / UL> < ul class ='grpleft'> < li>< span>卧室：< / span>< span class ='value_field'> 100< / span>< / li> < li>< span>浴室：< / span>< span class ='value_field'> 100< / span>< / p>< / li> < li>< span>平方英寸视频：< / span>< span class ='value_field'> 100< / span>< / p>< / li> <李><跨度>当前状态：< / span>< span class ='value_field'>已出租并正在执行< / span>< / li> < / UL> < p class ='cash_prize'>现金价格< span> 300< / span>< / p> < / DIV> < div class ='gallery_small_images'> < div class ='gallery_small_image2'> < img src ='https：//drive.google.com/uc？export = view& id =+ file2 +'/> < / DIV> < div class ='gallery_small_image3'> < img src ='https：//drive.google.com/uc？export = view& id =+ file3 +'/> < / 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>信息视为可信，但不保证。图像不成比例。买方负责对所提供的所有信息进行尽职调查，并应进行自己的研究。< / h2> < / DIV> < div class ='footer_cright'> < h2>版权所有©High Return Real Estate LLC  -  2017< / h2> < / DIV> < / DIV> < /体> < / html>; 
 var blob = HtmlService.createHtmlOutput（html）; 
 //Utilities.newBlob（html，text / html，text.html）; 
 Utilities.sleep（30000）; 
 blob = blob.getBlob（）; 
 var pdf = blob.getAs（application / pdf）; 
 Utilities.sleep（30000）; 
 DriveApp.createFile（pdf）.setName（text.pdf）; 
}


base64数据>解决方案

> string并创建一个页面，其余的过程与前面的一样

  function htmlToPDF（）{$​​ b $ b 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 +文件[0]）
文件[0] = img.getBl ob（）。getContentType（）+'; base64''+ Utilities.base64Encode（img.getBlob（）。getBytes（））
 var img = UrlFetchApp.fetch（url + file [1]）$ ​​b $ b 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>高回报房地产< / title> <风格> @charset'utf-8'; / * CSS Document * / body，html {font-family：'Lato'，sans-serif;背景：＃dfe7ea; margin-top：0;边距：0; } .main_wrapper {width：930px;保证金：0汽车;背景：#fff;填充：0 23px 0 23px; box-shadow：1px 1px 8px -1px #bbbbbb; } .top_header {background：＃dfe9e9;显示：inline-block;宽度：100％; margin-bottom：6px; } .left_top {display：inline-block;宽度：70％; padding：26px 0 26px 50px;向左飘浮; } p.contact_person.right_person {border-right：0; padding-left：25px;显示：inline-block; } p.contact_person {width：214px;显示：inline-block; text-align：left; border-right：1px solid＃ccd4d3; } .left_top p span {font-size：13px;颜色：＃000;显示：inline-block;宽度：100％; margin-top：2px; } .left_top p {font-size：20px; font-weight：bold;颜色：＃ea9a5a;保证金：0; } .right_top img {border-top：7px solid＃496bb3; border-bottom：7px solid＃496bb3; padding：16px 5px 13px 4px; } .right_top {display：inline-block;位置：绝对;背景：#fff; } .galleryimage_main img {width：100％;显示：inline-block; } .property_address {} .property_address p {font-size：15px;文字转换：大写;颜色：#fff; margin-bottom：0; margin-top：4px; } .common_box_style {padding：20px;背景：＃496bb3;文字转换：大写; } .common_box_style h2 {margin-top：2px;颜色：＃54bb73; font-size：20px; } .property_information {margin-left：6px; } .property_information ul li p {font-size：15px;颜色：#fff; text-transform：大写; margin-bottom：3px; margin-top：0; } .property_information ul li {list-style：none; margin-bottom：5px; } .property_information ul li span {font-size：15px;颜色：#fff; text-transform：大写; margin-bottom：3px; margin-top：0;宽度：100px;显示：inline-block; text-align：left; } .property_information ul {padding-left：0;宽度：自动;显示：inline-block;向左飘浮; 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;颜色：#fff;显示：inline-block;宽度：100％;保证金：0; } p.cash_prize span {padding-left：10px; } .margintop {margin-top：6px; } .left_col {width：34％;向左飘浮; } .right_col {display：inline-block;宽度：66％; } .gallery_small_images {display：inline-block;宽度：99％; margin-left：6px; margin-top：6px;身高：232px;溢出：隐藏; } .gallery_small_images img {width：100％; } .gallery_small_image2 {width：50％;向左飘浮; } .gallery_small_image3 {width：49％;显示：inline-block;向左飘浮; margin-left：6px; } table.expense_info tr td.exp_info_disc {font-size：14px;颜色：#fff; text-transform：大写; 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;身高：33px; margin-bottom：5px; } .roi h2 {margin-top：24px; font-size：22px; font-weight：800; } tr.total_exp {font-weight：bold; margin-top：4px; / *显示：表格; * /宽度：100％; } table.expense_info th {font-size：12px; font-weight：bold;颜色：#fff; text-transform：大写; } td {font-size：13px;颜色：#fff; text-align：center; vertical-align：middle; } .expense_info.common_box_style.margintop {padding：20px 13px; } table.cashflow {text-align：center;保证金：0汽车;颜色：#fff; text-transform：大写; } table.cashflow tr th {font-size：19px; font-weight：normal; } table.cashflow tr td {font-size：17px; font-weight：bold; } .roi {display：inline-block;背景：＃2bb673;宽度：99％; text-align：center;颜色：＃000; padding：10px 0px 20px 0; margin-left：6px; margin-top：6px; } .discliamer_sec {background：＃dfe9e9;显示：inline-block; text-align：center; font-size：9px;宽度：100％;填充：10px 0; line-height：18px; margin-top：6px; } .discliamer_sec h2 {color：＃768293; } .footer_cright {background：＃496bb3; text-align：center; font-size：8px;颜色：#fff;填充：1px 0; font-weight：400; margin-top：7px;显示：inline-block;宽度：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'> < /头> <身体GT; < div class ='main_wrapper'> < div class ='top_header'> < div class ='left_top'>< p class ='contact_person'> Xyz xyz< span> xyz@xyz.com< / span>< / p>< p class ='contact_person right_person'> Xyz xyz< span> xyz@xyz.com< / 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>费用信息< / h2> < table id ='expense_information'class ='expense_info'cellpadding ='3'cellspacing ='1'> < TR> <的第i;< /第>租金的百分比（％） <的第i;月刊< /第> <的第i;年度< /第> < / TR> < TR> < td class ='exp_info_disc'>估计税金：< / td> < TD>  - < / TD> < TD> 345°; / TD> < TD> 777< / TD> < / TR> < td class ='exp_info_disc'>预计保险：< / td> < TD>  - < / TD> < TD> 200℃; / TD> < TD> 133< / TD> < / TR> < TR> < td class ='exp_info_disc'>管理费用：< / td> < TD> 4℃; / TD> < TD> 344< / TD> < TD> 5200< / TD> < / TR> < TR> < td class ='exp_info_disc'>空缺调整：< / td> < TD> 2'; / TD> < TD> 555< / TD> < TD> 50℃; / TD> < / TR> < TR> < td class ='exp_info_disc'>修理&维护：< / 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> < /表> < / DIV> < div class ='cashflow common_box_style margintop'> < h2>现金流估计< / h2> < table id ='cashflow'class ='cashflow'cellpadding ='3'cellspacing ='5'> < TR>每月第< th> < th>每年< / th> < / TR> < TR> < TD> 123< / TD> < TD> 4533< / TD> < / TR> < /表> < / DIV> < / DIV> < div class ='right_col'> < div id ='property_information'class ='property_information common_box_style margintop'> < h2> PROPERTY信息< / h2> < UL> < li>< span>清单价格：< / span>< span class ='value_field'> 100< / span>< / p>< / li> < li>< span>修复成本：< / span>< span class ='value_field'> 100< / span>< / p>< / li> < li>< span>结构：< / span>< span class ='value_field'>单身家庭< / li>< < li>< span>目前租金：< / span>< span class ='value_field'> 29< / span>< / li> < / UL> < ul class ='grpleft'> < li>< span>卧室：< / span>< span class ='value_field'> 100< / span>< / li> < li>< span>浴室：< / span>< span class ='value_field'> 100< / span>< / p>< / li> < li>< span>平方英寸视频：< / span>< span class ='value_field'> 100< / span>< / p>< / li> <李><跨度>当前状态：< / span>< span class ='value_field'>已出租并正在执行< / span>< / li> < / UL> < p class ='cash_prize'>现金价格< 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>信息视为可信，但不保证。图像不成比例。买方负责对所提供的所有信息进行尽职调查，并应进行自己的研究。< / h2> < / DIV> < div class ='footer_cright'> < h2>版权所有©High Return Real Estate LLC  -  2017< / h2> < / DIV> < / DIV> < /体> < / 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）; 
}


I want to create PDF dynamically. That means I am taking files from Google Drive and then putting them in a HTML code and trying to create PDF out of it.

Everything is working fine , except images are not showing up.

What I am doing right now is :

  1. Create HtmlOutput from HTML string.
  2. Getting blob of that HTML.
  3. Then that blob getAs PDF
  4. Then finally saving that PDF in drive.

I thought maybe it need some time to render images so I have added sleep.

Alternative suggestions/solutions/code is also welcomed.

Here is the code I am using ::

function htmlToPDF() {
    var file1="0BweO_SXcQGqgcEV3Mk9QYVRMczQ";
    var file2="0BweO_SXcQGqgVU93ZU56WkRkN3c";
    var file3="0BweO_SXcQGqgMkIxTlhKajk5MFk";
    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>xyz@xyz.com</span></p><p class='contact_person right_person'>Xyz xyz<span>xyz@xyz.com</span></p></div> <div class='right_top'>";
    html +="<img src='images/logo.png' /></div> </div> <div class='galleryimage_main'> <img src='https://drive.google.com/uc?export=view&id="+file1+"' 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='https://drive.google.com/uc?export=view&id="+file2+"' /> </div> <div class='gallery_small_image3'> <img src='https://drive.google.com/uc?export=view&id="+file3+"' /> </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");
    Utilities.sleep(30000);
    blob = blob.getBlob();
    var pdf = blob.getAs("application/pdf");
    Utilities.sleep(30000);
    DriveApp.createFile(pdf).setName("text.pdf");
}

解决方案

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>xyz@xyz.com</span></p><p class='contact_person right_person'>Xyz xyz<span>xyz@xyz.com</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");
}

这篇关于在Google Apps脚本中从HTML创建PDF并包含图片 - 图片未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆