如何在Word JS插件中用JavaScript删除文档末尾插入的HTML表格内容？

开发者阿泽

2026-7-9

无法删除通过HTML插入到Word的内容

我通过HTML在Word文档末尾插入了包含表格的格式化内容，用NewMap函数实现插入逻辑，但DeleteMap函数只能删除末尾的普通文本，无法删除插入的HTML内容。

原插入函数（NewMap）

async function NewMap() {
    try {
        await Word.run(async (context) => {
            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 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>`;

            lastparagrsph.insertHtml(htmlContent, 'End');
            await context.sync();
        });

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

原删除函数（DeleteMap，无法删除HTML内容）

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();

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

问题原因

原删除函数只删除了文档的最后一个段落，但插入的HTML内容包含多个段落、表格等多种元素，这些元素并非集中在单个段落里，因此仅删除最后一段无法清除所有插入内容。

解决方案

方案一：插入时添加书签（推荐，定位精准）

修改NewMap函数，在插入HTML后给内容添加唯一书签，删除时通过书签定位并删除整个插入内容。

修改后的NewMap函数

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

            // 记录插入前的段落总数
            const initialParaCount = paragraphs.items.length;

            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>`;

            // 在文档末尾插入HTML
            body.insertHtml(htmlContent, 'End');
            await context.sync();

            // 获取插入内容的范围并添加书签
            const updatedParagraphs = body.paragraphs;
            context.load(updatedParagraphs, 'length');
            await context.sync();

            const startPara = updatedParagraphs.items[initialParaCount];
            const endPara = updatedParagraphs.items[updatedParagraphs.items.length - 1];
            const contentRange = body.getRange(startPara.start, endPara.end);
            
            // 添加唯一书签标记插入内容
            contentRange.bookmarks.add('InsertedMapContent');

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

对应的DeleteMap函数

async function DeleteMap() {
    try {
        await Word.run(async (context) => {
            const bookmarks = context.document.bookmarks;
            context.load(bookmarks);
            await context.sync();

            // 查找标记插入内容的书签
            const targetBookmark = bookmarks.items.find(b => b.name === 'InsertedMapContent');
            if (targetBookmark) {
                // 删除书签对应的所有内容
                targetBookmark.getRange().delete();
                // 可选：移除书签本身
                targetBookmark.delete();
            }

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

方案二：根据固定结构批量删除（无需修改插入逻辑）

如果插入的HTML结构固定，可统计其生成的段落数和表格数量，批量删除对应元素。

修改后的DeleteMap函数

async function DeleteMap() {
    try {
        await Word.run(async (context) => {
            var body = context.document.body;
            var paragraphs = body.paragraphs;
            var tables = body.tables;
            
            // 加载段落和表格数据
            context.load(paragraphs, 'length');
            context.load(tables);
            await context.sync();

            // 插入的HTML对应5个段落，从倒数第5段开始删除到末尾
            const startDeleteIndex = paragraphs.items.length - 5;
            if (startDeleteIndex >= 0) {
                const startRange = paragraphs.items[startDeleteIndex].getRange('Start');
                const endRange = paragraphs.items[paragraphs.items.length - 1].getRange('End');
                const fullParaRange = body.getRange(startRange.start, endRange.end);
                fullParaRange.delete();
            }

            // 删除最后一个表格（插入的HTML仅包含一个表格）
            if (tables.items.length > 0) {
                const lastTable = tables.items[tables.items.length - 1];
                lastTable.delete();
            }

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

说明

方案一通过书签标记内容，不受HTML结构变化影响，定位更精准，优先推荐。
方案二依赖固定的HTML结构，若后续修改HTML内容，需同步调整段落数和表格数量参数。

内容的提问来源于stack exchange，提问作者Junaid Azhar

如何在Word JS插件中用JavaScript删除文档末尾插入的HTML表格内容？

原插入函数（NewMap） #

原删除函数（DeleteMap，无法删除HTML内容） #

问题原因 #

解决方案 #

方案一：插入时添加书签（推荐，定位精准） #