An Interest In:
Web News this Week
- April 13, 2024
- April 12, 2024
- April 11, 2024
- April 10, 2024
- April 9, 2024
- April 8, 2024
- April 7, 2024
August 29, 2021 07:51 am GMT
Original Link: https://dev.to/shaked46763744/vue-and-docx-file-mdm
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 alsoconst 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>```
Original Link: https://dev.to/shaked46763744/vue-and-docx-file-mdm
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To