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.
Related
When I make request I get this.
I want the html to load and the run the scripts to create the full body before I parse it.
I working with flutter(dart).
I tried using the webview but I'm not getting the html from after the page is loaded.
When I make the request to the site, this is what the response looks like.
I need some help guys.
How should I go about it?
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Just a moment...</title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #ffffff;
color: #000000;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.7em;
-webkit-font-smoothing: antialiased;
}
h1 {
text-align: center;
font-weight: 700;
margin: 16px 0;
font-size: 32px;
color: #000000;
line-height: 1.25;
}
p {
font-size: 20px;
font-weight: 400;
margin: 8px 0;
}
p,
.attribution,
{
text-align: center;
}
#spinner {
margin: 0 auto 30px auto;
display: block;
}
.attribution {
margin-top: 32px;
}
#keyframes fader {
0% {
opacity: 0.2;
}
50% {
opacity: 1.0;
}
100% {
opacity: 0.2;
}
}
#-webkit-keyframes fader {
0% {
opacity: 0.2;
}
50% {
opacity: 1.0;
}
100% {
opacity: 0.2;
}
}
#cf-bubbles>.bubbles {
animation: fader 1.6s infinite;
}
#cf-bubbles>.bubbles:nth-child(2) {
animation-delay: .2s;
}
#cf-bubbles>.bubbles:nth-child(3) {
animation-delay: .4s;
}
.bubbles {
background-color: #f58220;
width: 20px;
height: 20px;
margin: 2px;
border-radius: 100%;
display: inline-block;
}
a {
color: #2c7cb0;
text-decoration: none;
-moz-transition: color 0.15s ease;
-o-transition: color 0.15s ease;
-webkit-transition: color 0.15s ease;
transition: color 0.15s ease;
}
a:hover {
color: #f4a15d
}
.attribution {
font-size: 16px;
line-height: 1.5;
}
.ray_id {
display: block;
margin-top: 8px;
}
#cf-wrapper #challenge-form {
padding-top: 25px;
padding-bottom: 25px;
}
#cf-hcaptcha-container {
text-align: center;
}
#cf-hcaptcha-container iframe {
display: inline-block;
}
</style>
<meta http-equiv="refresh" content="35">
<script type="text/javascript">
//<![CDATA[
(function(){
window._cf_chl_opt={
cvId: "2",
cType: "non-interactive",
cNounce: "86849",
cRay: "6a97b753b854da86",
cHash: "31c7b92e6efc7fe",
cPMDTk: "",
cFPWv: "b",
cTTimeMs: "1000",
cRq: {
ru: "aHR0cHM6Ly9nZy5jby51ay9yYWNpbmcvMjctb2N0LTIwMjEvZmFrZW5oYW0tMTI1NQ==",
ra: "UG9zdG1hblJ1bnRpbWUvNy4yOC40",
rm: "R0VU",
d: "kPxE7HAIMaSY0+Q26IXxpuTBsg9MYQ7J/ICHGaynkKTojWIXlwrmVPwT+F9kXDNE8Jc60RxAMi3ET5lG3UfaNS8h7kz8aJbykZ4EwheY/kJcnVBvvndt9WGhXuDvU0FOh9cZ9SAgRuYgtmkn+hRxxi5owt/uhRmgg5MfZWETvbbMY/jCMrFpPhenjJFusWE1eM0Uz1E7p5hOK/W9P9wDRmC4A8f4z9PTWHMJY6EjsHR5GNEOZzHvWUd5uKRmIbQxylvGKD8smzOR1mUYrI+hlAUB8U6wptxbbpDZDcxkEYk7M/bp4oIkQrJNBkPvVGmnVcBvZN2QrSJdUIVFNA9kjKh4AfzpxPMkfqhoJIXOhMQK+lr1R7T3wHf/qRMpzvgN5HD8wSySaGq+ZMUraHmms1bvI3p25Ril83l3CvfGA573nzB0Pl9wBt1Ilj+et9TonO/yCPUT9ncqu/HsuK6zoTsYs1XO9emsj8iGHyH20tEDL/QIQu0Xm+Na2nREmz4LLYNg/y/S/IlGc8LjDv548dVWGJxGuPSzeDWod49nzqXZR6u4otbfcHIIMdEgPjTa",
t: "MTYzNjEzMjQ0Mi4yMDcwMDA=",
m: "UHh8TWbrY8rIVckQYr2DEHf3xtqOy3IWbHpurhKo0Dg=",
i1: "bPb8laPvucq92fuTb8UHJQ==",
i2: "uyNfsEipqDYhS6+qFdYUkA==",
zh: "C039uzYEN6IwJDV7FwZVYsBSveHeK850qjEkkfVJ6vw=",
uh: "q2fUGDQwB25BKEmSOHJOj1NUZxjS6q3TVwtPqObOVZM=",
hh: "nfF1CEMggKTkMnWiuwyIjIi54NW2HaYcu4gV2CdK4ks=",
}
}
window._cf_chl_enter = function(){window._cf_chl_opt.p=1};
})();
//]]>
</script>
</head>
<body>
<table width="100%" height="100%" cellpadding="20">
<tr>
<td align="center" valign="middle">
<div class="cf-browser-verification cf-im-under-attack">
<noscript>
<h1 data-translate="turn_on_js" style="color:#bd2426;">Please turn JavaScript on and reload the
page.</h1>
</noscript>
<div id="cf-content" style="display:none">
<div id="cf-bubbles">
<div class="bubbles"></div>
<div class="bubbles"></div>
<div class="bubbles"></div>
</div>
<h1><span data-translate="checking_browser">Checking your browser before accessing</span>
gg.co.uk.</h1>
<div id="no-cookie-warning" class="cookie-warning" data-translate="turn_on_cookies"
style="display:none">
<p data-translate="turn_on_cookies" style="color:#bd2426;">Please enable Cookies and reload
the page.</p>
</div>
<p data-translate="process_is_automatic">This process is automatic. Your browser will redirect
to your requested content shortly.</p>
<p data-translate="allow_5_secs" id="cf-spinner-allow-5-secs">Please allow up to 5
seconds…</p>
<p data-translate="redirecting" id="cf-spinner-redirecting" style="display:none">
Redirecting…</p>
</div>
<form class="challenge-form" id="challenge-form"
action="/racing/27-oct-2021/fakenham-1255?__cf_chl_jschl_tk__=I4acmyvWUrWbLXAGjYC5HXUh31EzMntIEES9DIs8Yg8-1636132442-0-gaNycGzNBmU"
method="POST" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="md" value="WYgGQTwD0.PlAYN7zN9M7XpYgnUJxpt6W_rYCboneoQ-1636132442-0-AfDISHvT2GBIpWp1EPYu9cdxCuFQpLT_u7UKTH9TL-mj0X8Xxw9raGV2KUlDtB4DX7Z3h-LYRsfmLlNmrV-WstInbyHg2H3gWXOuMU2mnguq0TdSnDmB0MWffohG7RydsDYePGxxBYBAXhJMAYyRLWlbcprMPKCaHVm9zAxWf5tZFgYfCLP-CLdoXXS_HuKNhA0iXqanK-LYFcSJXKuvTr0M7oAx-vhljyX8JW3sJ2sgJlV7vLLB9MPl3l7WgWBZ4q0bW8KKVhNi3WXReGdIZUpIirNA6D2xHAe5oyfDMqUfEyopDE2EFGeNxKb2yI0qPvmmaup4WjHIG0DangljT0VcnK8oR2-lz7tVreiQQS50DcnX_EiDswWlbfXDvz83RI3IDOmSjBJXQZBSClMjhkCPs9yf5wOGXtq2jjd2sIFFWgw3zS5Q0n9dsTfFCNSFRGtOtHmCM2ztI8ivbpfvf27CNK55Xb7b2BPCOICarJUqM16ELz7AAQ6lS0OJymzCU0G1eC58DDvCiMCx6AC7nAI2ce38OjfjYHO5Wq_lI8u8VFrGaS4nZyySvn6-0gGqRA" />
<input type="hidden" name="r" value="i7Mahy4asxjhgyvRAVdQk8RCAO5shxagJMSNb2vkdXM-1636132442-0-Acl9elCj95M0xGc183cGdekXyIhJ+RXABhl9YAfeIxJZd5a0u4EX8e1wb7wJdeYsBwO/e42SiuMP3O5t3PoeEibaVnEIPnLgipqmvVXoSiOuK302AlzY5JmI0Xy80sRBsoyWLglYAEPZft7cFoS+XK3ayn3GMqgoQpnf8nhjeVmOx6g1v25gqwGYoz6MdvE/7Z2GAwvCnqP2Bk7fjp7gBBQ1pWSgzCEP2jXsbYuqcBE7HHlNbMyJF1tqOIAd1Hm7S8KtAQUllGHNfJy7s/L6Ibvg55SCP8XHUlAqASeMvqbJors5HimAx+iZgpjfYhetytGpQTqh8m7BlVyZBUkvVl6HA3r0eR0OSVOOUf/8BmuYTMrZKqkElg+BY4sNTy0UqLeuyLH5RS3zMLdNDx75IkGexDVPx2KXBxPwdmPhVO2jmoJdSl+ocBTzfPqjsXw+XAyo9Sm5id7TZ/Z+xxXYA2RMCpBiGBXPdfu2U+CJI4/S/6TWfmunwpMwRIfEby1fQNmvNCJWJPIybXpZR0tOH/eln7CoeR8qaSrCUjP7H5fNSgiIi/gtH2oxm3D20y5T4Hd1EGEtKf0E1pLUGSeZY8LBsIMtvPlnXr5srsz4965+WZu87RK9w8filse+9rtIT6KM55QcgIE7Cvb4yfI74x7y+uJ0bjUoc8D3ke5GjK4isNsMlh0kxgY9gVJmzxReZ9n9ahT77FOcOJh8eQEQOCPZQ8J9DqUduOkH7775AvPseKj1CPb3+++EJvoaZGdNIfYvUV6PjMAsnthNOaCKDQ8oHiYZLW8A8YxF2AUrQxMBGjeIjvv8OCAkFwk4RhX/JSqNXgWE+mj6x+ySSNFtBJp7cOEdB27Teyx11ImRvTXBZdv09XFIgYRO7WYmI/1sB/qfn65uL1Pr0chh5mCX8FgX1r/CRw/IkvJhLpDPNxq0MiXJK/gUuZK7URNCQI3ep+Dv+7lyuvi9sQgkXl2ne8fSp8Nbh3MogLWFAYx0o7Jz1iZY4Vtryw87I+e6Ditw9eklqURwEiSE7yIJ5foZGLZwClJs9W1pfpZ2G2OIU8HBvN/O4ERCqT2nLRVJH513AUzPv9DpowCMUxANLCAIvJL9XmSbVeUBvUQmdpOK+grZlgFRx6d8/kKepJStd8iuN/P9SGFPmOGKQHmECFiu70JPk4QCS3J08BjhuIpC4uvfLNmAzQi1yYEOpwSfv1XPf4DLS/GO59qg/jbgu0UZyRBQDL/KE4wOiE8Dtw7ACjkUtaON1NDgOS5nKkUu0diqIIRvreQdLCy4ehjuvG7LuWPPdrEmU4ZYS3R+IPHNBEBbak2pszPGm8Xc0GtVWldmtAeRr+sN0K8JeRPIbORtPuhwMPpGGosCiPmqxHshlyS0qPB0kYsykHvjDXzI63E3EccRyo353ByRSLe0wcz0k32Ku4I7uDGN/YmQEcggLEVsShXXUFA+FOgQzuM6PE9o+NPgke/M1mJBIuyyOrBtQFNskIgXQA0jPVVpJz84OeR3ylkTsVDGOvnhj5nYPEk27gDxHVoYc2C6Omi/FwRaZcGQrBrTxCTejlnmEnGTUd+M"/>
<input type="hidden" value="3734809bfba8e7119ff4a9e747f0a631" id="jschl-vc" name="jschl_vc"/>
<!-- <input type="hidden" value="" id="jschl-vc" name="jschl_vc"/> -->
<input type="hidden" name="pass" value="1636132443.207-qh8v/uVVqU"/>
<input type="hidden" id="jschl-answer" name="jschl_answer"/>
</form>
<script type="text/javascript">
//<![CDATA[
(function(){
var a = document.getElementById('cf-content');
a.style.display = 'block';
var isIE = /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent);
var trkjs = isIE ? new Image() : document.createElement('img');
trkjs.setAttribute("src", "/cdn-cgi/images/trace/jschal/js/transparent.gif?ray=6a97b753b854da86");
trkjs.id = "trk_jschal_js";
trkjs.setAttribute("alt", "");
document.body.appendChild(trkjs);
var cpo=document.createElement('script');
cpo.type='text/javascript';
cpo.src="/cdn-cgi/challenge-platform/h/b/orchestrate/jsch/v1?ray=6a97b753b854da86";
document.getElementsByTagName('head')[0].appendChild(cpo);
}());
//]]>
</script>
<div id="trk_jschal_nojs"
style="background-image:url('/cdn-cgi/images/trace/jschal/nojs/transparent.gif?ray=6a97b753b854da86')">
</div>
</div>
<div class="attribution">
DDoS protection by <a rel="noopener noreferrer" href="https://www.cloudflare.com/5xx-error-landing/"
target="_blank">Cloudflare</a>
<br />
<span class="ray_id">Ray ID: <code>6a97b753b854da86</code></span>
</div>
</td>
</tr>
</table>
</body>
</html>
try to move <script> at the top of your app
I used the flutter WebView and it worked.
I wrote the full js script in a file.
The script does the parsing and returns the required data as json.
So I pass the script file content to my WebView controller's evaluateJavaScript and the result will be json. So I can just take that data and work with it.
// webview's controller
WebViewController? _controller;
// setup your webview and get the controller
WebView(
initialUrl: widget.url ?? 'https://www.google.com.tr',
onWebViewCreated: (controller) => _controller = controller,
javascriptMode: JavascriptMode.unrestricted,
gestureNavigationEnabled: true,
onPageFinished: (_) => readJS(),
);
//
void readJS() async {
String js = await fileReader.readFile("lib/js/main.js"); // read script file
String data = await _controller!.evaluateJavascript(js);
print("data\n$data");
}
check out the full code here
I would like to add 3 div elements in a top section of a card where currently there is an image. I would like to add an image, logo and text message in place of that image. What can I do???
Thanks in Advance,
Here's my code
1)HTML
<div class="card">
<b-card no-body
style="width: 20rem;"
img-src="https://placekitten.com/380/200"
>
<b-list-group class="group">
<b-list-group-item>Anvay Joshi</b-list-group-item>
<b-list-group-item>Computer</b-list-group-item>
<b-list-group-item>A-1103</b-list-group-item>
<b-list-group-item>30-11-1997</b-list-group-item>
<b-list-group-item>anvay.joshi#viit.ac.in</b-list-group-item>
<b-list-group-item>9766583977</b-list-group-item>
</b-list-group>
<b-button href="#" variant="primary">QR Code</b-button>
</b-card>
2)CSS
.group {
text-align: center;
}
.header{
text-align: center;
}
.card {
margin: 25px 120px 25px 240px;
border: none;
}
My Actual output looks like as shown
/Users/anvayjoshi/Desktop
My expected output is the top part of the card as shown
/Users/anvayjoshi/Desktop
Please help me !!!!!
Instead of using the img-src attribute on b-card, you can just add a new b-list-group-item.
Here's a jsfiddle demonstrating that, and an image of the result.
new Vue({
el: "#app",
data: {
}
});
.image {
float: left;
}
.logo {
float: left;
margin-right: 10px;
margin-left: 10px;
margin-top: 20px;
}
.text {
float: left;
width: 100px;
}
.group {
text-align: center;
}
.header {
text-align: center;
}
.card {
margin: 10px;
border: none;
}
<div id="app">
<div class="card">
<b-card no-body style="width: 20rem;">
<b-list-group class="group">
<b-list-group-item>
<img class="image" src="https://placekitten.com/100/100" />
<img class="logo" src="https://placekitten.com/50/50" />
<div class="text">
Vishwakarma Institute of Information Technology
</div>
</b-list-group-item>
<b-list-group-item>Anvay Joshi</b-list-group-item>
<b-list-group-item>Computer</b-list-group-item>
<b-list-group-item>A-1103</b-list-group-item>
<b-list-group-item>30-11-1997</b-list-group-item>
<b-list-group-item>anvay.joshi#viit.ac.in</b-list-group-item>
<b-list-group-item>9766583977</b-list-group-item>
</b-list-group>
<b-button href="#" variant="primary">QR Code</b-button>
</b-card>
</div>
</div>
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.
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.