Question

我正在学习编码。我正在使用一个文本生成器，它将允许用户编辑文本并将其导出为.DOCX，并且在此网站{{3}上找到了此脚本jsfiddl }，并且此脚本允许将HTML导出到.DOCX，但是我不知道如何使此脚本在特定的div中导出HTML文本，而在我的示例中，如何在<div id="exportContent">中导出内容？< / p>

注意：当我尝试将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>

Answer 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>

如何编辑脚本以将div中的特定HTML文本定位为目标

1 个答案: