Using JavaScript to generate and download a Word file from user input text is a technique that can be quite useful in web applications. This is helpful for generating reports, documenting form input results, or providing documents that dynamically change content to users. In this guide, we will focus on using the JavaScript library called docx.js.
Introduction
The automation of document creation and the ability to generate documents directly from a webpage is in demand across various industries. For example, you may want to download survey results online as a Word document, or generate a report from a web application and provide it on the spot. Let’s explore how JavaScript can meet these needs.
Basic CSS Settings
Before generating the Word document, we will set up the necessary styling on the webpage. The following CSS code defines the basic format of the page, which can be customized as needed.
<style>
body{
font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
padding: 0;
margin: 0;
}
.clWrap{
width:800px;
margin:0 auto;
text-align:center;
}
h1{
font-size:18px;
line-height:1.4em;
text-align:center;
font-weight:normal;
}
</style>
This CSS is optimized for maintaining readability of the document. It centers the content on the page and appropriately emphasizes headings.
Generating a Word File with JavaScript
Let’s look at how to actually generate a Word file using the docx.js library. First, load the necessary JavaScript libraries: jquery.min.js, base64.js, jszip.js, and docx.js files. Declare DOCXjs(), and with the “declaredVariable.text(Word text output)”, you can output text to the Word file.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="./libs/base64.js"></script>
<script type="text/javascript" src="./libs/jszip/jszip.js"></script>
<script type="text/javascript" src="docx.js"></script>
<script>
function fncDoc() {
var doc = new DOCXjs();
doc.text('Text information described in JavaScript processing');
doc.text('Text information as output to Word file.');
var output = doc.output('datauri');
}
</script>
This code snippet defines the fncDoc function. This function creates a new Word document, adds text to it, and then outputs it as a data URI. This allows the user to directly download the generated Word file.
Setting a Download Link in HTML
To enable users to download the generated Word file, set up a download link in the HTML. By setting href to `javascript:fncDoc()`, clicking the link will download the Word file.
<div class="clWrap">
<h1>After clicking the "Download" link below, download the file, <br />
and try opening it after renaming it to "~.doc" or "~.docs".</h1>
<a href="javascript:fncDoc()">Download</a>
</div><!--/clWrap-->
Clicking this link will execute the fncDoc function and allow the user to download the Word file. The file name can be changed by the user after downloading.
Demo Page for Outputting Word Files with docx.js
You can access the demo page for this technique from the link below.
Demo for Outputting Word Files with docx.js
Source: Amazing! Generate MS Word Files with JavaScript “DOCX.js”
Amazing! Generate MS Word Files with JavaScript “DOCX.js”
It seems possible to generate a Word file from text entered in a text area, but if MS Word is installed on the PC, it is quicker to open Word directly and enter the text.
Conclusion
The dynamic generation and download of Word files using JavaScript is a useful technique in many web applications. By using the docx.js library, developers can easily implement this functionality and provide valuable documents to users. I hope this article helps you understand the basics of this technology and serves as a starting point for applying it in your projects.
※Please use it at your own risk if reused.
Do not reuse the Google Analytics tag within the demo page tag.
