DEV Community

Shaked
Shaked

Posted on • Updated on

Vue and Docx file

Hey, my name is Shaked, and I want you to have the easiest time learning how to create and save a docx file client side. So without more talking, let's start.
By the way, this code is with Vue js, but this example can be used in any other framework, like React Angular and Svelte.
One last thing if you are using a server side framework like nuxt.js/ next.js, please use client-side rending for this component, so you do not have any issues with that (only when you create the file in the server-side life cycle hook)

<template>
  <div>
    <div @click="exportDocx">
      Generate .docx file
    </div>
  </div>
</template>

<script>
import { Document, Packer, Paragraph, TextRun } from "docx";
// import { saveAs } from 'file-saver'; // you can use this also
const FileSaver = require("file-saver");

export default {
  methods: {
    exportDocx() {
      // Create a new Document an save it in a variable
      const doc = new Document({
        sections: [
          {
            properties: {},
            children: [
              new Paragraph({
                children: [
                  new TextRun("Hello World"),
                  new TextRun({
                    text: "Foo Bar",
                    bold: true,
                  }),
                  new TextRun({
                    text: "אני אדם כמו כל אדם אחר בעולם חחחחחחחחחח הצחקתי את עצמי ",
                    bold: true,
                  }),
                ],
              }),
            ],
          },
        ],
      });
      const mimeType =
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
      const fileName = "test.docx";
      Packer.toBlob(doc).then((blob) => {
        const docblob = blob.slice(0, blob.size, mimeType);
        FileSaver.saveAs(docblob, fileName);
      });
    },
  },
};
</script>
Enter fullscreen mode Exit fullscreen mode

Discussion (2)

Collapse
abhilearnstocode profile image
Abhii • Edited

Heyy @shaked46763744 ,to highlight the code you can type the language name after the three backticks you use to include the code block.

Something like this..



```javascript
let badName = "This is highlighted text"
```


Hence the results will be:

let badName = "This is highlighted text"
Enter fullscreen mode Exit fullscreen mode

See how your code looks like:

<template>
  <div>
    <div @click="exportDocx">
      Generate .docx file
    </div>
  </div>
</template>

<script>
import { Document, Packer, Paragraph, TextRun } from "docx";
// import { saveAs } from 'file-saver'; // you can use this also
const FileSaver = require("file-saver");

export default {
  methods: {
    exportDocx() {
      // Create a new Document an save it in a variable
      const doc = new Document({
        sections: [
          {
            properties: {},
            children: [
              new Paragraph({
                children: [
                  new TextRun("Hello World"),
                  new TextRun({
                    text: "Foo Bar",
                    bold: true,
                  }),
                  new TextRun({
                    text: "אני אדם כמו כל אדם אחר בעולם חחחחחחחחחח הצחקתי את עצמי ",
                    bold: true,
                  }),
                ],
              }),
            ],
          },
        ],
      });
      const mimeType =
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
      const fileName = "test.docx";
      Packer.toBlob(doc).then((blob) => {
        const docblob = blob.slice(0, blob.size, mimeType);
        FileSaver.saveAs(docblob, fileName);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
Enter fullscreen mode Exit fullscreen mode
Collapse
shaked46763744 profile image
Shaked Author

OK THX