Implemented this on our site about a month ago and it was working perfectly. Today, suddenly, I am getting this error on all pages that have the auto complete. I created a blank page with nothing but the example code copy pasted from Google's Docs, and I still get the error. Yet on Google's site, the example works.
The error is:
ReferenceError: V is not defined
...,function(a,b){V("places_impl",N(this,function(){this.Sa.getDetails(a,b)}))});G....
Here is the code, straight from Google:
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {HTMLInputElement} */(document.getElementById('autocomplete')),
{ types: ['geocode'] });
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
geolocation));
});
}
}
// [END region_geolocation]
</script>
<style>
#locationField, #controls {
position: relative;
width: 480px;
}
#autocomplete {
position: absolute;
top: 0px;
left: 0px;
width: 99%;
}
.label {
text-align: right;
font-weight: bold;
width: 100px;
color: #303030;
}
#address {
border: 1px solid #000090;
background-color: #f0f0ff;
width: 480px;
padding-right: 2px;
}
#address td {
font-size: 10pt;
}
.field {
width: 99%;
}
.slimField {
width: 80px;
}
.wideField {
width: 200px;
}
#locationField {
height: 20px;
margin-bottom: 2px;
}
</style>
</head>
<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
<table id="address">
<tr>
<td class="label">Street address</td>
<td class="slimField"><input class="field" id="street_number"
disabled="true"></input></td>
<td class="wideField" colspan="2"><input class="field" id="route"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">City</td>
<td class="wideField" colspan="3"><input class="field" id="locality"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField"><input class="field"
id="administrative_area_level_1" disabled="true"></input></td>
<td class="label">Zip code</td>
<td class="wideField"><input class="field" id="postal_code"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">Country</td>
<td class="wideField" colspan="3"><input class="field"
id="country" disabled="true"></input></td>
</tr>
</table>
</body>
</html>
On Google's example page, there is an error relating to a variable "Tk", but it the example still works. Whatever this V is, it is killing all my code. Any help?
Though you haven't mentioned which browser you are using and whether you use Firebug, here's what worked for me:
Initially, I thought Google updated their Maps JS which introduced this bug. However, after further digging around and testing in other browsers, I finally realised that this issue is caused by Firebug 2.0. Firebug got automatically updated to v2.0 on my computer, thus resulting in the error. Downgrading Firebug resolves the issue.
Related
I am trying to create a visual studio extension. This extension gives the user an input form and calls the api when user hits submit button.
But the api is not getting hit in the form action method
Below is extension.js file
// #ts-nocheck
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require('vscode');
const fs = require('fs');
const path = require('path');
const { parentPort } = require('worker_threads');
// This method is called when your extension is activated
// Your extension is activated the very first time the command is executed
/**
* #param {vscode.ExtensionContext} context
*/
function activate(context) {
console.log('Congratulations, your extension "Unit Test Generator" is now active!');
let disposable = vscode.commands.registerCommand('testytest.createBoilerplate', function () {
vscode.window.showInformationMessage('Unit Test Generator is now active!');
createInputFormWebView();
});
context.subscriptions.push(disposable);
}
function createInputFormWebView()
{
const panel = vscode.window.createWebviewPanel(
'This webview will be used for taking user input for the type of test cases', // Identifies the type of the webview. Used internally
'Unit Test Generator', // Title of the panel displayed to the user
vscode.ViewColumn.One, // Editor column to show the new webview panel in.
{
enableForms:true,
enableScripts: true
} // Webview options. More on these later.
);
const htmlFormContent = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Input</title>
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #1b78cc;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #527ba1;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<div class = "container">
<form enctype="multipart/form-data" action="http://localhost:35637" method="post" id="getUserInput">
<label for="testFramework">Test Framework</label><br>
<input type="radio" id="testFramework" name="test_framework" value="MSTest">
<label for="testFramework">MSTest</label><br>
<input type="radio" id="testFramework" name="test_framework" value="XUnit">
<label for="testFramework">XUnit</label><br>
<label for="projectName">Project Name:</label><br>
<input type="text" id="projectName" name="projectName"><br>
<label for="namespace">Namespace:</label><br>
<input type="text" id="namespace" name="namespace"><br>
<label for="testClassName">Test Class Name:</label><br>
<input type="text" id="testClassName" name="testClassName"><br>
<label for="testMethodName">Test Method Name:</label><br>
<input type="text" id="testMethodName" name="testMethodName"><br>
<input type="hidden" name="MAX_FILE_SIZE" value="100000" /><br>
Choose file to upload: <input name="uploadedfile" type="file" /><br>
<input type="submit" value="Generate Unit Tests" />
</form>
</div>
</body>
</html>`;
panel.webview.html = htmlFormContent;
}
// This method is called when your extension is deactivated
function deactivate() {}
module.exports = {
activate,
deactivate
}
This thing is working correctly in fiddler but not in extension.
I have WebView Options I have set enableScripts and enableForms to true. Is there anything else which needs to be set or there is problem with some other part of the code.
vscode.ViewColumn.One, // Editor column to show the new webview panel in.
{
enableForms:true,
enableScripts: true
} // Webview options. More on these later.
Any pointers would be helpful.
I am implementing Nodemailer to send emails from Node.Js. However, HTML page is not responding properly.
My index.js:
const nodemailer = require('nodemailer');
const fs = require('fs');
const handlebars = require('handlebars');
const transporter = nodemailer.createTransport({
host: "smtp.mailtrap.io",
port: 2525,
auth: {
user: "xxxx",
pass: "xxxx"
}
});
const readHTMLFile = (path, callback) => {
fs.readFile(path, {encoding: 'utf-8'}, (err, html) => {
if(err){
callback(err);
}
else{
callback(null,html);
}
});
}
readHTMLFile('index.html', (err, html) => {
const template = handlebars.compile(html);
const replacements = {
username: 'Bob'
};
const htmlToSend = template(replacements);
const message = {
from: 'testxxxx#example.com',
to: 'to#xxxx.com',
subject: 'No reply',
html: htmlToSend
}
transporter.sendMail(message, (error, info) => {
if(error){
console.log(`error: ${JSON.stringify(error)}`);
}
else{
console.log('Email sent: ' + info.response);
}
});
});
My index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Email Notification</title>
</head>
<body>
<div>
<h3>Hey! {{username}}!!</h3>
<form action="https://www.google.com">
<input type="submit" value="Go to Google" />
</form>
<h4>Go to Stackoverflow</h4>
</div>
Now, user gets email and user is able to click on Go to Stackoverflow link and gets redirected to stackoverflow website. However, when user clicks on button Go to Google, nothing happens. I want user to click on a button and get redirected to the website. Please help me to solve this issue.
The problem is that you are using a form. Some email clients do not accept forms. For a detailed explanation see https://www.sitepoint.com/forms-in-email/.
Instead, if you want a link, use an <a> like your other example.
If you want it looking like a button, for the best results (i.e. for best rendering across all different email clients), you'll need to use a table approach:
<table width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;">
<tr>
<td style="padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;border-collapse:collapse;">
<!-- START CENTERED BUTTON -->
<center>
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td align="center" bgcolor="#D90432" width="200" style="-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px; border: none; line-height:20px;color:#ffffff;">
Read more
</td>
</tr>
</tbody>
</table>
</center>
<!-- END CENTERED BUTTON -->
</td>
</tr>
</table>
I'm currently trying to develop a web form that uses HTML so that users can visit this webpage and drag and drop thousands of photos. After providing an email address, these photos would be directly sent to one of our Google Drive accounts inside a subfolder of the user's email address and the time of submission.
I've played around with this code, but nowhere did I find a place for me to connect my Google Drive account.
<body>
<div id="formcontainer">
<label for="myForm">Facilities Project Database Attachment Uploader:</label>
<br><br>
<form id="myForm">
<label for="myForm">Project Details:</label>
<div>
<input type="text" name="zone" placeholder="Zone:">
</div>
<div>
<input type="text" name="building" placeholder="Building(s):">
</div>
<div>
<input type="text" name="propertyAddress" placeholder="Property Address:">
</div>
<div>
<label for="fileText">Project Description:</label>
<TEXTAREA name="projectDescription"
placeholder="Describe your attachment(s) here:"
style ="width:400px; height:200px;"
></TEXTAREA>
</div>
<br>
<label for="attachType">Choose Attachment Type:</label>
<br>
<select name="attachType">
<option value="Pictures Only">Picture(s)</option>
<option value="Proposals Only">Proposal(s)</option>
<option value="Pictures & Proposals">All</option>
</select>
<br>
<label for="myFile">Upload Attachment(s):</label>
<br>
<input type="file" name="filename" id="myFile" multiple>
<input type="button" value="Submit" onclick="iteratorFileUpload()">
</form>
</div>
<div id="output"></div>
<div id="progressbar">
<div class="progress-label"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
var numUploads = {};
numUploads.done = 0;
numUploads.total = 0;
// Upload the files into a folder in drive
// This is set to send them all to one folder (specificed in the .gs file)
function iteratorFileUpload() {
var allFiles = document.getElementById('myFile').files;
if (allFiles.length == 0) {
alert('No file selected!');
} else {
//Show Progress Bar
numUploads.total = allFiles.length;
$('#progressbar').progressbar({
value : false
});//.append("<div class='caption'>37%</div>");
$(".progress-label").html('Preparing files for upload');
// Send each file at a time
for (var i = 0; i < allFiles.length; i++) {
console.log(i);
sendFileToDrive(allFiles[i]);
}
}
}
function sendFileToDrive(file) {
var reader = new FileReader();
reader.onload = function (e) {
var content = reader.result;
console.log('Sending ' + file.name);
var currFolder = 'Something';
google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, currFolder);
}
reader.readAsDataURL(file);
}
function updateProgressbar( idUpdate ){
console.log('Received: ' + idUpdate);
numUploads.done++;
var porc = Math.ceil((numUploads.done / numUploads.total)*100);
$("#progressbar").progressbar({value: porc });
$(".progress-label").text(numUploads.done +'/'+ numUploads.total);
if( numUploads.done == numUploads.total ){
//uploadsFinished();
numUploads.done = 0;
};
}
</script>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
body {
max-width: 400px;
padding: 20px;
margin: auto;
}
input {
display: inline-block;
width: 100%;
padding: 5px 0px 5px 5px;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
select {
margin: 5px 0px 15px 0px;
}
input[type="submit"] {
width: auto !important;
display: block !important;
}
input[type="file"] {
padding: 5px 0px 15px 0px !important;
}
#progressbar{
width: 100%;
text-align: center;
overflow: hidden;
position: relative;
vertical-align: middle;
}
.progress-label {
float: left;
margin-top: 5px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
width: 100%;
height: 100%;
position: absolute;
vertical-align: middle;
}
</style>
</body>
Source: Uploading Multiple Files to Google Drive with Google App Script
i am working in HTML to PDF conversion using ItextPdf 5.5.1 and XMLWorker 5.5.1 in Java.
i managed to convert PDF document having height as that of HTML contents but contents in PDF looking bigger and having unwanted spaces between lines. These spaces are not there in HTML document.
private static void createPdf() {
try {
// getting HTML file from the path
InputStream is = new FileInputStream(new File("/Users/salman.nazir/Desktop/html/tq.txt"));
Date now = new Date();
File file = new File(("/Users/salman.nazir/Desktop"), "my_" + now.getTime() + ".pdf");
ElementList el = parseToElementList(is, new XMLWorkerFontProvider("resources/fonts/"));
// width of 204pt
float width = 204;
// height as 10000pt (which is much more than we'll ever need)
float max = 10000;
//column without a `writer`
ColumnText ct = new ColumnText(null);
ct.setSimpleColumn(new Rectangle(width, max));
for (Element e : el) {
// Add only HTML Body Element
// Avoiding IllegalArgumentException ("Format not found.")
if(!e.isContent()) {
System.out.print("META DATA");
}
else {
ct.addElement(e);
}
}
ct.go(true);
// Getting y posItion from simulation mode
float y = ct.getYLine();
Rectangle pagesize = new Rectangle(width, (max - y) + 25);
// Document with predefined page size
Document document = new Document(pagesize, 0, 0, 0, 0);
// Getting PDF Writer
PdfWriter writer = PdfWriter.getInstance(document, new FileOutputStream(file));
document.open();
// Column with a writer
ct = new ColumnText(writer.getDirectContent());
ct.setSimpleColumn(pagesize);
for (Element e : el) {
// Add only HTML Body Element
// Avoiding IllegalArgumentException ("Format not found.")
if(!e.isContent()) {
System.out.print("META DATA");
}
else {
ct.addElement(e);
}
}
ct.go();
// closing the document
document.close();
showPDFPath(file.getAbsolutePath());
} catch (Exception e) {
e.printStackTrace();
}
}
is there any thing to set resolution anywhere in the code ? here is HTML code that is working fine in browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>Lieferschein/Rechnung 27.03.17 11:18 2017/2432</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
#font-face {
font-family: "Roboto Mono";
src: url('RobotoMono-Bold.ttf') format('ttf'), url('RobotoMono-BoldItalic.ttf') format('ttf'), url('RobotoMono-Italic.ttf') format('ttf'), url('RobotoMono-Light.ttf') format('ttf'), url('RobotoMono-LightItalic.ttf') format('ttf'), url('RobotoMono-Medium.ttf') format('ttf'), url('RobotoMono-MediumItalic.ttf') format('ttf'), url('RobotoMono-Regular.ttf') format('ttf'), url('RobotoMono-Thin.ttf') format('ttf'), url('RobotoMono-ThinItalic.ttf') format('ttf');
}
body {
font-family: "Roboto Mono";
font-size: 2pt;
width: 100%;
margin: 0pt;
}
.documentType {
text-transform: uppercase;
}
h1 {
text-align: center;
font-size: 16pt;
font-weight: normal;
}
h2 {
text-align: center;
font-size: 10pt;
font-weight: normal;
margin: 0pt;
}
tr.manual_imprint td {
border-bottom:1pt dotted black;
height: 30pt;
vertical-align: bottom;
}
h3 {
text-align: center;
font-size: 13pt;
font-weight: normal;
}
h3.left {
font-size: 13pt;
text-align: left;
}
hr {
height: 1pt;
color: black;
background-color: black;
border: 0pt;
}
table {
width: 100%;
border: 0pt;
padding: 0pt;
border-spacing: 0pt;
}
tr.lineitem_head td {
border-bottom:1pt solid black;
}
tr.total td {
border-top:1pt solid black;
border-bottom:3pt double black;
font-size: 6pt;
font-weight: bold;
}
td {
overflow: hidden;
}
td.left {
max-width: 1px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
td.left_indent {
text-align: left;
padding-left: 7pt;
}
td.right {
text-align: right;
vertical-align: top;
white-space: nowrap;
}
.image-container {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<h1>Tischlerei Helmut Meyer_676647</h1>
<h2>Winsener Landstrasse 22</h2>
<br></br>
<div class="image-container"><img src="http://www.iconsdb.com/icons/download/gray/android-6-512.jpg"/> </div> <h2>21423 Winsen / Luhe</h2>
<h2></h2>
<h2>Tel.: +4940441777</h2>
<h3 class="left documentType">Lieferschein/Rechnung</h3>
<table class="order">
<tr class="lineitem_head">
<td>Nr. 2017/2432</td>
<td class="right">27.03.17 11:18</td>
</tr>
</table>
<table class="lineitems">
<colgroup>
<col width="100%" />
<col width="0%" />
</colgroup>
<tbody>
<tr class="lineitem" data-net="3,78 €">
<td class="left">1x Filter Kalita</td>
<td class="right">4,50 €</td>
</tr>
<tr class="lineitem" data-net="3,03 €">
<td class="left">1x Latte</td>
<td class="right">3,60 €</td>
</tr>
<tr class="lineitem" data-net="7,38 €">
<td class="left">1x Skywalker/250g</td>
<td class="right">7,90 €</td>
</tr>
<tr class="lineitem" data-net="8,32 €">
<td class="left">1x Playground Love</td>
<td class="right">8,90 €</td>
</tr>
<tr class="lineitem" data-net="12,06 €">
<td class="left">1x Dschaggah Khan</td>
<td class="right">12,90 €</td>
</tr>
<tr class="lineitem" data-net="12,06 €">
<td class="left">1x King Kongo</td>
<td class="right">12,90 €</td>
</tr>
</tbody>
<tfoot>
<tr class="total">
<td class="left">Total</td>
<td class="right">50,70 €</td>
</tr>
<tr class="net">
<td class="left">Netto</td>
<td class="right">46,62 €</td>
</tr>
<tr class="tax">
<td class="left">7,00 VAT</td>
<td class="right">2,79 €</td>
</tr>
<tr class="tax">
<td class="left">19,00 VAT</td>
<td class="right">1,29 €</td>
</tr>
</tfoot>
</table>
<h3>Vielen Dank für Ihren Besuch!</h3>
<h2>St-Nr.: </h2>
</body>
</html>
Your issue is due to print resolution used in the parser which, by default is 72. You should design for that resolution instead of 100 or any other resolution (ie: If you'll be printing PDFs of letter size (8.5in x 11in), instead of designing for 850px by 1100px, you should do it on 612px x 792px.
I'm having trouble using PdfAWriter class to convert my HTML to PDF, the HTML gets converted normally until it finds a table or a list.
If I use PdfWriter class it works fine, but I need a PDF/A version.
Here is the code I'm using to make the conversion:
public static byte[] ConverterParaPdf(string html)
{
MemoryStream ms = new MemoryStream();
Document document = new iTextSharp.text.Document(PageSize.A4);
PdfAWriter writer = PdfAWriter.GetInstance(document, ms, PdfAConformanceLevel.PDF_A_1B);
//PdfWriter writer = PdfWriter.GetInstance(document, ms);
writer.PdfVersion = PdfWriter.VERSION_1_7;
writer.SetTagged();
writer.ViewerPreferences = PdfWriter.DisplayDocTitle;
writer.CloseStream = false;
writer.InitialLeading = 12.5f;
writer.CompressionLevel = PdfStream.BEST_COMPRESSION;
//writer.SetFullCompression(); //Causa erro no padrão PDF_A_1*
try
{
document.AddLanguage("pt-BR");
document.AddCreationDate();
writer.CreateXmpMetadata();
document.Open();
ICC_Profile icc = ICC_Profile.GetInstance((byte[])Properties.Mensagens.ResourceManager.GetObject("icc_profile"));
writer.SetOutputIntents("Custom", "", "http://www.color.org", "sRGB IEC61966-2.1", icc);
MemoryStream cssStream = new MemoryStream(Encoding.UTF8.GetBytes("html, html * { font-family: Arial, Arial, Arial!important; color: black!important; }"));
MemoryStream htmlStream = new MemoryStream(Encoding.UTF8.GetBytes(html));
XMLWorkerHelper.GetInstance().ParseXHtml(writer, document, htmlStream, cssStream);
document.Close();
writer.Close();
}
catch (Exception ex)
{
throw ex;
}
byte[] byteArray = ms.ToArray();
ms.Close();
return byteArray;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.container {
font-family: Arial;
font-size: 15px;
background-color: white;
margin: 20px;
}
.imagem {
padding-bottom: 15px;
}
.titulo {
font-size: 23px;
font-weight: bold;
}
.barra-tipo-documento {
background-color: #3B454E;
width: 4px;
height: 40px;
float: left;
}
.tipo-documento {
padding-left: 16px;
padding-top: 13px;
float: left;
font-size: 17px;
color: #3B454E;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<td class="imagem">
<img src="http://localhost:8090/Resources/img/logomarca-documentos.wmf" height="45" alt="TCE-ES"/>
</td>
</tr>
<tr>
<td>
<div class="barra-tipo-documento"> </div>
<div class="tipo-documento">Comunicação Interna</div>
</td>
</tr>
</table>
<br />
<br />
<div><strong>N.º: </strong>00747/2014-7</div>
<div><strong>Data: </strong>22/10/2014 18:05:10</div>
<div><strong>Assunto: </strong>teste</div>
<div><strong>De: </strong>NCD</div>
<div><strong>Para: </strong>NCD</div>
<div></div>
<div><strong>Anexos: </strong>12252/2014-9, 12253/2014-3</div>
<br />
<div><p> gerqg r</p>
<p>g </p>
<ol>
<li>eqrg geqr</li>
<li>g er</li>
<li>g</li>
<li>qe r</li>
<li>geqr</li>
</ol>
<p>g eqrgqergqerg</p>
<p> geqr geqrg</p>
</div>
</div>
</body>
</html>
Image:
http://postimg.org/image/9utepiza1/
I'm using itextsharp/itextsharp.pdfa/itextsharp.xmlworker/itextsharp.xtra version 5.5.3.0.
If there is another way of doing it, please tell me, I even tried using HtmlWorker which is obsolete.