Есть ли способ отобразить изображение в таблице HTML непосредственно из ячейки Google Таблиц?
У меня возникли трудности с отображением изображения в таблице HTML в таблице WebApp, заполненной на основе данных Google Sheets. Вчера я создал публикацию, которая была отмечена как дубликат этой публикации, но я считаю, что требуется другое решение.
Мои данные Google Sheets выглядят так:
В ячейках webapp!B1:B у меня есть изображения по прогнозу на день. Прогноз погоды взят из данных Visual Crossing. Логика формулы примерно такая:
"если прогноз на сегодня "солнечный", выберите картинку в ячейке
Icons!A1, иначе, если прогноз на сегодня «переменная облачность», выберите картинка в клеточкеIcons!A2и т. д.»
Отображаемые изображения представляют собой «изображения в ячейках» в Icons!A1:A.
Мои коды для веб-приложения приведены ниже:
Код.gs
function doGet() {
return HtmlService
.createTemplateFromFile('index')
.evaluate();
}
function getSheetData() {
var ss= SpreadsheetApp.getActiveSpreadsheet();
var dataSheet = ss.getSheetByName('webapp');
var dataRange = dataSheet.getDataRange();
var dataValues = dataRange.getValues();
return dataValues;
}
HTML
<!DOCTYPE html>
<html>
<head>
<base target = "_top">
<link
rel = "stylesheet"
href = "https://ssl.gstatic.com/docs/script/css/add-ons1.css"
/>
<style>
.container {
padding: 35px 7px 0px 7px;
}
.all-tables {
font-size:16px;
background-color: #EFEFEF;
border: 1px solid #EFEFEF;
border-radius: 5px;
width: 310px;
}
th, td {
text-align: left;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
</style>
</head>
<body class = "container">
<link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Poppins">
<style>
body {
font-family: "Poppins", serif;
}
</style>
</head>
<body>
<table class = "all-tables">
<?var tableData = getSheetData();?>
<?for(var i = 0; i < tableData.length; i++) { ?>
<?if (i == 0) { ?>
<tr>
<?for(var j = 0; j < tableData[i].length; j++) { ?>
<th><?= tableData[i][j] ?></th>
<? } ?>
</tr>
<? } else { ?>
<tr>
<?for(var j = 0; j < tableData[i].length; j++) { ?>
<td><?= tableData[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
<? } ?>
</table>
</body>
Проблема с WebApp в том, что изображения не отображаются. Вместо этого изображение заменяется на «CellImage». Смотрите скриншот ниже:
Я попробовал заменить getValues() на getDisplayValues(). Я также попробовал изменить форматирование ячеек в ячейках webapp!B1:B. Кроме того, я попробовал разместить изображения на своем сайте Wordpress и использовать формулу IMAGE(), чтобы поместить изображение в электронную таблицу. Я также попытался заменить изображение только URL-адресом изображения. Это последнее изменение заменяет «CellImage» на URL-адрес, но я все еще не получаю изображение в WebApp.
Возможно ли это? Единственная другая альтернатива, которую я могу придумать, - это попытаться использовать решение из вышеупомянутого поста и включить в сам скрипт логику: «если прогноз солнечный, выберите изображение по этому URL и т. д.». но мне этот подход кажется гораздо более запутанным. А еще я больше разбираюсь в написании логики в формуле, чем в скрипте 😀.
Буду очень признателен за любые рекомендации или предложения, и я прошу прощения за длинный пост.
«Изображения внутри клетки». Мне нужно будет сделать образец таблицы. Дайте мне немного и я добавлю ссылку.
Извините, я попытался улучшить свое исходное сообщение и указал, что требуется другое решение. Я также проголосовал за возобновление публикации поста, но безрезультатно. Сегодня я написал новый пост и попытался перефразировать его, чтобы лучше показать разницу между этими двумя вопросами. Может мне стоило удалить вчерашний пост?
@Wicket, какой-нибудь совет по этому поводу? Должен ли я скопировать содержимое этого сообщения, вставить его во вчерашнее сообщение и удалить это? Или мне удалить вчерашний пост?
Я считаю, что все предыдущие дубликаты были связаны неправильно. Близко связанными дубликатами были stackoverflow.com/questions/75477392/… и stackoverflow.com/questions/75343213/… Тем не менее, я сделал это основным вопросом и снова открыл его. Проблема в том, что URL-адрес CellImage недоступен.
Ответы 1
Изображения при непосредственном добавлении создают уникальный общедоступный URL-адрес (проблема безопасности?) в таблицах Google. В настоящее время эти URL-адреса недоступны напрямую из скрипта приложения. Единственный способ на данный момент — использовать =IMAGE("url") для получения изображений в листе (который, как вы заявили, вы пробовали). Если вы это сделаете, внешние URL-адреса можно будет получить в скрипте приложений с помощью Range.getFormula().
Тем не менее, если вы используете XLOOKUP для получения изображения, получить URL-адрес из ячейки результата формулы все равно невозможно без воссоздания логики формулы внутри скрипта приложения.
Однако есть еще один способ — экспортировать электронную таблицу как xlsx и получить оттуда URL-адрес данных изображения, что является сложным процессом, но для этого можно использовать библиотеку DocsServiceApp от Tanaike . См. образец ответа . Если у вас есть URL-адрес данных, его можно использовать непосредственно в теге привязки HTML как URL-адрес данных
Спасибо. Что касается моего вопроса: Is this something that is possible? следующий комментарий отвечает на вопрос: These urls are not accessible directly from apps script currently. Я рассмотрю метод Танаике в качестве альтернативы.
Можете ли вы поделиться с нами образцом таблицы, содержащей ваши данные (первое изображение)? А можно еще уточнить, находятся ли изображения внутри ячеек? Или изображения находятся над клеткой?