I'm currently learning how to code and working on a text generator that allows users to edit text and export it as .DOCX. I came across this script called jsfiddl on the website npmjs, which enables exporting HTML to .DOCX. However, I'm having trouble figuring out how to make the script export HTML text from a specific div, like in my example where I want to export content in <div id="exportContent">.
Note: When I tried organizing the script in jsfiddle with both HTML and JavaScript, it didn't work.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9f949883bbcfd5cbd5cb">[email protected]</a>/build/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
</head>
<body>
<h1>DOCX browser Word document generation</h1>
<button type="button" onclick="generate()">Click to generate document</button>
<script>
function generate() {
const doc = new Document();
const paragraph = new Paragraph("Hello World");
const institutionText = new TextRun("Foo Bar").bold();
const dateText = new TextRun("Github is the best").tab().bold();
paragraph.addRun(institutionText);
paragraph.addRun(dateText);
doc.addParagraph(paragraph);
const packer = new Packer();
packer.toBlob(doc).then(blob => {
console.log(blob);
saveAs(blob, "example.docx");
console.log("Document created successfully");
});
}
</script>
<div id="exportContent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
<span class="a" contenteditable="true" >
-----------------YOUR TEXT HERE--------------------
</span> took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>