Script Lab 08:单词“卡拉OK”,Word 基础操作

简介: Script Lab 08:单词“卡拉OK”,Word 基础操作

准备工作

今天开始做一个 Word 的例子。基础部分是相同的,区别仅仅在于 Word API 的部分。还记得第一次我们代码的第一行从 Excel.run 开始,这里相应要换成 Word.run 。其它部分均是相同的,包括所有的引用,区别只在 Word 对像本身了。

本次示例的代码是将一个段落拆分为单词范围,然后遍历所有范围以格式化每个单词,从而产生“卡拉OK”效果。以下是源码地址(如果无法打开,请参考前期06的技巧提示部分):

https://gist.github.com/JuaneloJuanelo/92d7b4978e3487fc593a39a7a8128a30

运行效果如下:

image.png

代码

【代码解析】

取得段落:

let paragraph = context.document.body.paragraphs.getFirst();

拆分单词:

let words = paragraph.split([" "], true , true);

改变颜色:

words.items[i - 1].font.highlightColor = "#FFFFFF";

words.items[i].font.highlightColor = "#FFFF00";

延时效果:

await pause(200);


$("#setup").click(() => tryCatch(setup));
$("#highlight").click(() => tryCatch(highlightWords));
async function highlightWords() {
  await Word.run(async (context) => {
    let paragraph = context.document.body.paragraphs.getFirst();
    let words = paragraph.split([" "], true /* trimDelimiters*/, true /* trimSpaces */);
    words.load("text");
    await context.sync();
    for (let i = 0; i < words.items.length; i++) {
      if (i >= 1) {
        words.items[i - 1].font.highlightColor = "#FFFFFF";
      }
      words.items[i].font.highlightColor = "#FFFF00";
      await context.sync();
      await pause(200);
    }
  });
}
function pause(milliseconds) {
  return new Promise((resolve) => setTimeout(resolve, milliseconds));
}
async function setup() {
  await Word.run(async (context) => {
    context.document.body.clear();
    context.document.body.insertParagraph(
      "Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.",
      "Start"
    );
    context.document.body.paragraphs
      .getLast()
      .insertText(
        "To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching Online cover page, header, and sidebar. Click Insert and then choose the Online elements you want from the different Online galleries.",
        "Replace"
      );
    await context.sync();
  });
}
async function tryCatch(callback) {
  try {
    await callback();
  } catch (error) {
    OfficeHelpers.UI.notify(error);
    OfficeHelpers.Utilities.log(error);
  }
}


代码图示:

image.png


后记


有一段非常重要的代码,前面没有提到:


    words.load("text");

    这里是与 VBA/VSTO 不同的地方。我们先来看一下,如有注释掉这句代码会怎么样?


      PropertyNotLoaded: 属性“items”不可用。
      读取属性的值之前,请先对包含对象调用 load 方法,
      再对关联的请求上下文调用 "context.sync()"。

      对于读回 Word 数据,所有的对象都有一个特殊命令 object.load(properties) 。而其中的 “text” 正是 word 对象下的 text 属性。其实一次可以加入多个属性,鉴于这个部分相对复杂,以后专题介绍,目前只需注意:避免加载不需要的属性

      相关文章
      |
      前端开发
      #yyds干货盘点 【React工作记录十五】关于ant design中input限制加空格的问题
      #yyds干货盘点 【React工作记录十五】关于ant design中input限制加空格的问题
      143 0
      #yyds干货盘点 【React工作记录十五】关于ant design中input限制加空格的问题
      |
      前端开发
      #yyds干货盘点 【React工作记录八】如何限制ant design的input只能输入数字
      #yyds干货盘点 【React工作记录八】如何限制ant design的input只能输入数字
      435 0
      |
      机器学习/深度学习 Shell Python
      [oeasy]python0022_框架标题的制作_banner_结尾字符串_end
      [oeasy]python0022_框架标题的制作_banner_结尾字符串_end
      82 0
      [oeasy]python0022_框架标题的制作_banner_结尾字符串_end
      Go 开发常用操作技巧--字符串
      Go 语言字符串的字节使用的是UTF-8编码,是一种变长的编码方式。使用1~4个字节表示一个符号,根据不同的符号而变化字节长度。
      202 0
      Go 开发常用操作技巧--字符串
      |
      前端开发
      #yyds干货盘点# Vue+Element!一千字带你编写合理的编辑,查看,新建!
      #yyds干货盘点# Vue+Element!一千字带你编写合理的编辑,查看,新建!
      92 0
      |
      存储 算法 JavaScript
      #私藏项目实操分享# 1000字带你学会 Go maps
      #私藏项目实操分享# 1000字带你学会 Go maps
      |
      编译器 Shell 测试技术
      Go 语言入门很简单--技巧和窍门(Tips and Tricks)
      Go 语言入门很简单--技巧和窍门(Tips and Tricks)
      153 0
      Go 语言入门很简单--技巧和窍门(Tips and Tricks)
      |
      前端开发
      #私藏项目实操分享#【React工作记录八】如何限制ant design的input只能输入数字
      #私藏项目实操分享#【React工作记录八】如何限制ant design的input只能输入数字
      318 0
      |
      前端开发
      #私藏项目实操分享# 【React工作记录十五】关于ant design中input限制加空格的问题
      #私藏项目实操分享# 【React工作记录十五】关于ant design中input限制加空格的问题
      172 0
      #私藏项目实操分享# 【React工作记录十五】关于ant design中input限制加空格的问题