Как отредактировать мой скрипт для таргетинга на определенный HTML-текст в div - PullRequest
Новая
       25

Как отредактировать мой скрипт для таргетинга на определенный HTML-текст в div

0 голосов
/ 16 июня 2019

Я только учусь кодировать. Я работаю генератором текста, который позволит пользователям редактировать текст и экспортировать его как .DOCX, и я нашел этот скрипт jsfiddl на этом сайте npmjs и этот скрипт позволяет экспортировать HTML в .DOCX, но я не мог понять, как заставить этот скрипт экспортировать HTML-текст в определенную div и для моего примера экспортировать содержимое в <div id="exportContent">?

N.B .: Когда я пытался организовать скрипт в 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>

1 Ответ

0 голосов
/ 16 июня 2019

Если вы хотите экспортировать HTML в #exportContent, передайте innerHTML #exportContent вашему документу. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...