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

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

问题描述

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

一切正常，除了图像不显示.

我现在正在做的是:

  1. 从 HTML 字符串创建 HtmlOutput.
  2. 获取该 HTML 的 blob.
  3. 然后那个 blob getAs PDF
  4. 然后最终将该 PDF 保存在驱动器中.

我想可能需要一些时间来渲染图像，所以我添加了睡眠.

也欢迎其他建议/解决方案/代码.

这是我正在使用的代码 ::

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>高回报地产</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 26px50px; 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:左; 右边框:1px 实心 #ccd4d3; } .left_top p span { 字体大小:13px;颜色:#000；显示:内联块；宽度:100%；边距顶部:2px；} .left_top p { 字体大小:20px;字体粗细:粗体；颜色:#ea9a5a；边距:0；} .right_top img { border-top: 7px solid #496bb3;边框底部:7px 实心 #496bb3；填充:16px 5px 13px 4px；} .right_top { 显示:内联块；位置:绝对；背景:#fff;} .galleryimage_main img { 宽度:100%;显示:内联块；} .property_address { } .property_address p { 字体大小:15px;文本转换:大写；颜色:#fff;底边距:0；边距顶部:4px；} .common_box_style { 填充:20px;背景:#496bb3；文本转换:大写；} .common_box_style h2 { margin-top: 2px;颜色:#54bb73；字体大小:20px；} .property_information { margin-left: 6px;} .property_information ul lip { 字体大小:15px;颜色:#fff;文本转换:大写；底边距:3px；边距顶部:0；} .property_information ul li { 列表样式:无；底边距:5px；} .property_information ul li span { font-size: 15px;颜色:#fff;文本转换:大写；底边距:3px；边距顶部:0；宽度:100px；显示:内联块；文本对齐:左；} .property_information ul { padding-left: 0;宽度:自动；显示:内联块；向左飘浮;右边距:15px；边距顶部:0；底边距:4px；} .property_information ul li span.value_field { 字体大小:13px;} ul.grpleft li span { 宽度:136px;} p.cash_prize { 文本对齐:居中；字体大小:18px；字体粗细:粗体；颜色:#fff;显示:内联块；宽度:100%；边距:0；} p.cash_prize span { padding-left: 10px;} .margintop{ margin-top: 6px;} .left_col { 宽度:34%；向左飘浮;} .right_col { 显示:内联块；宽度:66%；} .gallery_small_images { 显示:内联块；宽度:99%；左边距:6px；边距顶部:6px；高度:232px；溢出:隐藏；} .gallery_small_images img{ width:100%;} .gallery_small_image2 { 宽度:50%；向左飘浮;} .gallery_small_image3 { 宽度:49%；显示:内联块；向左飘浮;左边距:6px；} table.expense_info tr td.exp_info_disc { 字体大小:14px;颜色:#fff;文本转换:大写；文本对齐:左；} tr.total_exp td { padding-top: 13px;填充底部:30px；} .cashflow h2 { margin-bottom: 7px;} .roi input[type='text'] { font-size: 23px;文本对齐:居中；字体粗细:粗体；高度:33px；底边距:5px；} .roi h2 { margin-top: 24px;字体大小:22px；字体粗细:800；} tr.total_exp { 字体粗细:粗体；边距顶部:4px；/* 显示:表格；*/宽度:100%；} table.expense_info th { 字体大小:12px;字体粗细:粗体；颜色:#fff;文本转换:大写；} td { 字体大小:13px;颜色:#fff;文本对齐:居中；垂直对齐:中间；} .expense_info.common_box_style.margintop { 填充:20px 13px;} table.cashflow { 文本对齐:居中；边距:0 自动；颜色:#fff;文本转换:大写；} table.cashflow tr th { font-size: 19px;字体粗细:正常；} table.cashflow tr td { font-size: 17px;字体粗细:粗体；} .roi { 显示:内联块；背景:#2bb673；宽度:99%；文本对齐:居中；颜色:#000；填充:10px 0px 20px 0;左边距:6px；边距顶部:6px；} .discliamer_sec { 背景:#dfe9e9;显示:内联块；文本对齐:居中；字体大小:9px；宽度:100%；填充:10px 0;行高:18px；边距顶部:6px；} .discliamer_sec h2 { 颜色:#768293;} .footer_cright { 背景:#496bb3;文本对齐:居中；字体大小:8px；颜色:#fff;填充:1px 0;字体粗细:400；边距顶部:7px；显示:内联块；宽度:100%；} @media print { .common_box_style, .roi, .discliamer_sec, .footer_cright, .top_header { 背景:!important;-webkit-print-color-adjust:精确；} } </style><link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet'><身体><div class='main_wrapper'>
<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> <th></th> <th>%of Rent; <th>每月</th> <th>Yearly</th> </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><td class='exp_info_disc'>总费用:</td><td></td><td>343</td><td>342</td></tr><tr></tr><tr></tr><tr></tr>
<div class='cashflow common_box_style margintop'><h2>现金流量估算</h2><table id='cashflow' class='cashflow' cellpadding='3' cellspacing='5'><tr><th>每月</th><th>每年</th></tr><tr><td>123</td><td>4533</td></tr>

<div id='property_information' class='property_information common_box_style margintop'><h2>房产信息</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'>Single Family</span></li><li><span>当前租金:</span><span class='value_field'>29</span></li>
    <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><li><span>当前状态:</span><span class='value_field'>租用和表演 </span></li>
<p class='cash_prize'>现金价格<span>300</span></p>

<div class='gallery_small_images'><div class='gallery_small_image2'><img src='https://drive.google.com/uc?export=view&id="+file2+"'/>

<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 class='discliamer_sec'><h2>信息被认为是可靠的但没有保证.图片不按比例缩放.买方负责<br>对所提供的所有信息进行尽职调查，并应自行研究.</h2>

<div class='footer_cright'><h2>Copyright © High Return Real Estate LLC - 2017</h2>

</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");}

解决方案

您可以使用 URLfetchApp 下载图像文件并将其转换为 base64 数据 字符串并用它创建一个页面.其余步骤同上

function htmlToPDF() {var 文件 = []文件[0]="0BweO_SXcQGqgcEV3Mk9QYVRMczQ"文件[1]="0BweO_SXcQGqgVU93ZU56WkRkN3c"文件[2]="0BweO_SXcQGqgMkIxTlhKajk5MFk"var url = "https://drive.google.com/uc?export=view&id="var img = UrlFetchApp.fetch(url+file[0])文件[0] = img.getBlob().getContentType()+';base64,'+ Utilities.base64Encode(img.getBlob().getBytes())var img = UrlFetchApp.fetch(url+file[1])文件[1] = img.getBlob().getContentType()+';base64,'+ Utilities.base64Encode(img.getBlob().getBytes())var img = UrlFetchApp.fetch(url+file[2])文件[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> <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 26px50px; 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:左; 右边框:1px 实心 #ccd4d3; } .left_top p span { 字体大小:13px;颜色:#000；显示:内联块；宽度:100%；边距顶部:2px；} .left_top p { 字体大小:20px;字体粗细:粗体；颜色:#ea9a5a；边距:0；} .right_top img { border-top: 7px solid #496bb3;边框底部:7px 实心 #496bb3；填充:16px 5px 13px 4px；} .right_top { 显示:内联块；位置:绝对；背景:#fff;} .galleryimage_main img { 宽度:100%;显示:内联块；} .property_address { } .property_address p { 字体大小:15px;文本转换:大写；颜色:#fff;底边距:0；边距顶部:4px；} .common_box_style { 填充:20px;背景:#496bb3；文本转换:大写；} .common_box_style h2 { margin-top: 2px;颜色:#54bb73；字体大小:20px；} .property_information { margin-left: 6px;} .property_information ul lip { 字体大小:15px;颜色:#fff;文本转换:大写；底边距:3px；边距顶部:0；} .property_information ul li { 列表样式:无；底边距:5px；} .property_information ul li span { font-size: 15px;颜色:#fff;文本转换:大写；底边距:3px；边距顶部:0；宽度:100px；显示:内联块；文本对齐:左；} .property_information ul { padding-left: 0;宽度:自动；显示:内联块；向左飘浮;右边距:15px；边距顶部:0；底边距:4px；} .property_information ul li span.value_field { 字体大小:13px;} ul.grpleft li span { 宽度:136px;} p.cash_prize { 文本对齐:居中；字体大小:18px；字体粗细:粗体；颜色:#fff;显示:内联块；宽度:100%；边距:0；} p.cash_prize span { padding-left: 10px;} .margintop{ margin-top: 6px;} .left_col { 宽度:34%；向左飘浮;} .right_col { 显示:内联块；宽度:66%；} .gallery_small_images { 显示:内联块；宽度:99%；左边距:6px；边距顶部:6px；高度:232px；溢出:隐藏；} .gallery_small_images img{ width:100%;} .gallery_small_image2 { 宽度:50%；向左飘浮;} .gallery_small_image3 { 宽度:49%；显示:内联块；向左飘浮;左边距:6px；} table.expense_info tr td.exp_info_disc { 字体大小:14px;颜色:#fff;文本转换:大写；文本对齐:左；} tr.total_exp td { padding-top: 13px;填充底部:30px；} .cashflow h2 { margin-bottom: 7px;} .roi input[type='text'] { font-size: 23px;文本对齐:居中；字体粗细:粗体；高度:33px；底边距:5px；} .roi h2 { margin-top: 24px;字体大小:22px；字体粗细:800；} tr.total_exp { 字体粗细:粗体；边距顶部:4px；/* 显示:表格；*/宽度:100%；} table.expense_info th { 字体大小:12px;字体粗细:粗体；颜色:#fff;文本转换:大写；} td { 字体大小:13px;颜色:#fff;文本对齐:居中；垂直对齐:中间；} .expense_info.common_box_style.margintop { 填充:20px 13px;} table.cashflow { 文本对齐:居中；边距:0 自动；颜色:#fff;文本转换:大写；} table.cashflow tr th { font-size: 19px;字体粗细:正常；} table.cashflow tr td { font-size: 17px;字体粗细:粗体；} .roi { 显示:内联块；背景:#2bb673；宽度:99%；文本对齐:居中；颜色:#000；填充:10px 0px 20px 0;左边距:6px；边距顶部:6px；} .discliamer_sec { 背景:#dfe9e9;显示:内联块；文本对齐:居中；字体大小:9px；宽度:100%；填充:10px 0;行高:18px；边距顶部:6px；} .discliamer_sec h2 { 颜色:#768293;} .footer_cright { 背景:#496bb3;文本对齐:居中；字体大小:8px；颜色:#fff;填充:1px 0;字体粗细:400；边距顶部:7px；显示:内联块；宽度:100%；} @media print { .common_box_style, .roi, .discliamer_sec, .footer_cright, .top_header { 背景:!important;-webkit-print-color-adjust:精确；} } </style><link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet'><身体><div class='main_wrapper'>
<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='这里的图库图片' height='350' width='885'/> </div> <div class='left_col'> <div class='property_address common_box_style margintop'> <h2>房产地址</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> <th></th> <th>%of Rent</th>th>Yearly</th></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><td class='exp_info_disc'>总费用:</td><td></td><td>343</td><td>342</td></tr><tr></tr><tr></tr><tr></tr>
<div class='cashflow common_box_style margintop'><h2>现金流量估算</h2><table id='cashflow' class='cashflow' cellpadding='3' cellspacing='5'><tr><th>每月</th><th>每年</th></tr><tr><td>123</td><td>4533</td></tr>
<div id='property_information' class='property_information common_box_style margintop'><h2>房产信息</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'>Single Family</span></li><li><span>当前租金:</span><span class='value_field'>29</span></li>
    <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><li><span>当前状态:</span><span class='value_field'>租用和表演 </span></li>
<p class='cash_prize'>现金价格<span>300</span></p>
<div class='gallery_small_images'><div class='gallery_small_image2'><img src='data:"+file[1]+"'/>
<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 class='discliamer_sec'><h2>信息被认为是可靠的但没有保证.图片不按比例缩放.买方负责<br>对所提供的所有信息进行尽职调查，并应自行研究.</h2>
<div class='footer_cright'><h2>Copyright © High Return Real Estate LLC - 2017</h2>
</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 Script 中从 HTML 创建 PDF 并包含图像 - 图像未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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