Question

我正在从HtmlOutput生成pdf。不显示CSS颜色（如背景颜色和文本颜色）（其他样式看起来像应用它）。以下是我的一些代码：

function createPDFReceipt(formRes){
  var template = HtmlService.createTemplateFromFile('nameOfFile'),
      date = new Date(),
      pdfFile;



  template.name = formRes.name;
  template.email = formRes.email;
  template.payment = formRes.method;
  template.deposit = formRes.deposit;

  pdfFile = DriveApp.createFile(Utilities.newBlob(template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).getContent(), MimeType.HTML, 'receipt.html').getAs(MimeType.PDF).setName('pdfReceipt.pdf'));

}

当我记录评估的HTML文件时，样式标记看起来100％正确。

以下是我的一些HTML和CSS来了解布局：

<html>
<head>
    <title>Receipt</title>

<!--    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"> -->

   <?!= include('stylesheet'); ?>

</head>
<body>

<div class='info'>
    <h1></h1>
    <h4></h4>
</div>

<div class='info'>
    <div id='receipt-info'>
        Receipt No.     <br>
        Date: <?= date ?>
    </div>

    <div id='billing-info'>
        Bill To:<br>
        Name: <?= name ?> <br>
        Email: <?= email ?><br>
    </div>

</div>
...

</body>
</html>

CSS：

<style>

body {
  width: 900px;
  margin: auto;
}

#logo {
    text-align: left;
    width: 50%;
    height: 50%;
    margin-left: -30px;
}

table {
    border-collapse: collapse;
}

table th {
    background: #404040;
    color: white;
    text-align: left;
    width: 100%;
}

table th,td {
  border: 1px solid #404040;
  padding: 10px 15px;
}

table.small th {
    width: 40%;
}

table.small tr:last-child {
    background: #ECECEC;
}

.info {
    width: 85%;
    margin-bottom: 30px;
}

#receipt-info {
  width: 40%;
  font-size: 16px;
  float: left;
}

#billing-info {
    width: 40%;
    font-size: 16px;
    float:right;

}

.table {
    clear: both;
    margin-bottom: 30px
}


#sub-table {
    float:right;
    margin-bottom: 175px;
}

footer {
    clear: both;
}

#center-span {
    /*text-align: center;*/
    position: relative;

}

#last-line {
    display: inline-block;
    /*text-align: center;*/
    /*width: 100%;*/
}

</style>

我尝试使用rgb，hex和命名颜色“黑色”，“灰色”等。没有任何效果，我似乎无法在我的PDF文件中获得任何着色。有什么建议吗？

Answer 1

几点建议：

在生成PDF时，最好将CSS内联到HTML标记。
始终使用完整的CSS属性以在生成PDF中获得最佳效果。例如，要指定背景颜色：

您正在使用的是：

background: #ECECEC;

请改用：

background-color: #ECECEC;

希望它有所帮助！

CSS颜色未加载

1 个答案: