Hello I want to add tab and a new line in my pdf file Is there any way to add tab and newline in this code when displaying in pdf file? Please help. Thank You. Really Appreciate it. Below is my code.
JAVASCRIPT
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>PDF</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
</head>
<body>
<!-- Content Area -->
<div id="print">
<p></p>
<p id="veewom"></p>
</div>
<div id="p-btn"></div>
<button id="download">Print</button>
<!-- Script -->
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'#p-btn': function (element, renderer) {
return true;
}
};
$('#download').click(function () {
var fieldId = "field100";
var chars = $('#try1').val();
var chars1 = $('#try2').val();
var chars2 = $('#try3').val();
$('#veewom').html(
'<b>' + "One" + ':</b>' + chars + '<br>' +
'<b>' + "Two" + ':</b>' + chars1 + '<br>' +
'<b>' + "Three" + ':</b>' + chars2
);
var d3 = $('[name=' + fieldId + ']:enabled').val();
diff1 = "";
if (d3) {
diff = d3;
}
var source = $('#print').html();
doc.fromHTML(source, 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('pdf-version.pdf');
});
</script>
</body>
</html>
Here is the image. I want to add new line and tab spaces in it.
]1
You can use HTML entities. Use & nbsp; for a space and em-space (& emsp;) for tab.
It would be much cleaner to use padding or margin if possible.
Example:
padding-left: 5px;
margin-left: 5px;
Related
I am looping through images and create dynamic divs. But the images are not displayed, though console.log() shows that parameters of ready() function in the loop are valid. It shows myDiv1 and address of the first image in the array and myDiv2 and address of the second image. What's wrong with the code?
Here's my code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="view_topic.css">
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="outerdiv"></div>
<script>
$(document).ready(function() {
$('#outerdiv').append(
$('<div>').prop({
id: 'myDiv1',
//innerHTML: 'Hi there!',
className: 'img-wrapper'
})
);
});
$(document).ready(function() {
$('#outerdiv').append(
$('<div>').prop({
id: 'myDiv2',
//innerHTML: 'Hi there!',
className: 'img-wrapper'
})
);
});
$(this).css('height',"100px");
var get_a_image = ["http://iancaple.ru/upload/images/20200804_225812.jpg", "http://iancaple.ru/upload/images/8871677_tsumpy_laba_3.docx"];
var counter = 1;
var ready_cnt = 0;
for (var i = 0; i < 2; i++) {
$(document).ready(function() {
$('#myDiv' + ready_cnt + 1).append($('<img id="theImg2">').attr({
'src': get_a_image[ready_cnt] , //'https://' + imgUrl ,
'alt': 'test image ' + ready_cnt + 1
})
).scrollTop(9999)
console.log("get_a_image[" + ready_cnt + "]=" + get_a_image[ready_cnt]);
console.log('#myDiv' + (ready_cnt + 1));
ready_cnt++;
});
}
</script>
</body>
<html>
Use parentheses to get the increased value of ready_cnt. If not, it will be regarded to select an ID of myDiv01
$('#myDiv' + (ready_cnt + 1)).append(...)
When I load this page to the browser the Javascript shows up but the HTML (H1 tag) doesn't. I haven't been able to figure out why I cant get HTML to show up on the page. Im new to both Javascript and HTML...clearly.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script src="data_generator.js"></script>
</head>
<body>
<h1>hello</h1>
<script>
$(document).ready(function(){
var $body = $('body');
$body.html('');
var index = streams.home.length - 1;
while(index >= 0){
var tweet = streams.home[index];
var $tweet = $('<div></div>');
$tweet.text('#' + tweet.user + ': ' + tweet.message);
$tweet.appendTo($body);
index -= 1;
}
});
</script>
You are removing the <h1> tag when you clear the inner HTML of the body tag by calling $('body').html(''). Why don't you work in a different container element that you can clear:
<body>
<h1>Hello, world!</h1>
<div id="root"></div>
<script>
$(document).ready(function(){
var $root = $('#root');
// $root.html(''); // Already empty. Don't need to clear it.
var index = streams.home.length - 1;
while(index >= 0){
var tweet = streams.home[index];
var $tweet = $('<div></div>');
$tweet.text('#' + tweet.user + ': ' + tweet.message);
$tweet.appendTo($root);
index -= 1;
}
});
</script>
</body>
As #charlietfl said, $body.html(''); clears all previous html content of the body tag. More simply it just replaces the contents with what is inside the quotes, or in this case nothing.
Here is documentation on the subject:
JQuery html() Documentation
EDIT:
Inspired by Sean's answer,
If you want to use the body container directly you can do so like this:
<body>
<h1>Hello, world!</h1>
<script>
$(document).ready(function(){
var $body = $('body');
// $body.html(''); // This clears it and since you don't want to, you shouldn't run this command.
var index = streams.home.length - 1;
while(index >= 0){
var tweet = streams.home[index];
var $tweet = $('<div></div>');
$tweet.text('#' + tweet.user + ': ' + tweet.message);
$tweet.appendTo($body);
index -= 1;
}
});
</script>
</body>
I have to alter the following code somehow to add line breaks to the labels on the buttons generated by AddRemoteButtonText. Tried everything I found on this site, but nothing worked yet (most probably because I`m just starting out coding javascript). Mostly tried adding another variable to the function and then implementing it by "\n" .
var size = 20;
var repeat_timer;
function AddRemoteButtonText(num, posx, posy, wx, wy, color, label, remote, command, initial_delay, repeat_delay)
{
document.write('<div id="' + num + '" class="button ' + color + '" style="position:absolute; top:' + posy + 'px; left:' + posx + 'px; height:' + wy + 'px; width:' + wx + 'px; line-height: ' + wy + 'px;" align="center">' + label + '</div>');
document.getElementById(num).onmouseup = function () { SendIRCommand (num,remote,command,initial_delay,repeat_delay); EndSendCommand (num) };
document.getElementById(num).onmouseleave = function () { EndSendCommand (num) };
}
}
};
Thanks for your answer!
Add '<br>' like in the below example
document.write(variable +'<br/>'+ variable2);
I would probably do it like this (simplified for example purposes):
var i = 0;
var aboveLineBreak;
var belowLineBreak;
function AddRemoteButtonText() {
console.log(i);
//define some text to print to the button
aboveLineBreak = "above br" + i;
belowLineBreak = "below br" + i;
//create a button object
var btn = document.createElement("DIV");
//add our text, including the line break, to the button
btn.appendChild(document.createTextNode(aboveLineBreak));
btn.appendChild(document.createElement("BR"));
btn.appendChild(document.createTextNode(belowLineBreak));
//define our button's CSS style
btn.setAttribute("class", "button red");
//to set the position, do:
//btn.style.position = "absolute";
//btn.style.top = whatever;
//and so on...
//add listeners if needed...
btn.onmouseup = function () { console.log("foo"); };
//finally add the button to the document's body and increment i
document.body.appendChild(btn);
i++;
}
.button {
width: 33%;
height: 45px;
}
.red {
background-color: darkred;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button onClick="AddRemoteButtonText();"> Add Remote Button Text </button>
</body>
</html>
Not the most beautiful buttons, but if you simply substitute my CSS with your own you should have a working line break. If not, we will need you to post your CSS so we can have a look at it.
i have csv file with the content :
heading1,heading2,heading3,heading4,heading5
value1_1,value2_1,value3_1,value4_1,value5_1
value1_2,value2_2,value3_2,value4_2,value5_2
I create Javascript/HTML code to pick up that file and display the content
<html>
<head>
<title>show csv</title>
</head>
<body>
<input type="file" id="fileinput" multiple />
<div id="result"></div>
<script type="text/javascript">
function readMultipleFiles(evt) {
//Retrieve all the files from the FileList object
var files = evt.target.files;
if (files) {
for (var i=0, f; f=files[i]; i++) {
var r = new FileReader();
r.onload = (function(f) {
return function(e) {
var contents = e.target.result;
var res = document.getElementById("result");
res.innerHTML = "Got the file<br>"
+"name: " + f.name + "<br>"
+"type: " + f.type + "<br>"
+"size: " + f.size + " bytes</br>"
+ "starts with: " + contents;
};
})(f);
r.readAsText(f);
}
} else {
alert("Failed to load files");
}
}
document.getElementById('fileinput').addEventListener('change',readMultipleFiles, false);
</script>
</body>
</html>
and the output is like :
output
question : How can i convert the content or the data to array and showing as html table ?
thanks for any help.
You can convert csv data into array and then into html table. I have added \n into your new line. Please add the \n to your code when there is a new line.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
border: 2px black solid;
font: 12px sans-serif;
}
td {
border: 1px black solid;
padding: 5px;
}
</style>
</head>
<body>
<div id='container'></div>
<script type="text/javascript"charset="utf-8">
var data = 'heading1,heading2,heading3,heading4,heading5\nvalue1_1,value2_1,value3_1,value4_1,value5_1\nvalue1_2,value2_2,value3_2,value4_2,value5_2';
var lines = data.split("\n"),
output = [],
i;
for (i = 0; i < lines.length; i++)
output.push("<tr><td>"
+ lines[i].slice(0,-1).split(",").join("</td><td>")
+ "</td></tr>");
output = "<table>" + output.join("") + "</table>";
var div = document.getElementById('container');
div.innerHTML = output;
</script>
</body>
</html>
I found Kapila Perera's answer to be very useful. However, the last element of each row was being cropped due to the slice(0,-1) use. Building on Perera's answer, in the example below I've used slice() instead.
I've also separated out the first row lines[0] as a header row and loop from 1 instead (which won't always be the case that csv contains headers but is explicitly called out in the example).
Finally, I've added the tbody tags when the output gets wrapped but this probably isn't required.
<script type="text/javascript"charset="utf-8">
var div = document.getElementById('container');
var data = 'heading1,heading2,heading3,heading4,heading5\nvalue1_1,value2_1,value3_1,value4_1,value5_1\nvalue1_2,value2_2,value3_2,value4_2,value5_2';
var lines = data.split("\n"), output = [], i;
/* HEADERS */
output.push("<tr><th>"
+ lines[0].slice().split(",").join("</th><th>")
+ "</th></tr>");
for (i = 1; i < lines.length; i++)
output.push("<tr><td>"
+ lines[i].slice().split(",").join("</td><td>")
+ "</td></tr>");
output = "<table><tbody>"
+ output.join("") + "</tbody></table>";
div.innerHTML = output;
</script>
I try to add a to an HTML-Document and link it to an image using the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Website</title>
<script type="text/javascript">
function addArea(map, xstart, ystart, xende, yende, idCol, col) {
area = document.createElement("area");
area.shape = "rect";
area.coords = "" + xstart + ", " + ystart + ", " + xende + ", " + yende + "";
area.href = "#" + idCol;
area.title = col;
area.alt = col;
/*
area.shape = "\"rect\"";
area.coords = "xstart + \", \" + ystart + \", \" + xende + \", \" + yende";
area.href = "\"#\" + idCol";
area.title = "col";
area.alt = "col";
*/ area.setAttribute(
"onclick",
"alert(\"Color: \" + col); return false;"
);
// append the area to the map
map.appendChild(area);
}
function showMap() {
idCol = "text";
// generate the map
mapCol = document.createElement("map");
mapCol.name = "map_" + idCol;
mapCol.id = "map_" + idCol;
addArea(mapCol, 1, 1, 25, 13, idCol, "00FF00");
addArea(mapCol, 25, 1, 49, 13, idCol, "00FF33");
imgCol = document.createElement("img");
imgCol.src = "https://www.google.de/images/srpr/logo3w.png";
imgCol.width = 275;
imgCol.height = 95;
imgCol.style.border = "1px solid #000";
imgCol.usemap = "#name_und_raute_sind_notwendig_bunt_" + idCol;
imgCol.alt = "Farbe auswählen";
imgColArea = document.createElement("p");
imgColArea.appendChild(imgCol);
testcol = "ffffff";
testlink = document.createElement("a");
testlink.appendChild(document.createTextNode("testlink"));
testlink.setAttribute(
"onclick",
"alert(\"Color: \" + testcol); return false;"
);
document.getElementById("area").appendChild(imgColArea);
document.getElementById("area").appendChild(testlink);
alert("map added with " + mapCol.areas.length + " entries.");
}
</script>
</head>
<body onLoad="showMap()">
<div>
before
<div id="area"></div>
after
</div>
</body>
The image should contain linked areas, that alert a text when clicking on them. Unformtunatly the areas do not show up. Does anyone find my mistake?
First of all, your map identifiers mismatch. Also the property name is useMap, not usemap. Use
imgCol.setAttribute('usemap',"#" + mapCol.name);
or
imgCol.useMap = "#" + mapCol.name;
instead. You also have to add your map to the document:
/* ... */
imgColArea.appendChild(imgCol);
imgColArea.appendChild(mapCol);
/* ... */
JSFiddle demonstration
I'm not sure about this, but I think you should append your MAP-element to the document before assigning children in it. To create new elements differs from creating properties to a non-appended element.