在 Google Sheets 上使用 IMPORTXML 提取图像 URL

Question

我在这里多次看到这个问题，但这是非常不同的。使用 IMPORTXML 寻求帮助的其他请求，操作人员询问如何提取标准 HTML 标签，如 a/href/img/src/ul/li 等。我想要提取的内容嵌入在样式标签中，但它不是t 按预期提取。

在此页面 https://www.northtexasgivingday.org/organization/Salvationarmynorthtexas（以及一系列类似的页面）上，我正在尝试提取各种非营利组织徽标的 URL。

我在 Chrome 开发工具中突出显示徽标并复制 Xpath 或完整的 Xpath - 它不会使用 IMPORTXML 返回预期的徽标 url。

xapth 为 //*[@id="org-logo"]/span 完整的 Xpath 为 /html/body/app-root/mat-sidenav-container/mat-sidenav-content/div[2]/app-organization/div/app-org-page/div/div/div[1 ]/应用横幅/div/div[3]/span

The image is stored in this element:
<span _ngcontent-ng-c332306571="" role="img" applazyload="" class="image set-background ng-star-inserted" aria-label="The Salvation Army North Texaslogo" style="opacity: 0; animation: 0.7s ease-out 0s 1 normal forwards running lazy-load-anim1; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; background-position: center center; background-image: url("https://imagecdn.mightycause.com/36be848e-03bb-47c3-8616-6d51b811e38d/-/format/auto/-/progressive/yes/-/stretch/off/-/preview/&quot;);"></span>

我可以在

下的样式部分中看到该元素中的图像网址

background-image:

如：https://imagecdn.mightycause.com/36be848e-03bb-47c3-8616-6d51b811e38d/-/format/auto/-/progressive/yes/-/stretch/off/-/preview/

我已经尝试了这些公式中的两个 Xapth 选项：

IMPORTXML（“https://www.northtexasgivingday.org/organization/Salvationarmynorthtexas”，“//*[@id='org-logo']/span”）

或

IMPORTXML（“https://www.northtexasgivingday.org/organization/Salvationarmynorthtexas”，“/html/body/app-root/mat-sidenav-container/mat-sidenav-content/div[2]/app-organization/ div/app-org-page/div/div/div[1]/app-banner/div/div[3]/span" ）

这些不起作用。 你们能帮我解决这个问题吗？

Answer 1

当我看到您 URL 的 HTML 时，我注意到 URL

https://imagecdn.mightycause.com/36be848e-03bb-47c3-8616-6d51b811e38d/-/format/auto/-/progressive/yes/-/stretch/off/-/preview/

是由 Javascript 创建的。不幸的是，在这种情况下，不能直接使用 IMPORTXML。但幸运的是，我从 HTML 中的 JSON 数据中找到了图像 URL 为

https://imagecdn.mightycause.com/36be848e-03bb-47c3-8616-6d51b811e38d/

。看起来这个图片和你期望的 URL 是一样的。所以，在这个答案中，我想建议检索 URL。

示例脚本：

在这种情况下，需要使用Google Apps Script。因此，请打开电子表格的脚本编辑器，复制并粘贴以下脚本，然后保存脚本。

使用此脚本时，请将自定义函数

=SAMPLE("https://www.northtexasgivingday.org/organization/Salvationarmynorthtexas")

放入单元格中。这样就返回了图片的URL。

function SAMPLE(url) {
  const res = UrlFetchApp.fetch(url);
  const str = res.getContentText().match(/<script id\="ng-state" type\="application\/json">(.*?)<\/script>/);
  const obj = JSON.parse(str[1]);
  const ar = Object.values(obj).flatMap(v => v?.body?.org_info?.circle_pic || []);
  return ar.length > 0 ? ar[0] : "";
}

测试：

测试此脚本时，得到以下结果。在此示例中，

=SAMPLE("https://www.northtexasgivingday.org/organization/Salvationarmynorthtexas")

被放入单元格“A1”中。并且，

=IMAGE(A1)

被放入单元格“B1”中。

注：

• 此示例脚本适用于您的 URL

  https://www.northtexasgivingday.org/organization/Salvationarmynorthtexas

  。当您更改 URL 时，该脚本可能无法使用。请注意这一点。

• 如果您需要检索类似

  https://imagecdn.mightycause.com/36be848e-03bb-47c3-8616-6d51b811e38d/-/format/auto/-/progressive/yes/-/stretch/off/-/preview/

  的URL，请测试以下脚本。

  function SAMPLE(url) {
    const res = UrlFetchApp.fetch(url);
    const str = res.getContentText().match(/<script id\="ng-state" type\="application\/json">(.*?)<\/script>/);
    const obj = JSON.parse(str[1]);
    const ar = Object.values(obj).flatMap(v => v?.body?.org_info?.circle_pic || []);
    if (ar.length > 0) {
      return `https://imagecdn.mightycause.com/${ar[0].split("/")[3]}/-/format/auto/-/progressive/yes/-/stretch/off/-/preview/`;
    }
    return "";
  }
  

参考：

• Google 表格中的自定义函数