Creating word document with Vue.js

barn2.co.uk

So there could be simple applications that require you to generate simple documents quickly. Doing it in front-end is really quick depending. I this article I will cover how you can generate a dynamic word document using Vue.js and npm module called “docx” and save it to file system using module called “file-saver”. Let's get started!

Assuming you have basic templates ready. If not use the Vue CLI to create a basic app. Then install the relevant modules. We need to install two described above.

npm i docx file-saver

You can now import these two modules wherever you want to create the document. This maybe end of a form. I am going to import this onto my initial HelloWorld component created using Vue create CLI command.

import {
WidthType,
BorderStyle,
Document,
Paragraph,
Packer,
TextRun,
} from "docx";
import { saveAs } from "file-saver";

After importing the modules you want to include them in your components section.

components: {
 WidthType,
 BorderStyle,
 Document,
 Paragraph,
 Packer,
 TextRun,
 saveAs,
},

now let's create some data we can use in the document. This can be dynamic but for this tutorial, it won’t change.

data() {
 return {
  firstname: "Jhon",
  lastname: "Doe",
  message: "I just created a document using Vue.js 😲",
 };
},

Now let's create the method to create our document and save our document to file system.

createDoc: function () {
// Create a new Document an save it in a variable
let doc = new Document();
// Documents contain sections, you can have multiple sections per document, go here to learn more about sections
// This simple example will only contain one section
doc.addSection({
 properties: {},
  children: [
   new Paragraph({
    children: [new TextRun(`Hi! My name is 
     ${this.firstname} ${this.lastname}.`),],
   }),
   new Paragraph({
    children: [
     new TextRun({
      text: this.message,
      bold: true,
     }),
    ],
   }),
  ],
});
// To export into a .docx file
this.saveDocumentToFile(doc, `vuedoc.docx`);
},

Save saveDocumentToFile method:

saveDocumentToFile: function (doc, fileName) {
  const mimeType =
  "application/vnd.openxmlformats
   officedocument.wordprocessingml.document";
  Packer.toBlob(doc).then((blob) => {
  const docblob = blob.slice(0, blob.size, mimeType);
  saveAs(docblob, fileName);
 });
},

Now, let's add some HTML to handle this. You can call this method on form submission but for this tutorial, I am just going to use a button to call it.

<div class="hello">
<button class="btn" v-on:click="createDoc()">DOWNLOAD DOCUMENT</button>
</div>

On clicking the Download Document button will automatically download a word document as seen open below.

Docx is a great module, full of lots of features and works with all javascript frameworks. Check it out here: https://www.npmjs.com/package/docx

Thanks for reading this tutorial. Hope it was helpful and you learnt something new. I am learning things myself as I come across challenges. Leave some feedback in the comment if you have any. If you want me to cover something specific then please leave your suggestions below and I will create a dedicated article to you 😊

Don't forget to follow me as well! You’ll be the first to see my articles.