i wanted to make docx file through html and js, also i'm using Docx Library and Filesaver
but i got next error:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
I'm using next html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=chrome">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav></nav>
<section>
<button>
<input type="file" id="input">
<button style="display: block; margin-top: 5em;" id="generate">Create custom DOCX type from XL document</button>
</button>
</section>
<footer></footer>
<script type="module" src="js/script.js"></script>
</body>
</html>
and js:
import { Document, Packer } from "../node_modules/docx/build/index"
import { saveAs } from "../node_modules/file-saver/dist/FileSaver"
document.getElementById("generate").addEventListener(
"click",
function (event) {
generateWordDocument(event)
},
false
)
function generateWordDocument(event) {
event.preventDefault()
// Create a new instance of Document for the docx module
let doc = new Document()
// Call saveDocumentToFile with the document instance and a filename
saveDocumentToFile(doc, "New Document.docx")
}
function saveDocumentToFile(doc, fileName) {
// Create new instance of Packer for the docx module
const packer = new Packer()
// Create a mime type that will associate the new file with Microsoft Word
const mimeType =
"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
// Create a Blob containing the Document instance and the mimeType
packer.toBlob(doc).then(blob => {
const docblob = blob.slice(0, blob.size, mimeType)
// Save the file using saveAs from the file-saver package
saveAs(docblob, fileName)
})
}
const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
let fileList = inputElement.files
function handleFiles() {
fileList = this.files; /* now you can work with the file list */
console.log(fileList[0].name)
}
i download docx and file-saver next way:
npm install docx
npm install file-saver
and http-server
I'm using http-server to test my code
http-server -c-1
how to fix MIME type of text/html in this code?
I tried to change path to docx and file-saver like "../package.json/docx" "docx" "../node_modules/docx" and etc but it didn't work i also tried to use another server as http-server and live server in vscode but nothing is working
The error has nothing to do with your DOCX stuff. It's complaining about the MIME type on the response for js/script.js
it gets when requesting your module. Apparently, http-server
is returning text/html
as the content-type for that, which isn't allowed; it has to be a valid JavaScript MIME type (such as text/javascript
, though application/javascript
and a few others are okay).
The http-server
documentation says you can pass --mimetypes
to specify a .types
file containing the MIME types to use, telling it to use text/javascript
as the MIME type (possibly with a charset
). They have an example file here (thank you turbolocust). Or you might consider another server that has common file types pre-configured.