如何使用javascript从word文档页面删除表格设计？ Word js 插件

Question

我正在从表格 html 的 word 文档最后一页插入表格设计。我怎样才能删除它 这是我的代码

  async function NewMap() {
      try {
          await Word.run(async (context) => {  /*--html to word- https://stackoverflow.com/q/66576869  //-- word to html--- https://wordtohtml.net/   */
              var body = context.document.body;
              var paragraphs = body.paragraphs;
              context.load(paragraphs, 'length, last');
              await context.sync();

              const lastparagrsph = paragraphs.items[paragraphs.items.length - 1]
              // var selection = context.document.getSelection();
              var htmlContent = `<h4 style='margin-top:0in;margin-right:0in;margin-bottom:12.0pt;margin-left:0in;font-size:21px;font-family:"Calibri",sans-serif;color:black;'>Map Title</h4>
       <div style = 'margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;border:none;border-top:solid black 1.0pt;padding:0in 0in 0in 0in;margin-left:86.0pt;margin-right:0in;' >
       <p style='margin-top:12.0pt;margin-right:0in;margin-bottom:0in;margin-left:0in;text-align:right;text-indent:0in;border:none;padding:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-style:italic;'>&nbsp;</p>
        </div >
      <table style="width: 100%;border: none;border-collapse:collapse;">
      <tbody>
      <tr>
      <td style="width: 0.68%;padding: 0in 5.4pt;vertical-align: top;">
          <h5 style='margin:0in;font-size:15px;font-family:"Calibri",sans-serif;color:black;'>&nbsp;</h5>
      </td>
      <td style="width: 3.04%;padding: 0in 5.4pt;vertical-align: top;">
          <p style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;'>&nbsp;</p>
      </td>
      </tr>
     </tbody>
     </table>
     <p></p>
     <div style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;border:none;border-top:solid black 1.0pt;padding:0in 0in 0in 0in;margin-left:86.0pt;margin-right:0in;'>
     <p style='margin-top:12.0pt;margin-right:0in;margin-bottom:0in;margin-left:0in;text-align:right;text-indent:0in;border:none;padding:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-style:italic;'>&nbsp;</p>
     </div>
     <p><br></p>`;

              // selection.insertHtml(htmlContent, 'End');
              lastparagrsph.insertHtml(htmlContent, 'End');

              await context.sync();
          });

      } catch (error) {
          console.log(error);
      }


  };

我正在使用这个方法来删除

 async function DeleteMap() {
     try {
         await Word.run(async (context) => {
             var body = context.document.body;
             var paragraphs = body.paragraphs;
             context.load(paragraphs, 'length, last');
             await context.sync();

             const lastParagraph = paragraphs.items[paragraphs.items.length - 1];
             const range = lastParagraph.getRange();

             // Delete the range to remove the inserted HTML content
             range.delete();

             await context.sync();
         });
     } catch (error) {
         console.log(error);
     }
 }

如果有任何文本，则删除，但不删除我插入的 html 我想删除我插入的 htmlContent。

Answer 1

在您的代码中，您插入了多个包含 HTML 内容的段落，包括表格和其他元素。要删除它们，您应该识别并删除这些段落中的每一个。

使用

delete

对象的

Range

方法删除插入的 HTML 内容。检查这个链接。

• 在要删除的 HTML 内容周围添加唯一标识符（例如，特定的 HTML 注释或占位符）。然后，您可以在最后一段中搜索该标识符并相应地删除内容。

var htmlContent = `<h4 style='margin-top:0in;margin-right:0in;margin-bottom:12.0pt;margin-left:0in;font-size:21px;font-family:"Calibri",sans-serif;color:black;'>Map Title</h4>
<!-- StartMyCustomContent -->
<div style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;border:none;border-top:solid black 1.0pt;padding:0in 0in 0in 0in;margin-left:86.0pt;margin-right:0in;'>
   <p style='margin-top:12.0pt;margin-right:0in;margin-bottom:0in;margin-left:0in;text-align:right;text-indent:0in;border:none;padding:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-style:italic;'>&nbsp;</p>
</div>
<table style="width: 100%;border: none;border-collapse:collapse;">
   <!-- Some table content here -->
</table>
<p></p>
<div style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;border:none;border-top:solid black 1.0pt;padding:0in 0in 0in 0in;margin-left:86.0pt;margin-right:0in;'>
   <p style='margin-top:12.0pt;margin-right:0in;margin-bottom:0in;margin-left:0in;text-align:right;text-indent:0in;border:none;padding:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-style:italic;'>&nbsp;</p>
</div>
<p><br></p>
<!-- EndMyCustomContent -->`;

• 修改您的

  DeleteMap

  函数以搜索并删除自定义评论标签之间的内容。

async function DeleteMap() {
     try {
         await Word.run(async (context) => {
             var body = context.document.body;
             var paragraphs = body.paragraphs;
             context.load(paragraphs, 'length, last');
             await context.sync();

             const lastParagraph = paragraphs.items[paragraphs.items.length - 1];

             // Find the custom comment tags
             const startTag = '<!-- StartMyCustomContent -->';
             const endTag = '<!-- EndMyCustomContent -->';

             // Get the HTML content of the paragraph
             const paragraphHtml = lastParagraph.getHtml();

             // Check if the custom tags are present
             if (paragraphHtml.indexOf(startTag) !== -1 && paragraphHtml.indexOf(endTag) !== -1) {
                 // Remove the content between the custom tags
                 const startIndex = paragraphHtml.indexOf(startTag);
                 const endIndex = paragraphHtml.indexOf(endTag) + endTag.length;
                 lastParagraph.insertHtml(paragraphHtml.substring(0, startIndex) + paragraphHtml.substring(endIndex));
             }

             await context.sync();
         });
     } catch (error) {
         console.log(error);
     }
}