主页 / coding / 问题 / 78980945
Accepted
user3243118
Asked: 2024-09-13 14:41:25 +0800 CST

在 Google 表格中使用 IMPORTXML 提取图片 URL

  • 772

我在这里看到过很多次这样的问题，但这次非常不同。其他使用 IMPORTXML 的帮助请求中，楼主询问的是提取标准 HTML 标签，如 a/href/img/src/ul/li 等。我想要提取的内容嵌入在 style 标签中，但提取结果并不如预期。

在此页面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]/app-banner/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”）

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

xpath

1 个回答

  1. Best Answer

    当我看到您的 URL 的 HTML 时，我注意到该 URLhttps://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 时，此脚本可能无法使用。此外，当网站的规格发生变化时，此脚本可能无法使用。请注意这一点。

    • 如果您需要检索类似的URL https://imagecdn.mightycause.com/36be848e-03bb-47c3-8616-6d51b811e38d/-/format/auto/-/progressive/yes/-/stretch/off/-/preview/，请测试以下脚本。

      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 "";
}

    参考：

    • 0

相关问题