I am new to web development and need your help to figure out how to use the form in HTML and use the data to populate the said field in a word document. Any advice on how to approach this problem is highly appreciated. It would really help if you could post a live example for the below. Please,do let me know if any further explanation is required.
As a new developer, I want to advise you that you are getting into some challenging territory here and many of the solutions might require some heavy experience with programming and MS Word. In this forum, there are many options you can try, but from what I gather you will need to learn about macros.
The second option you could try are some services that will do this for you for a fee. Here are two options. Check out Formstack or Jotform
If you use this type of service, you would create a form action within your html code that will merge the data from the form into the Microsoft Word Document using merge tags.
The third option you can try is using Javascript within the form to populate the Word Document. The code would look more like this:
function Export2Word(element, filename = ''){
var preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>";
var postHtml = "</body></html>";
var html = preHtml+document.getElementById(element).innerHTML+postHtml;
var blob = new Blob(['\ufeff', html], {
type: 'application/msword'
});
// Specify link url
var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);
// Specify file name
filename = filename?filename+'.doc':'document.doc';
// Create download link element
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob ){
navigator.msSaveOrOpenBlob(blob, filename);
}else{
// Create a link to the file
downloadLink.href = url;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
document.body.removeChild(downloadLink);
}
Export HTML Table Data to Excel using JavaScript
HTML Content:
Wrap the HTML content in a container you want to export to MS Word document (.doc).
<div id="exportContent">
<!-- Your content here -->
</div>
Last option would be using PHP, and I recommend watching this video by CodexWorld and reviewing the post that goes along with it here. This is a challenging concept, so I would encourage you to take your time.
Hopefully this will help and best of luck.
Well, I don't know how to exactly do that, I am also a beginner like you. What seems to help you might be connecting your form with Google Sheets. The Google Spread Sheet will store all data submitted via your form. You can then use this data wherever you want.
There is an open source project for this task, you can do that by following the steps stated here: https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server
You can see it in action here: https://nisootech.vercel.app/#contact-me
There are two parts in your application
Enabling user to input the values in frontend. Which you can build using any frontend technology stack eg: HTML and Plain Javascript(Required for calling the Services), React JS, Angular etc.
Backend Service which will basically does the heavy work
Receiving the input from user.
Creating Word file using any libraries such as
Generate word files using Apache POI ,
Using Node.js to generate dynamic word document using Database value
Downloading the file after its completely generated using the values supplied by user.
download a file from Spring boot rest service
how to download file in react js
For the Backend service you can use technologies like Java and Springboot, Python, Node Js etc.
Building Restful webservices using spring
Use Technology in which you are more comfortable and start building. These Links and documentation you can use to start from basic.
Suggest you to breakdown your problems focus on each specific areas and do the development as per your smaller problems and integrate them later.
Related
I have a personal website that's all static html.
It works perfectly for my needs, except for one tiny thing.
I want to dynamically change a single word on a single page: the name of the current map for a game server I'm running.
I can easily run a cron job to dump the name of the map into a file in the site's html directory, call it mapname.txt. This file contains a single line of text, the name of the map.
How would I update, say, game.html to include this map name?
I would very strongly prefer to not pull in some massive framework, or something like php or javascript to accomplish this.
I want the lightest weight solution possible. Using sed is an option, although definitely a hacky one. What's the tiniest step up from static html?
If you say "dynamically", do you mean:
If the information changes ...
A) the user should see it after they have re-loaded the page?
B) the page should update without the need to reload?
For A, you can use PHP (or any other language your server supports) to read the data from the file and print it into the web page. This will happen on server side.
For B, you can use JS that queries the file and updates the HTML. This will happen on client side.
To change text there are a few way though only two appropriate methods.
First is using textContent:
document.getElementById('example').textContent = 'some example text';
Secondly is the older nodeValue however it's a bit more tricky since you have to specify the exact textNode (e.g. .firstChild):
document.getElementById('example').firstChild.nodevalue = 'some example text';
You're 100% on the mark about not using frameworks or libraries, almost everything exists without the suck.
I'm not going to test this though this is a very stripped down version of my ajax function from my web platform. Some people might scream about the Fetch API however the syntax is an absolute mess. I recommend figuring out how to standardize this function so you can use it for everything instead of making copies of the code for every instance. Mine supports both GET and POST requests.
function ajax(method, url, param_id_container_pos, id_container)
{
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.timeout = 8000;
xhr.open(method,url,true);
xhr.send(null);
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4)
{
if (xhr.getResponseHeader('content-type'))
{
var type = xhr.getResponseHeader('content-type').split('/')[1];
if (type.indexOf(';') >- 1) {type = type.split(';')[0];}
}
else {var type = 'xml';}//Best guess for now.
console.log(type,xhr);
console.log(xhr.responseText);
//console.log(type,xhr.responseXML);
//document.getElementById('example').textContent = xhr.responseText;
}
}
}
You're also going to have to ensure that the url is set to an absolute path. I use path variable in my platform (see my profile for the link, wildly clean and organized code).
There are plenty of ways to make this function reusable and I highly recommend doing that. For now use the last non-curley-bracket line to update your line of text.
I want to add a like button, for every post on the homepage of my jekyll blog
I didn't find any plugin. I don't want any facebook's like button that connects to company's/product page likes.
I want a like button which is independent from any social platforms and only relates to post.
Something like this
Short answer: you can't.
Long answer: your button will have store the "likes" somewhere (usually a database), which is by definition a dynamic process. Jekyll can only generates static data.
You can bind your button to an external service, e.g. LikeBtn which provides such functionality (the free offer miss advanced features like statistics).
Whatever the service you choose, it will usually work by adding a javascript snippet, as with google analytics. You can see how to use google analytics with jekyll to help you (e.g. here).
Yes it is possible to add a like button and track number of likes by writing your custom JavaScript code and a database to your Jekyll generated static sites.
So coming to the database as it is a static page and doesn't involve any server, it is not possible to interact with database directly but there is a way.
In my case I am making use of firebase. Firebase by Google provides us many capabilities like storage, database , hosting and also access to serverless architecture using functions.
So coming to the point, all you need to do is register with http://firebase.google.com
Then create an app and then in your JavaScript add following code in head tag
<script src="https://www.gstatic.com/firebasejs/5.9.0/firebase.js"></script>
<script>
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
projectId: "<PROJECT_ID>",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
var timestamp = new Date().valueOf();
var obj = {};
obj[timestamp] = "1";
firebase.database().ref('/').update(obj)
</script>
For more details,
You can visit my blog on this topic
https://xyzcoder.github.io/firebase/2019/03/17/firebase-real-time-database.html
Note: we can also implement security restrictions on who can read and write data to our json store
Thanks,
Pavan
I am implementing a drag'n'drop code for uploading images. I'm a newbie on this technology/API.
I'm using the drag'n'drop API of the HTML5. I also use Apache as http server and node.js as websocket server. I found lots of tutorials for the client side implementation.
This is maybe a silly question, but what about the server side? I guess I have to implement a code on server side to handle the incoming image's upload and storage...
Any ideas?Or links?
Thanks
EDIT
I will use these APIs : drag'n'drop, FormData, XHR progress event and FileReader. I will create code based on this tutorial. I have not implemented anything specific yet, I'm still experimenting.
The file saving on the server side is used as normally!
After using drag&drop you will get the file-objects in javascript and you can do what you want with them, either XHR-post them, use them in a normal form-POST or convert to a data-URI and post it to the server as base64 text.
i.e
element.ondrop = function(ev) {
var files = ev.dataTransfer.files
// post the files via XHR POST
var formData = new FormData()
// im lazy, use a supported loop
for (file of files) {
formData.append("file", file)
}
var req = new XMLHttpRequest()
req.open('POST', '/saveimage/')
req.send(formData)
}
Will post the files just as you had used a normal non-drag and drop action.
For a better answer on how to save files we need some info about what language and framework your website uses.
I want to implement a workflow where users submit data via a Google Form, and their responses are automatically posted to a pre-existing PDF form.
I have a couple of PDF forms that I use frequently. I have created a Google Form to gather all of the information necessary to complete the PDF. Now I am trying to find a way to map the answers to the original PDF.
How can I accomplish that?
There is an article on patentbytes.com, Automatically Completing Your PDF Forms, which goes into some detail about this topic, and which is the inspiration for this answer.
With Google Apps Script, you cannot modify existing PDF forms. However, you can leverage the existing Import capabilities in applications such as Adobe Acrobat and Acrobat Reader, by scripting the generation of form data in a way that is easily imported.
Here's the idea:
Have users fill out Google Form. Use the form settings to ensure required questions are answered.
On form submission, have a spreadsheet-contained trigger function generate an XML file with the user's answers. It's simple to use text-substitution to complete this, but we'll use an alternative approach using Google's XmlService.
Transmit the XML-formatted answers to the administrator. This may be done via email, or by placing a file in Google Drive.
Use Adobe Acrobat or Reader to import the XML file into the pdf form. (If needed.)
Before proceeding, your PDF form needs to have specific characteristics:
It must be a fillable form.
It must include support for Export and Import of form data. (In Adobe Reader, you will see an "Extended" menu, as in this screen shot.)
We'll use the example form from the previously mentioned article as an example. It works, although it needs cleaning up.
Export a sample of XML form data
Using Acrobat Reader (or similar), fill out a sample form completely, and Export the form data as XML. (It simplifies future steps if you fill the form out using camelCase terms that will be used for the HTML template - for example inventionTitle.)
Create HTML template from exported XML
In the Apps Script editor, use File-New to create a new html file in the project, and name it "formXml". Paste the text content of the exported xml file into formXml.html.
The XML declaration needs to be in our final output, but will cause the HtmlService to crash if left in the template. Remove it from the template; we'll add it back in our code.
<?xml version="1.0" encoding="UTF-8"?>
(Optional) Prettify the XML, to make it easier to avoid introducing errors. (freeformatter.com has a useful xml formatter. I found that a first pass with "compact mode" followed by a second pass at 2 spaces per indent produced good results.
(Optional) Reorder the fields logically.
For each input field, replace the example text with valid printing scriplets.
inventionTitle becomes <?= inventionTitle ?>
formXml.html
Here is what your form XML template should end up like. We have only 5 of the form fields represented in this example.
<fields xmlns:xfdf="http://ns.adobe.com/xfdf-transition/">
<TitleofInvention xfdf:original="Title of Invention"><?= inventionTitle ?></TitleofInvention>
<Inventorone xfdf:original="Inventor one"><?= inventor1name ?></Inventorone>
<Citizenof xfdf:original="Citizen of"><?= inventor1citizenship ?></Citizenof>
<Inventortwo xfdf:original="Inventor two"><?= inventor2name ?></Inventortwo>
<Citizenof_2 xfdf:original="Citizen of_2"><?= inventor2citizenship ?></Citizenof_2>
</fields>
Code.gs
Here's the form submission trigger function. Each time a user fills out your on-line google form, this spreadsheet form submission trigger will process their responses, and save a timestamped xml file on your google drive, ready to be imported into a PDF form.
function formSubmission(eventData) {
// Get a handle on the xml template
var formXml = HtmlService.createTemplateFromFile('formXml');
// Replace templated values with user's input
formXml.inventionTitle = eventData.namedValues['Invention Title'];
formXml.inventor1name = eventData.namedValues['Inventor 1 Name'];
formXml.inventor1citizenship = eventData.namedValues['Inventor 1 Citizenship'];
formXml.inventor2name = eventData.namedValues['Inventor 2 Name'];
formXml.inventor2citizenship = eventData.namedValues['Inventor 2 Citizenship'];
// Evaluate the template with substitutions
var xml = formXml.evaluate();
// Get the evaluated template as text, prepend the XML Declaration
var formXmlText = '<?xml version="1.0" encoding="UTF-8"?>'
+ xml.getContent();
// Save user's input as an xml file on our Google Drive
var fileName = 'Form ' + eventData.namedValues['Timestamp'];
var xmlFile = DriveApp.createFile(fileName, formXmlText, MimeType.XML);
}
Form & Spreadsheet
The namedValues in the eventData object processed by the trigger function come from the Form Responses sheet, which are directly from the Form questions. (That's a good reason to keep the questions short, and rely on the Help Text to elaborate!)
I was about to fork a compatibility guide & when I looked at the HTML, I saw it was a table.
Tables are good to show data like this, but not fun to edit when you have to edit every few weeks.
What tools can edit an existing HTML table very quickly & cleanly add/remove/clone columns & rows quickly & painlessly please?
Can be online, GUI or WYSIWYG (prefered) or command-line driven, on or off-line (though online with JavaScript engine that is Node.js compatible is preferred).
Or perhaps another way is better to show tabular data that changes every few weeks, like AJAX presenting JSON data, but still need some hand-holding for the best scenario here also.
Table & suggestion in question:
https://github.com/kangax/es5-compat-table/blob/gh-pages/es6/index.html
https://github.com/kangax/es5-compat-table/issues/29
Different people has different needs and attitudes!
1).You can use a spreadsheet program to edit the table and export to html.Google spreadsheet provides functionality to embed a preadsheet to a web page or to download(export) the spreadsheet in simple HTML, you can use CSS to style it to fit your needs.
2).Google's API can grab data from a spreadsheet and show like a table.What you have to do is just edit the Google spreadsheet!
I checked the API and could build a quick example,Here is the fiddle!
Here is a little summery of what I did,
var query = new google.visualization.Query(
'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
The spread sheet I refer here is http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ
// Apply query language.
//I'm selecting all the cols!
query.setQuery('SELECT * ');
// Send the query with a callback function.
query.send(handleQueryResponse);
in my callback,
var data = response.getDataTable();
//init the table
visualization =
new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, null);