我正在学习如何编码。我正在使用一个文本生成器，它允许用户编辑文本并将其导出为 .DOCX我找到了这个脚本 jsfiddl在本网站npmjs这个脚本允许将 HTML 导出到 .DOCX但我不知道如何让这个脚本在特定的 div 中导出 HTML 文本对于我的示例，导出内容在 <div id="exportContent"> 中？
注意:当我尝试将 jsfiddl 中的脚本组织为 html 和 javascript 时，它不起作用。
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/docx@4.0.0/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>最佳答案
如果要导出 #exportContent 中的 HTML , 传递 #exportContent 的 innerHTML到您的文档。
function generate() {
const doc = new Document();
// this is what you want to export
let exportThis = document.getElementById("exportContent").innerHTML
const paragraph = new Paragraph(exportThis);
doc.addParagraph(paragraph);
const packer = new Packer();
packer.toBlob(doc).then(blob => {
console.log(blob);
saveAs(blob, "example.docx");
console.log("Document created successfully");
});
}<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/docx@4.0.0/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>
<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>如果您希望您的用户能够编辑文本，您需要使用 <div> 以外的其他东西。 .
function generate() {
const doc = new Document();
// this is what you want to export
let exportThis = document.getElementById("exportContent").value
const paragraph = new Paragraph(exportThis);
doc.addParagraph(paragraph);
const packer = new Packer();
packer.toBlob(doc).then(blob => {
console.log(blob);
saveAs(blob, "example.docx");
console.log("Document created successfully");
});
}textarea {
margin-top:2em;
width:100%;
}<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/docx@4.0.0/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>
<textarea id="exportContent">
-----------------Whatever you type here will be exported--------------------
</textarea>
</body>
</html>关于javascript - 如何编辑我的脚本以定位 div 中的特定 HTML 文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56614571/