We Keep Coding

How to apply link to entire button rather than just the text

Is there a way to assign the link to the whole button, so that it is easier to interact with instead of having to click on the text itself?
<table style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; border-collapse: collapse !important;" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000">
<tbody>
<tr>
<td align="center" width="250px" style="padding: 20px 10px; width: 250px;">
<a rel="noopener noreferrer" href="https://www.thermador.com/us/dealer-locator?cid=April21SSElead1v2|emai|en|noc|adhoc|thd|own|12468|engage|finddealer_cta" target="_blank" title="FIND DEALER" style="font-family: Avenir, Arial, san-serif; color: #ffffff; text-decoration: none; line-height: 14px; white-space: nowrap; font-size: 15px; font-weight: normal; letter-spacing: 3px;"
data-sap-hpa-ceimo-link-id="202004221731488" data-sap-hpa-ceimo-link-outboundid=" " data-sap-hpa-ceimo-link-utm="X" data-sap-hpa-ceimo-link-trackable="X" data-sap-hpa-ceimo-link-type="Static">FIND DEALER</a>
</td>
</tr>
</tbody>
</table>

Simple. Just apply the sizing CSS to the <a> element instead and give it an inline-block display type since anchors are by default inline and will not render any padding.
a
{
padding: 20px 10px;
width: 250px;
text-align: center;
display: inline-block;
}
<table style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; border-collapse: collapse !important;" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000">
<tbody>
<tr>
<td align="center"><a rel="noopener noreferrer" href="https://www.thermador.com/us/dealer-locator?cid=April21SSElead1v2|emai|en|noc|adhoc|thd|own|12468|engage|finddealer_cta" target="_blank" title="FIND DEALER" style="font-family: Avenir, Arial, san-serif; color: #ffffff; text-decoration: none; line-height: 14px; white-space: nowrap; font-size: 15px; font-weight: normal; letter-spacing: 3px;"
data-sap-hpa-ceimo-link-id="202004221731488" data-sap-hpa-ceimo-link-outboundid=" " data-sap-hpa-ceimo-link-utm="X" data-sap-hpa-ceimo-link-trackable="X" data-sap-hpa-ceimo-link-type="Static">FIND DEALER</a></td>
</tr>
</tbody>
</table>

Set class in HTML table, but not for the entire column

Here is the situation, I have a HTML file with a table, the table gets filled with XML data. The last column (10) got a number in it: 1, 2, 3, 4 or 5. I've got 5 lines of jQuery which look for the number and give the cell with the corresponding number a specific class, this works fine (The cell has 0% opacity because it's not meant to be "shown", but for our means, it works fine like that).
Now the problem is: Column 7 and 8 need to get that class to without the whole column getting it, just the row with the specific number.
I've got a jsfiddle so you can see the code and stuff:
The jQuery:
$("td:nth-child(10):contains('1')").addClass('disaster');
$("td:nth-child(10):contains('2')").addClass('high');
$("td:nth-child(10):contains('3')").addClass('average');
$("td:nth-child(10):contains('4')").addClass('warning');
$("td:nth-child(10):contains('5')").addClass('information');
Note: The data in the table is just for testing, the real xml will have those number of 1, 2, 3, 4, 5 in like 100 rows in a random order.
EDIT: Got a picture of how it should look:
$("td:nth-child(10):contains('1')").addClass('disaster');
$("td:nth-child(10):contains('2')").addClass('high');
$("td:nth-child(10):contains('3')").addClass('average');
$("td:nth-child(10):contains('4')").addClass('warning');
$("td:nth-child(10):contains('5')").addClass('information');
td:nth-child(10) {
opacity: 0;
}
.disaster{
background-color: #E45858
}
.high{
background-color: #E87658
}
.average{
background-color: #FEA058
}
.warning{
background-color: #FEC858
}
.information{
background-color: #7498FE
}
/*CSS for main elements*/
div {
max-width: 2600px;
display: block;
}
body {
font-family: Arial, Tahoma, Verdana, sans-serif;
background-color: #FFFFFF;
}
table {
text-align: left;
border-collapse: collapse;
}
th {
font-size: 75%;
font-weight: normal;
color: #768C98;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 2px solid #DCE2E4;
}
td {
font-size: 75%;
color: #1F2C33;
height: 25px;
padding-top: 1px;
padding-bottom: 1px;
border-bottom: 1px solid #EAEEF0;
}
img {
position: absolute; left: -100px;
margin-top: 165px;
transform: rotate(270deg);
}
/*CSS for Hover*/
td:nth-child(1):hover{
text-decoration: underline;
}
td:nth-child(1) {
background-color: #FFFFFF;
}
td:nth-child(2) {
background-color: #FFFFFF;
}
tr.NoHover:hover{
background-color: #FFFFFF;
}
tr:hover {
background-color: #E8F5FF;
}
/*Column specific CSS*/
th.col1 {
text-align: right;
width: 240px;
padding-right: 18px
}
th.col2 {
width: 11px;
padding: none;
}
th.col3 {
text-align: left;
width: 188px;
padding-left: 10px;
}
th.col4 {
text-align: left;
width: 70px;
}
th.col5 {
text-align: left;
width: 77px;
padding-left: 82px;
}
th.col6 {
text-align: left;
width: 430px;
}
th.col7 {
text-align: left;
padding-left: 10px;
width: 497px;
}
th.col8 {
text-align: left;
width: 498px;
}
th.col9 {
text-align: left;
padding-left: 10px;
width: 75px;
}
td:nth-child(1) {
text-align: right;
color: #0274B8;
padding-right: 18px;
border-right: 2px solid #AAD6F0;
border-bottom: none;
}
td:nth-child(2) {
color: white;
border-bottom: none;
width: 11px;
padding: none;
}
td:nth-child(3) {
text-align: left;
text-decoration: underline dotted;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(4) {
text-align: left;
color: #DC0000;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(5) {
text-align: right;
text-decoration: underline dotted;
padding-right: 15px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(6) {
text-align: left;
text-decoration: underline dotted;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(7) {
text-align: left;
text-decoration: underline dotted ;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(8) {
text-align: left;
text-decoration: underline dotted;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(9) {
text-align: left;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<br><br>
<div id="main">
<table id="Table">
<thead>
<tr class="NoHover">
<th class="col1" scope='col' >Time▼</th>
<th class="col2" scope='col' ></th>
<th class="col3" scope='col' >Client</th>
<th class="col4" scope='col' >Status</th>
<th class="col5" scope='col' >Site</th>
<th class="col6" scope='col' >Host</th>
<th class="col7" scope='col' >Problem • Cause</th>
<th class="col8" scope='col' ></th>
<th class="col9" scope='col' >Frequency</th>
<th class="col10" scope='col'></th>
</tr>
</thead>
<tbody id="TableData">
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 1</td>
<td>FAILING</td>
<td>Site 1</td>
<td>PC1</td>
<td>test1</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>1</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 2</td>
<td>FAILING</td>
<td>Site 2</td>
<td>PC2</td>
<td>test2</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>2</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 3</td>
<td>FAILING</td>
<td>Site 3</td>
<td>PC3</td>
<td>test3</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>3</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 4</td>
<td>FAILING</td>
<td>Site 4</td>
<td>PC4</td>
<td>test4</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>4</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 5</td>
<td>FAILING</td>
<td>Site 5</td>
<td>PC5</td>
<td>test5</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
</body>

I think you are looking for the .siblings() selector:
$("td:nth-child(10):contains('1')").siblings('td:nth-child(7), td:nth-child(8)').addClass('disaster');
$("td:nth-child(10):contains('2')").siblings('td:nth-child(7), td:nth-child(8)').addClass('high');
$("td:nth-child(10):contains('3')").siblings('td:nth-child(7), td:nth-child(8)').addClass('average');
$("td:nth-child(10):contains('4')").siblings('td:nth-child(7), td:nth-child(8)').addClass('warning');
$("td:nth-child(10):contains('5')").siblings('td:nth-child(7), td:nth-child(8)').addClass('information');
Fiddle: https://jsfiddle.net/8sL86sc7/2/

Something like this maybe? (Fiddle)
$("tr").each(function(index) {
var row = $(this),
lastCol = row.find('td:nth-child(10)'),
appendTo = row.find('td:nth-child(7), td:nth-child(8), td:nth-child(10)');
switch(lastCol.text()) {
case '1':
appendTo.addClass('disaster');
break;
case '2':
appendTo.addClass('high');
break;
case '3':
appendTo.addClass('average');
break;
case '4':
appendTo.addClass('warning');
break;
case '5':
appendTo.addClass('information');
break;
}
});
If there are a lot of rows and you don't need extra stuff to happen exept for the added classes, this could be overkill. the .siblings() selector (as in this answer) could be enough.

How can I add a button that adds the answer to the inputs, next to the button?

I have this code written here but there is something I want to add to it that I would like help with, and not being a master coder I don't know what to do.
Here is my code so far
function calculate() {
var A = document.getElementById("a").value;
var B = document.getElementById("b").value;
var C = document.getElementById("c").value;
var D = document.getElementById("d").value;
var ans = ((A * B) - (C * D)) / (B - C);
alert(ans);
}
* {
font-family: arial;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 40px;
background-color: #05537b;
}
.thisTable td {
line-height: 36px;
font-size: 14px;
}
.container {
background-color: #EEE;
padding: 5px 15px 15px 15px;
border: 1px solid #CCC;
margin-bottom: 25px;
width: 100%;
text-align: left
}
.box {
background-color: #FFF;
border: 1px solid #CCC;
width: 40px;
margin: 0px 4px;
}
.button {
margin-left: 10px;
background-color: #333;
border: 1px solid #CCC;
width: 25px;
color: #FFF;
font-weight: bold;
}
.answer {
padding-left: 10px
}
.answer b {
text-decoration: underline
}
.how {
color: #555;
margin-left: 15px;
font-size: 13px;
background-color: #FFF;
padding: 2px 4px
}
.how b {
color: #D00;
font-weight: bold;
text-decoration: none
}
<div style="width:1000px; background-color:#FFF; padding:10px 20px; text-align:center; -moz-border-radius:10px">
<div style="font-size:30px; font-weight:bold; padding-bottom:20px; padding-top:8px">Average Damage Calculator</div>
<div class=container>
<h3>Calculate Target Average</h3>
<table class=thisTable>
<tr>
<td>Type in your target average damage <input type='number' id='a' /> </td>
</tr>
<tr>
<td>Type the amount of battles you want to achieve it by <input type='number' id='b' /></td>
<tr>
<td>Type in your current number of battles <input type='number' id='c' /></td>
<tr>
<td>Type in your current average damage <input type='number' id='d' /></td>
</tr>
<tr>
<td>
<button onClick='calculate()'>calculate</button>
</td>
</tr>
</table>
</div>
</div>
Currently I have it, so that when the user types in the information and clicks the "calculate" button, the answer pops up in like a small window. But I don't want that to happen. What I want to happen instead, is that, when you click the "calculate" button, the answer (a number) will appear right below, or next to the button instead of popping up on the screen. I would also like to refine the answer from being so specific, and only have it round the thousandth decimal.

As you tagged the question jQuery, I remade your example to utilise it. Also, there are a few suggested changes: field names/variable names would benefit from being clues to what they contain, and rather than hard-coding the event listeners, attach them programmatically. The comments in my code should show what's happening.
// Rather than an inline click event listener, as the OP has
// tagged the question jQuery, we can simply attach the event
// listener here.
$(".calc-btn").on("click", calculate);
/*****
* function to actually calculate the target value. This gathers
* all the given fields, performs the requisite math, and outputs
* a rounded value to the answer pane.
*****/
function calculate() {
// Note the meaningful names. While not a key part of your
// question, it will help down the line with debugging errors
// if your variables and fields have meaningful names.
var targetDamage = parseInt($("[name='target-damage']").val());
var targetBattles = parseInt($("[name='target-battles']").val());
var currentBattles = parseInt($("[name='current-battles']").val());
var currentDamage = parseInt($("[name='current-damage']").val());
// Given the above fields, we can see what we're actually doing
// rather than simply manipulating A, B, C and D.
var ans = ((targetDamage * targetBattles) - (currentBattles * currentDamage)) / (targetBattles - currentBattles);
var remainingBattles = targetBattles-currentBattles;
// Stick the answer in the answer pane!
$(".calculator-answer-pane").text("You need to average "+Math.round(ans)+" over the next "+remainingBattles+" battles to reach your target.");
}
* {
font-family: arial;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 40px;
background-color: #05537b;
}
.thisTable td {
line-height: 36px;
font-size: 14px;
}
.main-container {
width: 1000px;
background-color: #FFF;
padding: 10px 20px;
text-align: center;
-moz-border-radius: 10px;
}
.calculator-container {
font-size: 30px;
font-weight: bold;
padding-bottom: 20px;
padding-top: 8px;
}
.calculator-main-pane {
background-color: #EEE;
padding: 5px 15px 15px 15px;
border: 1px solid #CCC;
margin-bottom: 25px;
width: 100%;
text-align: left
}
.box {
background-color: #FFF;
border: 1px solid #CCC;
width: 40px;
margin: 0px 4px;
}
.button {
margin-left: 10px;
background-color: #333;
border: 1px solid #CCC;
width: 25px;
color: #FFF;
font-weight: bold;
}
.answer {
padding-left: 10px
}
.answer b {
text-decoration: underline
}
.how {
color: #555;
margin-left: 15px;
font-size: 13px;
background-color: #FFF;
padding: 2px 4px
}
.how b {
color: #D00;
font-weight: bold;
text-decoration: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
<center>
<div class="calculator-container">Average Damage Calculator</div>
<div class="calculator-main-pane">
<h3>Calculate Target Average</h3>
<table class=thisTable>
<tr>
<td>Type in your target average damage</td>
<td>
<input type='number' name='target-damage' />
</td>
</tr>
<tr>
<td>Type the amount of battles you want to achieve it by</td>
<td>
<input type='number' name='target-battles' />
</td>
</tr>
<tr>
<td>Type in your current number of battles</td>
<td>
<input type='number' name='current-battles' />
</td>
</tr>
<tr>
<td>Type in your current average damage</td>
<td>
<input type='number' name='current-damage' />
</td>
</tr>
<tr>
<td>
<button class="calc-btn">calculate</button>
</td>
<td class="calculator-answer-pane"></td>
</tr>
</table>
</div>
</center>
</div>

I've added a span next to the button. Instead of showing an alert after calculating a score, the answer is placed in the span.
function calculate(){
// The value property returns a string, use parseInt to convert it to an integer.
var targetAvgDamage = parseInt(document.getElementById("a").value, 10),
numberOfBattles = parseInt(document.getElementById("b").value, 10),
battlesFought = parseInt(document.getElementById("c").value, 10),
currentAvgDamage = parseInt(document.getElementById("d").value, 10);
var answer = ((targetAvgDamage * numberOfBattles) - (battlesFought * currentAvgDamage)) / (numberOfBattles - battlesFought);
// Get the element from the DOM to place the answer in.
var answerCell = document.getElementById('answer-cell');
// Set the text content of the element.
answerCell.textContent = 'The answer is: ' + Math.ceil(answer);
}
var
// Get the button element from the DOM.
calculateTrigger = document.getElementById('calculate-btn');
// Attach an event handler for the visitor clicks on the button.
calculateTrigger.addEventListener('click', calculate);
* { font-family:arial; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { margin:40px; background-color:#05537b; }
.thisTable td { line-height:36px; font-size:14px; }
.container { background-color:#EEE; padding:5px 15px 15px 15px; border:1px solid #CCC; margin-bottom:25px; width:100%; text-align:left }
.box { background-color:#FFF; border:1px solid #CCC; width:40px; margin:0px 4px; }
.button { margin-left:10px; background-color:#333; border:1px solid #CCC; width:25px; color:#FFF; font-weight:bold; }
.answer { padding-left:10px }
.answer b { text-decoration:underline }
.how { color:#555; margin-left:15px; font-size:13px; background-color:#FFF; padding:2px 4px }
.how b { color:#D00; font-weight:bold; text-decoration:none }
<div style="width:1000px; background-color:#FFF; padding:10px 20px; text-align:center; -moz-border-radius:10px">
<center>
<div style="font-size:30px; font-weight:bold; padding-bottom:20px; padding-top:8px">
Average Damage Calculator
</div>
<div class=container>
<h3>Calculate Target Average</h3>
<table class=thisTable>
<tr>
<td>Type in your target average damage</td>
<td><input type='number' id='a'/></td>
</tr>
<tr>
<td>Type the amount of battles you want to achieve it by</td>
<td><input type='number' id='b'/></td>
<tr>
<td>Type in your current number of battles</td>
<td><input type='number' id='c'/></td>
<tr>
<td>Type in your current average damage</td>
<td><input type='number' id='d'/></td>
</tr>
<tr>
<td>
<button id="calculate-btn">calculate</button>
</td>
</tr>
<tr>
<td>
<span id="answer-cell"></span>
</td>
</tr>
</table>
</div>
</div>
To round the answer you can use a number of methods, see below for some examples.
var a = 24.5123678;
console.log(`Round up to nearest int: ${Math.ceil(a)}`);
console.log(`Round down to nearest int: ${Math.floor(a)}`);
console.log(`Round to the nearest int: ${Math.round(a)}`);
console.log(`Round up to a number of decimals: ${a.toFixed(4)}`);

You can add a new td to your table, and then use the innerHTML to add the result of your calculation to the new td (with id="result") .
function calculate() {
var A = document.getElementById("a").value;
var B = document.getElementById("b").value;
var C = document.getElementById("c").value;
var D = document.getElementById("d").value;
var ans = ((A * B) - (C * D)) / (B - C);
//Here you assign your result to the new td
var Result = document.getElementById("result").innerHTML = "Result: " + ans;
}
* {
font-family: arial;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 40px;
background-color: #05537b;
}
.thisTable td {
line-height: 36px;
font-size: 14px;
}
.container {
background-color: #EEE;
padding: 5px 15px 15px 15px;
border: 1px solid #CCC;
margin-bottom: 25px;
width: 100%;
text-align: left
}
.box {
background-color: #FFF;
border: 1px solid #CCC;
width: 40px;
margin: 0px 4px;
}
.button {
margin-left: 10px;
background-color: #333;
border: 1px solid #CCC;
width: 25px;
color: #FFF;
font-weight: bold;
}
.answer {
padding-left: 10px
}
.answer b {
text-decoration: underline
}
.how {
color: #555;
margin-left: 15px;
font-size: 13px;
background-color: #FFF;
padding: 2px 4px
}
.how b {
color: #D00;
font-weight: bold;
text-decoration: none
}
<div style="width:1000px; background-color:#FFF; padding:10px 20px; text-align:center; -moz-border-radius:10px">
<div style="font-size:30px; font-weight:bold; padding-bottom:20px; padding-top:8px">Average Damage Calculator</div>
<div class=container>
<h3>Calculate Target Average</h3>
<table class=thisTable>
<tr>
<td>Type in your target average damage <input type='number' id='a' /> </td> <td id="result">here</td>
</tr>
<tr>
<td>Type the amount of battles you want to achieve it by <input type='number' id='b' /></td>
<tr>
<td>Type in your current number of battles <input type='number' id='c' /></td>
<tr>
<td>Type in your current average damage <input type='number' id='d' /></td>
</tr>
<tr>
<td>
<button onClick='calculate()'>calculate</button>
</td>
</tr>
</table>
</div>
</div>

Images not showing up on PDF created from HTML

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 :
Create HtmlOutput from HTML string.
Getting blob of that HTML.
Then that blob getAs PDF
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");
}

/**
* This function retrieve the html body.
* Using regex searches all the images src attribute and create array of image URLs
* Iterate over imageURL & retrieve image blob from URLFetchApp and convert it into base64
* Then replaces the imageURL with base64 with proper formatting
* Then convert the htmlText to PDF and save it in folder
* #param {string} messageID
* #param {string} folderID
* #param {string} fileURL
*/
function convertMailBodyToPDF(messageID, folderID) {
const mail = GmailApp.getMessageById(messageID);
let htmlText = mail.getBody();
const images = getAllImageTags(htmlText);
images.forEach(image => {
const res = UrlFetchApp.fetch(image);
const imgbase64 = "data:" + res.getBlob().getContentType() + ';base64,' + Utilities.base64Encode(res.getBlob().getBytes());
htmlText = replaceAll(htmlText, image, imgbase64);
});
const blob = htmlToPDF(htmlText);
const file = DriveApp.getFolderById(folderID).createFile(blob).setName("testimage.pdf");
console.log(file.getUrl());
return file.getUrl();
}
/**
* This converts html to pdf blob
* #param {string} text
* #param {Blob} blob
*/
function htmlToPDF(text) {
const html = HtmlService.createHtmlOutput(text);
const blob = html.getBlob();
return blob.getAs("application/pdf");
}
/**
* Retrieve all image src
* #param {string} str
* #return {Array} imageURL
*/
function getAllImageTags(str) {
let words = [];
str.replace(/<img[^>]+src="([^">]+)"/g, function ($0, $1) { words.push($1) });
return words;
}
const escapeRegExp = (string) => string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
const replaceAll = (str, find, replace) => str.replace(new RegExp(escapeRegExp(find), 'g'), replace);

You saved me with this:
> const images = getAllImageTags(htmlText); images.forEach(image => {
> const res = UrlFetchApp.fetch(image);
> const imgbase64 = "data:" + res.getBlob().getContentType() + ';base64,' + Utilities.base64Encode(res.getBlob().getBytes());
> htmlText = replaceAll(htmlText, image, imgbase64); });
I just edited it:
htmlText = htmlText.replace(image, imgbase64);
I needed to Compile a Google Doc Template that I have in DRIVE which is a letterhead with a Header and a Footer which are images and as body there are Placeholders, ex. {{name}} {{surname}}; finally upload to DRIVE as a PDF.
So the steps were:
from DOC to HTML
from HTML to BLOB
from BLOB to PDF
Everything worked correctly, but in the conversion to PDF I was missing the images... which had to be replaced by the same images but converted to Base64 ... and your procedure works great!
Thanks!!!!!!

"The resource cannot be found" when printing the page

I have developed a MVC 4 application.
There is a page which should be printed as it is.
If the print popup where we have to select the printer is closed, the web page gives a 404 error. But when the page is refreshed, the page gets loaded with no issues.
What could be the reason for this? Thanks in advance.
Here's a part of the page (The full page is very long)
#{
ViewBag.Title = "Details";
}
<div>
#{
string d = ViewBag.trans[0].REC_NO;
}
</div>
<form method="post" name="main" id="main">
<table x:str border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 689px" id="table5" bgcolor="#F3F3F3">
<colgroup>
<col width="64" span="7" style="width:48pt">
</colgroup>
#if (ViewBag.status.ToString().Trim() == "1" && !String.IsNullOrEmpty(ViewBag.lastDate) )
{
<tr>
<td align="center" height="17" style="height: 12.75pt; color: windowtext; font-size: 10.0pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Arial; text-align: general; vertical-align: bottom; white-space: nowrap; border: medium none; padding-left: 1px; padding-right: 1px; padding-top: 1px" width="676" colspan="7" align="left">
<p>
<font size="2" color="#FF0000" face="Trebuchet MS">Rejected
Receipt</font></td>
</tr>
}
#if (ViewBag.status.ToString().Trim() == "1" && String.IsNullOrEmpty(ViewBag.lastDate))
{
<tr>
<td height="17" style="height: 12.75pt; color: windowtext; font-size: 10.0pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Arial; text-align: general; vertical-align: bottom; white-space: nowrap; border: medium none; padding-left: 1px; padding-right: 1px; padding-top: 1px" width="676" colspan="7" align="left">
<p align="center">
<font size="2" color="#FF0000" face="Trebuchet MS">Deleted
Receipt</font></td>
</tr>
}
#if (ViewBag.status.ToString().Trim() == "0" && !String.IsNullOrEmpty(ViewBag.lastDate))
{
<tr>
<td height="17" style="height: 12.75pt; color: windowtext; font-size: 10.0pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Arial; text-align: general; vertical-align: bottom; white-space: nowrap; border: medium none; padding-left: 1px; padding-right: 1px; padding-top: 1px" width="676" colspan="7" align="left">
<p align="center">
<font size="2" color="#FF0000" face="Trebuchet MS">Initial
Receipt</font></td>
</tr>
}
#if (ViewBag.status.ToString().Trim() == "0" && String.IsNullOrEmpty(ViewBag.lastDate))
{
<tr>
<td height="17" style="height: 12.75pt; color: windowtext; font-size: 10.0pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Arial; text-align: general; vertical-align: bottom; white-space: nowrap; border: medium none; padding-left: 1px; padding-right: 1px; padding-top: 1px" width="676" colspan="7" align="left">
<p align="center">
<font size="2" color="#FF0000" face="Trebuchet MS">Cashed
Receipt (Completed)</font></td>
</tr>
}
<tr>
<td height="17" style="height: 12.75pt; color: windowtext; font-size: 10.0pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Arial; text-align: general; vertical-align: bottom; white-space: nowrap; border: medium none; padding-left: 1px; padding-right: 1px; padding-top: 1px" width="676" colspan="7" align="left">
<input type="submit" value="Print" name="B1" style="NonPrintable; color:#0000FF; font-size:8pt; font-family:Trebuchet MS" onClick="PrintElem('main')" class="NonPrintable">
</td>
</tr></table>
The javascript function I used to print the area.
<script type="text/javascript">
function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h1>' + document.title + '</h1>');
mywindow.document.write(document.getElementById(elem).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}</script>

Use like this
Print
Web browsers allow you to execute JavaScript statements directly by entering JavaScript code into the browser's URL text field. All you need to do is place a JavaScript: before your code to inform the browser you wish to run JavaScript.