Converting HTML String into pdf - javascript

I am converting an HTML string into a pdf document using following code.
It converts the HTML to pdf well enough, but when I add the an img tag to the HTML it does not render the image in the pdf.
Here is the code I am using.
var htmlString="<H1>Hello This is Text</H1> <img src='zid.png'>";
function generatePDF(htmlString) {
if(htmlString!=null) {
alert("Html String: "+htmlString);
Ti.App.fireEvent("generatePDFfromString",{
"htmlString":htmlString,
"fileName":'MyFileName.pdf'
});
}
};
function gotPDF(filePath){
alert("Html String: "+filePath);
Ti.App.fireEvent("sendEmail",{
"fileURL":filePath,"subject":'My File Subject',
"messageBody":"",
"toReceipients":[""]
});
}

Try this:
Before
var htmlString="<H1>Hello This is Text</H1> <img src='zid.png'>";
After
var htmlString="<H1>Hello This is Text</H1> <img src='zid.png'/>";

Related

iframe: How to display raw (plain text) html?

I want to display an HTML string as raw/plain text HTML in an iframe.
For example, display "<b>Hello World</b>" (instead of Hello World).
I've tried to display it like this:
<iframe srcdoc="<pre><b>Hello World</b></pre>"></iframe>
But it didn't work. It displays bold "Hello world" text.
I'm using Nuxt.js.
What am I missing?
With no iframe
<pre id="code"></pre>
<script>
document.getElementById('code').textContent = '<b>Hello World</b>';
</script>
With an iframe
<iframe id="codeFrame"></iframe>
<script>
function writeToIframe(iframe, markup) {
iframe.contentWindow.document.open();
iframe.contentWindow.document.write('<pre id="code"></pre>');
iframe.contentWindow.document.getElementById('code').textContent = markup;
iframe.contentWindow.document.close();
}
writeToIframe(document.getElementById('codeFrame'), '<b>Hello World</b>');
</script>

Remove all html tags except <img> or <img/> tags with javascript

I have a JS string and I would like to prevent html and js injection on my website message input.
How can I remove all HTML tags from a string except the img tag, because it is used to display emoticons like this:
<img class="emo" src="images/emo/smile.png">
I am using the following code to remove all html tags but it only works for the <br> tag and not img tag.
function remove_tags(html)
{
var html = html.replace("<img>","||img||");
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
html = tmp.textContent||tmp.innerText;
return html.replace("||img||","<img>");
}
Either remove those html tags or simply display them as simple texts like:
<script> alert("hi");</script>
but except the <img> tags.
You could do like this using jQuery:
function remove_tags(html)
{
var html = html.replace("<img>","||img||");
var text = jQuery(html).text();
return text.replace("||img||","<img>");
}
Reference : Strip HTML from Text JavaScript
You can use this simple code
var html = '<img class="emo" src="images/emo/smile.png">';
var text = html.replace(/<.*?>/g, "");
replace method remove all html tags in string.
You can test every html string in bottom demo.
$("button").click(function(){
var html = $("textarea").val();
var text = html.replace(/<.*?>/g, "");
$("textarea").val(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea><img src=x onerror=alert("Test") /><p>aa</p></textarea>
<br />
<button>Remove HTML tags</button>

Javascript: how to convert text copied into textarea from any encoding to UTF-8?

I have a simple html+js page with a <textarea>.
The user is supposed to paste some text inside it, and the page will use the pasted text as a GET parameter for a remote service url which expects UTF-8.
My current code is like this:
<body>
<textarea id="editor"></textarea>
</body>
<script>
var content = document.getElementById('editor').innerHTML;
content = stripTags(content);
content = decodeHTML(content);
content = encodeURIComponent(content);
var url = remoteServiceBaseUrl + content;
window.open(url, '_blank');
function stripTags(input) {
return input.replace(/<(.|\n)*?>/g, '');
}
function decodeHtml(html) {
var txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
<script>
But it has trouble with - for example - %0C (form-feed) character found in some Windows-1252 texts: when calling the url I am thrown the error URIError: malformed URI sequence.
So the question is: how do I convert text to UTF-8, indipendently from the source encoding, with javascript?

Why is FileReader.readAsText() returning null?

I am trying to read a file in the same directory of an HTML and JavaScript file however it seems to be returning null. Below I have added the code I have from each file.
HTML File:
<html>
<!-- Code to call the Google Maps API and link style.css sheet -->
<body>
<div class="content">
<div id="googleMap"></div>
<div id="right_pane_results">hi</div>
<div id="bottom_pane_options">
<button onclick="get_parameters()">Try It</button>
</div>
</div>
</body>
<script type="text/javascript" src="./javascript.js">
</script>
</html>
JavaScript File:
function get_parameters() {
alert("hi"); // Just to let me know the function is getting called
var freader = new FileReader();
var text;
freader.onload = function(e) {
text = freader.result;
}
freader.readAsText('./test.txt', "ISO-8859-1");
text = freader.result; // To my knowledge, this should be taking the current line freader is on and storing it into text
var div = document.getElementById('bottom_pane_options');
div.innerHTML = div.innerHTML + text;
}
test.txt
Iron
Aluminum
Steel
//etc. for x number of times (depends on data I have parsed previously)
All I would like is for JavaScript to read test.txt and parse it into an array (text). The issue is, when I click the button 'Try It', the alert pops up (telling me the function is being called) and text contains null. I am running all files off my computer and all are in the exact same directory.

Read an input tag into a javascript string

I'm trying to read an input type="file" tag into a javascript string. I know this should be simple but I simply cannot get my code to work. The file is plain .html. Here's what I have
<h3>Select location of html file.</h3>
<form onSubmit="submitButtonPressed()">
<input type="file" id="classList" />
<input type="submit" />
</form>
<script>
var reader = new FileReader();
var htmlFile = document.getElementById("classList").files[0]; //read the file selected with the <input> tag
reader.readAsText(htmlFile);
var htmlText = reader.result; //and create a string with the contents
function submitButtonPressed() {
var lengthOfText = htmlText.length;
alert("It is " + lengthOfText + " characters long");
}
</script>
I'm just trying to create a string that contains the contents of the .html file selected by the input tag. I can't figure out why htmlText doesn't contain the contents of the .html file, could someone explain what I'm doing wrong?
this is the right answer for you :
HTML5 File API: How to see the result of readAsText()
reader.onload = function(e) {
// e.target.result should contain the text
};
reader.readAsText(file);
so i guess you will have to check on pressing the button if the file was loaded or not , maybe it is still in progress , or encountered an error

Categories

Resources