DEV Community

Discussion on: Vue and Docx file

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

OK THX