I have created JavaScript code to get data from HTML back-end and convert that HTML into the PDF.
To generate PDF, I have used JSPDF.
My HTML string looks like below:
"<p><span style="font-family:calibri;font-size:17.3333px;">Dear [#Client Name],<br></span></p><p><span style="font-family:calibri;font-size:17.3333px;">This is a sample letter that I need filled out for [#Client Name 2], who lives in [#City],[#Province]. On this date, the [#Number Date], of [#Month],[#Year]. It occurred to me that [#Client Name] was talking to [#Client Name 3].<br></span></p><p><span style="font-family:calibri;font-size:17.3333px;">The end.</span></p><p><span style="font-family:calibri;font-size:17.3333px;">Appriciate your time.<br></span></p><p><span style="font-family:calibri;font-size:17.3333px;">[#Date]</span><br></p>"
The PDF which is generated using JSPDF looks like below:
The code to generate HTML is:
function GeneratePDF(content) {
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
doc.fromHTML(content, 15, 15, {
'width': 250,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
}
Can you please guide me how the alignment can be managed to manage the content. Also, how can I manage the font and how to remove þÿ character?
Please check
http://jsfiddle.net/2rhsvgkk/
Inspired by
How to properly use jsPDF library
HTML
<div id="customers">
<p>Dear [#Client Name],</p>
<p>This is a sample letter that I need filled out for [#Client Name 2], who lives in [#City], [#Province]. On this date, the [#Number Date], of [#Month],[#Year]. It occurred to me that [#Client Name] was talking to [#Client Name 3].</p>
<p>The end.</p>
<p>Appriciate your time.</p>
<p>[#Date]</p>
</div>
<button onclick="javascript:demoFromHTML();">PDF</button>
you are using some unnecessary <span> and <br> tags.
Hope this help you
Related
I'm trying to write a javascript code to be run on the Acrobat Javascript console by referring to https://opensource.adobe.com/dc-acrobat-sdk-docs/acrobatsdk/pdfs/acrobatsdk_jsapiref.pdf but I've been unsuccessful so far.
What I'd like to know is how to reply to an annotation in javascript and I'm guessing the code should look like something below but I must be guessing all wrong. I'd appreciate your help. Thank you.
// create a new annotation and set it to a reply to the first annotation in a document.
var annots = this.getAnnots();
var myNAnnot = annots[0];
var repAnnot = this.addAnnot({
page: myNAnnot.page,
type: myNAnnot.type,
contents: "Your comment is right."
});
repAnnot.refType = "R"; //should be "Group"??
repAnnot.inReplyTo = myNAnnot.name;
The following will add a reply to the original annotation. Reply annotations must be of type "Text" since they don't show up on the page.
var firstAnnot = this.getAnnots()[0];
var repAnnot = this.addAnnot({
page: firstAnnot.page,
type: "Text",
contents: "Your comment is right.",
inReplyTo: firstAnnot.name
});
How to create a link like Instagram username or hashtag in php or javascript ?
I used to use these codes before`
str_ireplace('#', '#', 'I #aaaa in');
`
But all the words are converted to a link.
And can i add a python library to javascript or php?
So assuming you inserted your usernames with PHP, the html structure could look similar to this.
HTML:
<p class="username">#Username</p>
<p class="username">#otherUser</p>
<p class="username">#meAndYou</p>
JavaScript + JQuery:
$(document).ready(() => {
changeUserNames();
}
function changeUserNames(){
$('p').each(function (index) {
var text = $(this).text();
var username = text.split('#')[1];
$(this).html(`#${username}`);
});
}
JS Fiddle:
https://jsfiddle.net/zy46npb2/4/
I'm using uncode theme and I have a page heading that is showing 'Archive: Portfolio'
I want to remove the 'Archive:' bit from that heading.
In the source it looks like this:
<h1 class="header-title h1"><span>Archives: Projects</span></h1>
I have tried removing Archive from all the page titles with Yoast SEO plugin but it is still showing.
Is there a way to remove that word with javascript maybe does anyone know?
Thanks!
I'd be wary in removing it via javascript. It seems to me that adding a piece of text somewhere in the code's execution, and then removing it on the client-side smells like "contrived complexity".
Take a look at the wordpress template hierarchy, and manually search for the template file that's rendering the Archives: string of text.
I'd start with archive.php, and then fall my way up through other archive-*.php pages, then to taxonomy.php category.php, and so on.
If you're comfy in the command line, you might also consider grepping for the string: grep -r /path/to/wp/theme "Archive:" and sifting through the results to find the template file(s) with that on one of their lines.
But if you insist on removing the string via javascript, you might try dropping something like this at the bottom of the <body>, via a function in functions.php:
function remove_archive_text_via_js() {
if (is_archive()) { ?>
<script type="text/javascript">
var archiveHeaders = document.getElementsByClassName('header-title');
for (i = 0, headerCount = archiveHeaders.length; i < headerCount; i++) {
var replacedText = archiveHeaders[i].textContent.replace('Archives: ', '');
archiveHeaders[i].textContent = replacedText;
}
</script>
<?php }
}
add_action('wp_footer', 'remove_archive_text_via_js');
var elem = document.getElementsByClassName('header-title h1');
var innerSpan = elem[0].getElementsByTagName('span');
innerSpan[0].innerHTML = innerSpan[0].innerHTML.replace('Archives: ', 'jsfiddle');
jsfiddle: https://jsfiddle.net/orcadj3u/
$(function() {
$( "h1 span" ).each(function( index ) {
var newtext = $(this).text().replace("Archives: ", " ");
$(this).html(newtext);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1 class="header-title h1"><span>Archives: Projects</span></h1><br>
<h1 class="header-title h1"><span>Archives: Solutions</span></h1><br>
<h1 class="header-title h1"><span>Archives: Yozgat</span></h1><br>
<h1 class="header-title h1"><span>Archives: Turkey</span></h1><br>
I have Meteor project which uses the froala:editor-reactive package in order to set the user's about me field.
Here is my template js code:
Template.profile.helpers({
getAbout: function() {
return Meteor.user().profile.about;
},
doSave: function (e, editor) {
// Get edited HTML from Froala-Editor
var newHTML = editor.getHTML();
// Do something to update the edited value provided by the Froala-Editor plugin, if it has changed:
if (!_.isEqual(newHTML, Meteor.user().profile.about)) {
Meteor.call("updateTestimony", Meteor.userId(), newHTML);
}
return false; // Stop Froala Editor from POSTing to the Save URL
}
}
Here is my template html code:
<template name="profile">
<div>
{{> froalaReactive _onbeforeSave=doSave _value=getAbout}}
</div>
</template>
It's supposed to save as the value changes (I hope).
But I have an error with the line var newHTML = editor.getHTML(); and I've also tried var newHTML = editor.html.get(true);. Both of these result in an error where it cannot read the property of html or getHTML. I'm hoping this is just a syntax error and I need something else but what's wrong here?
Per the plugin docs, try:
var newHTML = editor.html.get(true /* keep_markers */);
If that doesn't work, you may possibly be using a different version. In which case, give the following syntaxes a shot:
var newHTML = $('.your_selector').editable('getHTML', true, true);
var newHTML = $('.your_selector').froalaEditor('html.get', true);
More from the official docs here and see this question.
When creating an HTML widget in FreeBoard, the following text is displayed:
Can be literal HTML, or javascript that outputs HTML.
I know I can do the following to return HTML with data, but if I want to do something more complex I'd prefer to use literal HTML
return html with data
return "<div style='color: red'>This is a red timestamp: " + datasources["DS"]["Timestamp"] + "</div>"
literal html with no data
<div style='color: red'>
This is red text.
</div>
<div style='color: blue'>
This is blue text.
</div>
Both of those work. My question is, how can I insert data from a datasource into the literal html example?
For more context, here is what is at the top of the editor:
This javascript will be re-evaluated any time a datasource referenced here is updated, and the value you return will be displayed in the widget. You can assume this javascript is wrapped in a function of the form function(datasources) where datasources is a collection of javascript objects (keyed by their name) corresponding to the most current data in a datasource.
And here is the default text:
// Example: Convert temp from C to F and truncate to 2 decimal places.
// return (datasources["MyDatasource"].sensor.tempInF * 1.8 + 32).toFixed(2);
I don't know the freeboard framework, but a generic solution would be to use HTML5 templates, if your browser support requirements allow it.
function supportsTemplate() {
return 'content' in document.createElement('template');
}
if (supportsTemplate()) {
alert('browser supports templates');
} else {
alert('browser does not support templates');
}
var template = document.querySelector('#timestamp-template');
var timestamp = template.content.querySelector('.timestamp');
timestamp.innerHTML = new Date().toLocaleString();
var clone = document.importNode(template.content, true);
var output = document.querySelector('#output');
output.appendChild(clone);
<template id="timestamp-template">
<div style='color: red' class="timestamp">
This is default red text.
</div>
<div style='color: blue'>
This is blue text.
</div>
</template>
<div id="output"></div>
You would obviously need to adapt this strategy to support whatever data sources and transforms your project needs.
Failing support for HTML5 template elements, you could also use <script type="text/template">.
Here is an example of how to insert a Datasource into an HTML widget:
var LVL = datasources["GL"]["Level"];
return `<div style="width: 200px; height: 200px;background:rgb(242,203,56);"></style>
<svg width=200 height=`+LVL+`><rect width=100% height=100% fill=grey></svg>
</div>`;