HTML模板无法将格式或图像打印为pdf

时间:2018-06-20 13:28:20

标签: google-apps-script google-drive-api

我正在应用脚本中使用html模板功能来创建电子邮件和pdf文档草稿。所有格式都显示在电子邮件中,但是在pdf中缺少很多。

我的目的是在格式的pdf和电子邮件中显示徽标。 我首先尝试包含图像,但失败了。我无法将图像作为现有模板的一部分显示在任何位置(尽管在Google开发人员信息之后,如果我仅将图像用作Blob来源,则可以将图像添加到电子邮件/ pdf中),这意味着我可以不包括任何其他内容。

我的下一个想法是直接在html文件中构建徽标。这失败了,因为我无法将背景色打印到pdf。

我已经检查了Google的“开发人员”部分以及此处的“问题与解答”,并进行了一些常规的网络搜索。 阅读这些内容后,我检查了以下内容: 所有格式都是内联的。 在创建输出之前,将调用并评估模板。 图片已共享。

我是一个初学者,所以我一直在尝试一切,以期找到解决方案。我留下了一些不同的方法,以便您可以看到我的尝试。

如果任何人都可以发现我的错误,我将非常感激。

服务器端代码

 function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename)
    .getContent();
}

function getImageUrl(){
 //this is code I copied to encode as base64 to use with html img but the base64 encode/decode wasn't working for me.
  //var album = GET https://photoslibrary.googleapis.com/v1/albums/{albumId};
  var photosUrl = "https://photos.google.com/photo/AF1QipMkQrHJPYe935uC-Rap5qVqNaLdUs6rp38yVaw";
  var htmlImage = '<img src="data:image/pgn; base64,'+ photosUrl + '" />' 

  var driveUrl = "https://drive.google.com/file/d/10OgwTmtVp5yDKHdC7P1K2KBEMuEbn6YW/view?usp=sharing";
  var imgId = DriveApp.getFileById('10OgwTmtVp5yDKHdC7P1K2KBEMuEbn6YW');
  var imgType = imgId.getMimeType();

  var imgPng = imgId.getAs('image/png'); //image as png
  var imgBlob1 = imgId.getBlob(); //image as blob
  var imgHtml = UrlFetchApp.fetch(photosUrl).getContent(); // image as html
  var tmpHtml = HtmlService.createTemplate(imgHtml);
  var contHtml = tmpHtml.getRawContent();

  Logger.log('imgType = ' + imgType + '\n imgBlob1  = ' + imgBlob1);

  //create draft and save as pdf
  var createDraft = function myGet() {
   var temp = HtmlService.createTemplateFromFile('text');
   return temp.evaluate();
  }

  var draft = createDraft();
  var content = draft.getContent();
  var blob = Utilities.newBlob(content, 'text/html').getAs('application/pdf').setName('text for image');

  DriveApp.createFile(blob);

 // create draft email 
  var recipient = Session.getActiveUser().getEmail();
  var subject = 'test';
  var body = 'this is a test';
  var options = {htmlBody: content};

GmailApp.createDraft(recipient, subject, body, options);
}

CSS代码

<style>body {
  color: blue;
}

</style>

HTML模板

 <br>
  include image from Drive with img tags and url<br>
  1 <img src="https://drive.google.com/uc?export=download&id=10OgwTmtVp5yDKHdC7P1K2KBEMuEbn6YW" />
  <br>
  <br>
  include contHtml (templated blob)<br>
  1 <?! contHtml ?><br>
  <br>
  include imgPng from script with jquery<br>
  1 <? imgPng ?><br>
  2 <?! imgPng ?><br>
  3 <?= imgPng ?><br>
  <br>
  include htmlImage from script with jquery
  1 <? htmlImage ?><br>
  2 <?! htmlImage ?><br>
  3 <?= htmlImage ?><br>
  <br>
test for style  
    <table style="background:#ddea95";>
      <tr>
        <th style="border: solid chartreuse; padding:5px; width: 150px; height: 150px;">Logo</th>
      </tr>
    </table>
<br>
<br>
    <table>
      <tr>
        <th style="background-color: #BCD631; font: bold; border: 1px solid grey; padding: 5px;" width="250px;">Heading 1</th>
        <th style="background-color: #BCD631; font: bold; border: 1px solid grey; padding: 5px;" width="250px;">Heading 2</th>
        <th style="background-color: #BCD631; font: bold; border: 1px solid grey; padding: 5px;" width="250px;">Heading 3</th>
      </tr>
      <tr>
        <td style="border: 1px solid grey;" width="250px;">Row data<br></td>
        <td style="border: 1px solid grey;" width="250px;">Row data<br></td>
        <td style="border: 1px solid grey;" width="250px;">Row data</td>
      </tr>
      <tr>
        <td style="border: 1px solid grey;" width="250px;">Row data<br></td>
        <td style="border: 1px solid grey;" width="250px;">Row data<br></td>
        <td style="border: 1px solid grey;" width="250px;">Row data</td>
      </tr>
    </table>
<br>
<br>
<div style="background: #ddea95";><b>Other text to check background format</b><br> </div>

  </body>
</html>
Execution transcript:

[18-06-21 13:30:23:778 CEST] Starting execution
[18-06-21 13:30:23:784 CEST] Session.getActiveUser() [0 seconds]
[18-06-21 13:30:23:784 CEST] User.getEmail() [0 seconds]
[18-06-21 13:30:23:926 CEST] GmailApp.getAliases() [0.14 seconds]
[18-06-21 13:30:23:928 CEST] Logger.log([[alias1, alias2, alias3], []]) [0 seconds]
[18-06-21 13:30:24:047 CEST] DriveApp.getFileById([10OgwTmtVp5yDKHdC7P1K2KBEMuEbn6YW]) [0.116 seconds]
[18-06-21 13:30:24:048 CEST] File.getMimeType() [0 seconds]
[18-06-21 13:30:24:049 CEST] File.getAs([image/png]) [0.001 seconds]
[18-06-21 13:30:24:050 CEST] File.getBlob() [0 seconds]
[18-06-21 13:30:24:148 CEST] UrlFetchApp.fetch([https://photos.google.com/photo/AF1QipMkQrHJPYe935uC-Rap5qVqNaLdUs6rp38yVaw]) [0.097 seconds]
[18-06-21 13:30:24:157 CEST] HTTPResponse.getContent() [0.008 seconds]
[18-06-21 13:30:24:272 CEST] HtmlService.createTemplate([10,60,33,68,79,67,84,89,80,69,32,104,116,109,108,62,10,60,104,116,109,108,32,108,97,110,103,61,34,101,110,34,62,10,32,32,60,104,101,97,100,62,10,32,32,60,109,101,116,97,32,99,104,97,114,115,101,116,61]...) [0.002 seconds]
[18-06-21 13:30:24:273 CEST] Function.apply([[]]) [0 seconds]
[18-06-21 13:30:24:273 CEST] Logger.log([imgType = image/png
 imgBlob1  = Blob, []]) [0 seconds]
[18-06-21 13:30:24:276 CEST] HtmlService.createTemplateFromFile([text]) [0.002 seconds]
[18-06-21 13:30:24:277 CEST] Function.apply([[]]) [0.001 seconds]
[18-06-21 13:30:24:278 CEST] HtmlService.createHtmlOutput() [0 seconds]
[18-06-21 13:30:24:280 CEST] HtmlOutput.append([<!DOCTYPE html>
]) [0 seconds]
[18-06-21 13:30:24:280 CEST] HtmlOutput.append([<html>

  <head>
    <base target="_top">
  include styles html from another file with forced printing jquery <br>
  1 ]) [0 seconds]
[18-06-21 13:30:24:281 CEST] HtmlService.createHtmlOutputFromFile([LogoStyles]) [0 seconds]
[18-06-21 13:30:24:281 CEST] HtmlOutput.getContent() [0 seconds]
[18-06-21 13:30:24:282 CEST] HtmlOutput.append([ <br> <br>
]) [0 seconds]
[18-06-21 13:30:24:283 CEST] HtmlOutput.append([  </head>

  <body style="Background: white;"> 
  include imgBlob1 from script with jquery <br>
  1 ]) [0 seconds]
[18-06-21 13:30:24:284 CEST] HtmlOutput.appendUntrusted([Blob]) [0 seconds]
[18-06-21 13:30:24:284 CEST] HtmlOutput.append([  <br>
]) [0 seconds]
[18-06-21 13:30:24:285 CEST] HtmlOutput.append([  <br>
  include imgBlob1 from script with img tags <br>
  1 <img src=imgBlob1 />
  <br>
  <br>
  include image from Drive with img tags and url<br>
  1 <img src="https://drive.google.com/uc?export=do]...) [0 seconds]
[18-06-21 13:30:24:286 CEST] HtmlOutput.append([<br>
]) [0 seconds]
[18-06-21 13:30:24:287 CEST] HtmlOutput.append([  <br>
  include imgPng from script with jquery<br>
  1 ]) [0 seconds]
[18-06-21 13:30:24:288 CEST] HtmlOutput.append([<br>
]) [0 seconds]
[18-06-21 13:30:24:288 CEST] HtmlOutput.append([  2 ]) [0 seconds]
[18-06-21 13:30:24:289 CEST] HtmlOutput.append([<br>
]) [0 seconds]
[18-06-21 13:30:24:290 CEST] HtmlOutput.append([  3 ]) [0 seconds]
[18-06-21 13:30:24:291 CEST] HtmlOutput.appendUntrusted([Blob]) [0 seconds]
[18-06-21 13:30:24:291 CEST] HtmlOutput.append([<br>
]) [0 seconds]
[18-06-21 13:30:24:292 CEST] HtmlOutput.append([  <br>
  include htmlImage from script with jquery
  1 ]) [0 seconds]
[18-06-21 13:30:24:293 CEST] HtmlOutput.append([<br>
]) [0 seconds]
[18-06-21 13:30:24:294 CEST] HtmlOutput.append([  2 ]) [0 seconds]
[18-06-21 13:30:24:295 CEST] HtmlOutput.append([<br>
]) [0 seconds]
[18-06-21 13:30:24:295 CEST] HtmlOutput.append([  3 ]) [0 seconds]
[18-06-21 13:30:24:296 CEST] HtmlOutput.appendUntrusted([<img src="data:image/pgn; base64,https://photos.google.com/photo/AF1QipMkQrHJPYe935uC-Rap5qVqNaLdUs6rp38yVaw" />]) [0 seconds]
[18-06-21 13:30:24:297 CEST] HtmlOutput.append([<br>
]) [0 seconds]
[18-06-21 13:30:24:298 CEST] HtmlOutput.append([  <br>
test for style  
    <table style="background:#ddea95";>
      <tr>
        <th style="border: solid chartreuse; padding:5px; width: 150px; height: 150px;">Logo</th>
      </tr>
    </table>
<b]...) [0 seconds]
[18-06-21 13:30:24:299 CEST] HtmlOutput.append([]) [0 seconds]
[18-06-21 13:30:24:299 CEST] HtmlOutput.getContent() [0 seconds]
[18-06-21 13:30:24:301 CEST] Utilities.newBlob([<!DOCTYPE html>
<html>

  <head>
    <base target="_top">
  include styles html from another file with forced printing jquery <br>
  1  <br> <br>
  </head>

  <body style="Background: white;"> 
  in, ]...) [0 seconds]
[18-06-21 13:30:24:302 CEST] Blob.getAs([application/pdf]) [0 seconds]
[18-06-21 13:30:24:302 CEST] Blob.setName([text for image]) [0 seconds]
[18-06-21 13:30:24:304 CEST] Blob.getName() [0 seconds]
[18-06-21 13:30:24:304 CEST] Blob.getContentType() [0 seconds]
[18-06-21 13:30:25:202 CEST] DriveApp.createFile([Blob]) [0.899 seconds]
[18-06-21 13:30:25:203 CEST] Session.getActiveUser() [0 seconds]
[18-06-21 13:30:25:203 CEST] User.getEmail() [0 seconds]
[18-06-21 13:30:25:405 CEST] GmailApp.createDraft([alias1, test, this is a test, {htmlBody=<!DOCTYPE html>
<html>

  <head>
    <base target="_top">
  include styles html from another file with forced printing jquery <br>
  }]...) [0.201 seconds]
[18-06-21 13:30:25:408 CEST] Execution succeeded [1.477 seconds total runtime]

1 个答案:

答案 0 :(得分:0)

部分答案

doGet是保留的函数名称。除了https://developers.google.com/apps-script/guides/web

上描述的用途以外,我认为将该名称用于其他目的不是一个好主意