英文:
How to fix MIME type of "text/html"?
问题
我想通过HTML和JavaScript创建一个docx文件，同时我正在使用Docx库和Filesaver。但是我遇到了以下错误：
> 无法加载模块脚本：预期的JavaScript模块脚本，但服务器响应的是“text/html”的MIME类型。根据HTML规范，模块脚本需要进行严格的MIME类型检查。
我正在使用以下HTML代码：
<!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">从XL文档创建自定义DOCX类型</button>
</button>
</section>
<footer></footer>
<script type="module" src="js/script.js"></script>
</body>
</html>
以及JavaScript代码：
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();
// 创建docx模块的Document实例
let doc = new Document();
// 调用saveDocumentToFile方法，传递文档实例和文件名
saveDocumentToFile(doc, "New Document.docx");
}
function saveDocumentToFile(doc, fileName) {
// 创建docx模块的Packer实例
const packer = new Packer();
// 创建一个MIME类型，将新文件与Microsoft Word关联起来
const mimeType =
"application/vnd.openxmlformats-officedocument.wordprocessingml.document";
// 创建包含Document实例和MIME类型的Blob
packer.toBlob(doc).then(blob => {
const docblob = blob.slice(0, blob.size, mimeType);
// 使用file-saver包中的saveAs保存文件
saveAs(docblob, fileName);
});
}
const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
let fileList = inputElement.files;
function handleFiles() {
fileList = this.files; /* 现在您可以使用文件列表进行操作 */
console.log(fileList[0].name);
}
我通过以下方式下载了docx和file-saver：
> npm install docx
> npm install file-saver
以及http-server
我使用http-server来测试我的代码
> http-server -c-1
如何修复此代码中的text/html MIME类型？我尝试更改docx和file-saver的路径，例如
"../package.json/docx"
"docx"
"../node_modules/docx"
等等，但没有起作用，我还尝试使用http-server和VSCode中的live server等其他服务器，但仍然无法解决问题。
英文:
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
答案1
得分: 1
错误与您的 DOCX 相关内容无关。它在请求您的模块时，对js/script.js的响应 MIME 类型进行投诉。显然，http-server 返回text/html作为该内容的类型，这是不允许的；它必须是有效的 JavaScript MIME 类型（例如text/javascript，尽管application/javascript和其他一些类型也可以）。
The http-server documentation 表明您可以传递 --mimetypes 来指定一个包含要使用的 MIME 类型的.types文件，告诉它使用 text/javascript 作为 MIME 类型（可能还带有字符集），尽管它没有告诉您该文件的格式应该是什么（您可能可以从源代码中找出）。或者，您可以考虑使用另一个可以自动处理这个问题的服务器。
英文:
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), although it doesn't tell you what the format of that file should be (you can probably work it out from the source). Or you might consider another server that handles this automatically.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论