I'm trying to create a Word document in Vue using the docx module (https://docx.js.org/#/), that works and I've created a 12 page document so far. Now for layout I'm trying to import images into the same Word document, in Vue and I'm completely lost. All the tutorials say I should use fs.readFileSync() but for some reason fs doesn't seem to work in VueJS, maybe having something to do with NodeJS? I just can't see the bigger picture anymore and thus can't find a way to implement the picture in the document. I've tried all sorts of ways:
import { readFileSync } from "fs"; + readFileSync("path/to/image") --> Object(...) is not a function
var fs = require("fs"); + fs.readFileSync("path/to/image") --> fs.readFileSync is not a function
import * as fs from "fs"; + fs.readFileSync("path/to/image") --> fs__WEBPACK_IMPORTED_MODULE_6__.readFileSync is not a function
Part of my document:
const doc = new Document({
sections: [
{
children: [
new ImageRun({
data: fs.readFileSync("path/to/image"), // this is where I want the image
transformation: {
width: 100,
height: 100,
},
}),
// more children
],
},
// more sections
],
]});
Packer.toBlob(doc).then((blob) => {
console.log(blob);
saveAs(blob, this.companyName + ".docx");
console.log("Document created successfully!");
});
Stackoverflow links I've tried to use but didn't work for me (not even all):
readFileSync is not a function
How to import and use image in a Vue single file component?
fs.readFile() or fs.readFileSync() not a function exception but why?
If anyone could help me with this or even point me in the right direction I'd be very grateful since this has taken up days on end.. Thanks in advance!
