如何将段落标题传递给 html 并返回

Question

我正在尝试编写一个函数，将 google 文档中的段落标题显示到 HTML 侧边栏上，并允许您 select 它们（使用复选框）

按下按钮后，它将从 Google 应用程序脚本中调用一个函数，以特定方式格式化所有标题。

---

详细过程：

1. 用户按下刷新按钮以显示所有段落标题。 Google App 脚本函数（从 HTML 文件调用）获取文档中所有标题的数组。
2. 数组被传递到 HTML 文件，其中 javascript 函数将数组中的每个标题显示为复选框
3. 用户select选中了一些复选框并按下了按钮。 javascript 函数获取每个 selected 复选框的编号，并为每个复选框获取相应的标题（使用数组）
4. 现在，每个标题都被传回 Google 应用脚本，在那里它们都以特定方式格式化（例如：粗体）。

---

问题：将段落标题数组传递到 HTML 文件不起作用，因为段落标题是 google 应用程序脚本的一个功能，因此所有标题 return 传回 Google 应用程序脚本时为空。

有办法解决这个问题吗？

---

我尝试过的事情：

1. 使标题数组成为 GAS 中的全局变量（google 应用程序 脚本）并在应用程序脚本中执行所有操作
   • 不起作用：GAS 中的全局变量是 static 因此每次用户刷新标题或更改文档中的某些内容时，这将不再起作用。
2. 使用 PropertiesService 而不是全局函数
   • 不起作用：仅将字符串作为输入，因此我无法输入需要在文档中格式化的段落标题:(

---

最小可重现示例：

Javascript（在 HTML 文件中）：

google.script.run.withSuccessHandler(paragraphHeadingTest).getParagraphHeadings();
function paragraphHeadingTest(paragraphHeadings) {
  google.script.run.logOutput(paragraphHeadings);
}

Google 应用程序脚本代码：

function getParagraphHeadings() {
  var document = DocumentApp.getActiveDocument().getBody();
  var paragraphs = document.getParagraphs();
  return paragraphs;
}

function logOutput(output) {
  Logger.log(output);
}

Answer 1

我对你的问题的理解如下。

• 问题：将段落标题数组传递到 HTML 文件不起作用，因为段落标题是 google 应用程序脚本的一个功能，因此所有标题 return 当它们传回 Google 应用程序脚本时为空。
• 例如，如果我想给它加下划线，我需要做element.editAsText.setUnderline(true);。

修改点：

• 我认为您的问题的原因是 getParagraphs() return 是 Class 的 object 段落。
  • 为了发送到Javascript端，发送字符串类型怎么样？
• 当要检索段落的header时，需要检查该段落是否为header。 当你的脚本修改后，下面的修改怎么样？
• 在识别段落时，使用段落的索引。

修改后的脚本：

在本次修改中，修改了Google Apps Script端的getParagraphHeadings()。

Google Apps 脚本端：

从

function getParagraphHeadings() {
  var document = DocumentApp.getActiveDocument().getBody();
  var paragraphs = document.getParagraphs();
  return paragraphs;
}

function logOutput(output) {
  Logger.log(output);
}

到：

function getParagraphHeadings() {
  var document = DocumentApp.getActiveDocument().getBody();
  var paragraphs = document.getParagraphs();
  return paragraphs.reduce((ar, e, i) => {
    if (e.getHeading() == DocumentApp.ParagraphHeading.HEADING1) ar.push({text: e.getText(), index: i});
    return ar;
  }, []);
}

function logOutput(index) {
  var document = DocumentApp.getActiveDocument().getBody();
  var paragraph = document.getParagraphs()[index];
  paragraph.editAsText().setUnderline(true);
}

HTML&Javascript 边:

从：

google.script.run.withSuccessHandler(paragraphHeadingTest).getParagraphHeadings();
function paragraphHeadingTest(paragraphHeadings) {
  google.script.run.logOutput(paragraphHeadings);
}

到：

google.script.run.withSuccessHandler(paragraphHeadingTest).getParagraphHeadings();
function paragraphHeadingTest(paragraphHeadings) {

  // do something

  const index = 5; // For example, when the index of 5 is selected, the index is sent to Google Apps Script.
  google.script.run.logOutput(index);
}

• 在此修改中，检索具有 HEADING1 的段落作为文本类型。如果你想要其他header如HEADING2, HEADING3,,,，请修改脚本。
• getParagraphHeadings() return 类似于 [{"text":"sample text1","index":1},{"text":"sample text2","index":5},,,] 的 object。当段落的索引从 HTML 端发送到 Google Apps 脚本时，可以使用索引检索段落。

参考文献：

• getParagraphs()
• getHeading()