更新/替换Google文档中的嵌入式图像 [英] Update/Replace inline image on Google Document

问题描述

我正在尝试设置一项功能来更新Google文档中的图像，就像Lucidchart附件在其已更新的插入图"功能上所做的一样.为此，我目前正在执行以下操作:

I'm trying to set a feature to update images on a Google Document, the same way Lucidchart Add-on does on its "Updated inserted diagram" feature. For this, I'm current doing the following:

• 创建命名范围并将其ID与数据一起存储在文档属性中以生成图像，以供以后检索.
• 在更新时，调用body.getNamedRangeById()并将元素替换为新生成的图像.

这可行，但是我有以下Lucidchart不会发生的问题:

This works, but I have the following problems that does not happen with Lucidchart:

• 每次更新时，图像后都会添加一个空白行.
• 如果用户将图像拖放到文档中以重新定位，则命名范围"将消失，以后我将无法检索到它.
• 如果用户将图片集中放置，则更新后，图片会回到左侧位置，甚至复制其属性

有人知道有一种很好的策略来替换/更新Google文档上的引用图像吗，与Lucidchart附加更新功能起作用的方式相同吗?

Does anybody knows a good strategy to replace/update a referenced image on Google Docs, the same way Lucidchart add-on update feature works?

谢谢

推荐答案

在移动范围时，NamedRanges确实丢失了，因此它们对您的情况不是很好.但是，没有其他方法可以识别元素(这是Google文档的一个很大的缺点).

NamedRanges indeed get lost when the range is moved, so they're not very good for your scenario. But there's no other way of identifying elements (which is a great misfeature of Google Docs).

对于图片，您可以使用其LINK_URL进行识别，这似乎就是Lucidchart所使用的.它不会妨碍用户，因此它可能是一个很好的解决方案.

In the case of an image you could use its LINK_URL to identify it, which seems to be what Lucidchart uses. It does not get in the way of the user, so it may be a good solution.

关于插入图像时出现空白行并丢失属性，我想(由于尚未共享任何代码)您是将图像直接插入文档主体而不是段落中.然后会自动创建一个段落来包装图像，从而导致空白行和属性丢失.

About getting a blank line and losing attributes when inserting an image, I imagine (since you haven't shared any code) you're inserting the image directly in the document body instead of a paragraph. Then a paragraph gets created automatically to wrap your image resulting in the blank line and lost of attributes.

下面是一些代码示例:

function initialInsert() {
  var data = Charts.newDataTable().addColumn(
    Charts.ColumnType.STRING, 'Fruits').addColumn(
    Charts.ColumnType.NUMBER, 'Amount').addRow(
    ['Apple',15]).addRow(
    ['Orange',6]).addRow(
    ['Banana',14]).build();
  var chart = Charts.newPieChart().setDataTable(data).build();

  var body = DocumentApp.getActiveDocument().getBody()
  body.appendImage(chart).setLinkUrl('http://mychart');
  //here we're inserting directly in the body, a wrapping paragraph element will be created for us
}

function updateImage() {
  var data = Charts.newDataTable().addColumn(
    Charts.ColumnType.STRING, 'Fruits').addColumn(
    Charts.ColumnType.NUMBER, 'Amount').addRow(
    ['Apple',Math.floor(Math.random()*31)]).addRow( //random int between 0 and 30
    ['Orange',Math.floor(Math.random()*31)]).addRow(
    ['Banana',Math.floor(Math.random()*31)]).build();
  var chart = Charts.newPieChart().setDataTable(data).build();

  var img = getMyImg(DocumentApp.getActiveDocument().getBody(), 'http://mychart');
  //let's insert on the current parent instead of the body 
  var parent = img.getParent(); //probably a paragraph, but does not really matter
  parent.insertInlineImage(parent.getChildIndex(img)+1, chart).setLinkUrl('http://mychart');
  img.removeFromParent();
}

function getMyImg(docBody, linkUrl) {
  var imgs = docBody.getImages();
  for( var i = 0; i < imgs.length; ++i )
    if( imgs[i].getLinkUrl() === linkUrl )
      return imgs[i];
  return null;
}

关于link_url，您当然可以像Lucidchart一样做，然后链接回您的站点.因此，这不仅对用户不利.

About the link_url, you could of course do like Lucidchart does and link back to your site. So it's not just broken for the user.

这篇关于更新/替换Google文档中的嵌入式图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！