如何编辑我的脚本以定位 div 中的特定 HTML 文本答案

【问题标题】：How to edit my script to target specific HTML text in div如何编辑我的脚本以定位 div 中的特定 HTML 文本
【发布时间】：2019-06-16 07:52:00
【问题描述】：

我只是在学习如何编码。我正在使用一个文本生成器，它允许用户编辑文本并将其导出为.DOCX，我在这个网站npmjs 上找到了这个脚本jsfiddl，这个脚本允许将 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>

【问题讨论】：

标签： javascript html css npm ms-word

【解决方案1】：

如果您想导出#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>

【讨论】：

非常感谢您的回答，但我想将 html 文本导出为带有 html 格式但没有标签的 word 文档是，它被导出为.doc，但不是.docx，结果页面是web layout，而不是A4和Portrait，当我找到这个新脚本时，我希望将HTML文本导出为.docx和@ 987654336@ 和 Portrait 那么如何导出没有类似标签的文本，或者如何编辑我的旧脚本以完成它并感谢您的帮助。