Блог

Главная - Вопросы по программированию - Любой html-код, который может применять тот же формат валюты, который мы настроили в Google sheet / GAS?

Любой html-код, который может применять тот же формат валюты, который мы настроили в Google sheet / GAS?

#javascript #html #css #google-apps-script #number-formatting

#javascript #HTML #css #google-apps-script #форматирование чисел

Вопрос:

У меня есть таблица из 2 столбцов в Google Sheet. 2-й столбец состоит из платежей, значения которых могут меняться в зависимости от ввода пользователем через Google form и суммирования с использованием GAS. xtrasvc
Затем эта таблица gsheet будет преобразована в html с помощью GAS и отправлена по электронной почте в виде отчета. При преобразовании таблицы gsheet в html строки данных фильтруются для отображения только строк данных, для которых 2-й столбец не является нулевым значением. Благодаря @Tanaike, скрипт фильтрации, как показано ниже:

 var tableRangeValues=xtraqsheet.getRange(2,1,5,2).getDisplayValues();

var forhtmlemail=HtmlService.createTemplateFromFile("extrasvcitem");

forhtmlemail.tableRangeValues = tableRangeValues.filter(([,b]) => b.toString()!=0 amp;amp; b.toString()!='0' amp;amp; b.toString()!='' amp;amp; b.toString()!='RM - ' amp;amp; b.toString()!='-');

Критерии фильтрации, объявленные в приведенной выше строке кода, похоже, не работают, когда я меняю формат валюты платежей на пользовательский формат, который совпадает с форматом учета по умолчанию в excel / gsheet, где символ валюты всегда будет отображаться в крайнем левом углу ячейки, а цифры всегда будут отображаться в таблице.отображается в крайнем правом углу ячейки. Результат, который я ожидал, выглядит следующим образом (в формате html). Я хочу поддерживать тот же пользовательский формат и просто показывать ненулевые строки данных:-
ожидаемый результат

мой html-код для этой таблицы :-

 <tbody style="border-style: none solid solid;border-color: #3E1176">

<?tableRangeValues.forEach((r,i)=>{
let color;
if(i%2===0){color="white"}else{color="#F6EFFE"}?>
<tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:10pt;background-color:<?=color?>;">
      <td style="width: 52.7272%;"><?=r[0]?></td>
      <td style="width: 36.0039%;"><?=r[1]?></td>
</tr>
<?})?>
</tbody>

Достижимо ли это? Я попытался вставить accounting.js сценарий библиотеки в теле html, но это привело к пробелам для всех строк. Был бы признателен за помощь. Спасибо.

Комментарии:

1. Чтобы правильно понять вашу текущую ситуацию и вашу цель, можете ли вы предоставить образец электронной таблицы? К сожалению, я не могу понять ваши верхние и нижние изображения.

2. Я отредактировал содержание своего вопроса, мистер @Tanaike . Надеюсь, вам достаточно понимания моих целей. Спасибо.

3. Спасибо за ответ и добавление дополнительной информации. Исходя из информации, я предложил модифицированный скрипт в качестве ответа. Не могли бы вы подтвердить это, пожалуйста? Если это было не то направление, которое вы ожидали, я приношу свои извинения.

Ответ №1:

Я считаю, что ваша цель заключается в следующем.

  • Вы хотите добиться преобразования верхнего изображения в нижнее изображение с помощью Google Apps Script.
  • В приведенной выше таблице столбец "B" отформатирован в числовом формате.

Точки модификации:

  • К сожалению, я не могу понять весь ваш сценарий. Но я предполагаю, что вы можете извлекать значения с помощью getValues() . В этом случае я думаю, что форматированные значения не сохраняются. Итак, в вашем случае я хотел бы предложить использовать getDisplayValues() вместо getValues() . При этом форматированные значения сохраняются.
    • Когда getDisplayValues() используется, значения можно проверить с помощью регулярного выражения.
  • И в вашем HTML тег of <table></table> не используется.

Когда вышеуказанные пункты отражены в вашем скрипте, это выглядит следующим образом.

Модифицированный скрипт:

Сторона скрипта Google Apps:

 const sheetName = "Sheet1"; // Please set the sheet name.

const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet = ss.getSheetByName(sheetName);
const tableRangeValues = sheet.getRange("A2:B9").getDisplayValues();
const forhtmlemail=HtmlService.createTemplateFromFile("i17");
forhtmlemail.tableRangeValues = tableRangeValues.filter(([,b]) => !(/^[RM -] $/.test(b)));
const res = forhtmlemail.evaluate().getContent();
console.log(res)
  • В этом примере скрипта значения извлекаются из ячеек "A2: B9" на "Sheet1". Поэтому, пожалуйста, измените это для вашей реальной ситуации.
  • Если вы хотите включить заголовок, пожалуйста, измените A2:B9 на A1:B9 .

Сторона HTML и Javascript:

 <tbody style="border-style: none solid solid;border-color: #3E1176">
  <table>
    <?tableRangeValues.forEach((r,i,a)=>{
let color;
if(i%2===0){color="white"}else{color="#F6EFFE"}?>
    <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:10pt;background-color:<?=color?>;">
      <td style="width: 52.7272%;" align="<? if (i == a.length - 1) {?> <?='right'?> <? } else { ?> <?='left'?> <?}?>"><?=r[0]?></td>
      <td style="width: 36.0039%; text-align-last: justify;">
        <?!=r[1]?>
      </td>
    </tr>
    <?})?>
  </table>
</tbody>

Результат:

При использовании вышеизложенного модифицированного скрипта может быть получен следующий результат.

 <tbody style="border-style: none solid solid;border-color: #3E1176">
  <table>
    <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:10pt;background-color:white;">
      <td style="width: 52.7272%;" align=" left ">Custom packaging request</td>
      <td style="width: 36.0039%; text-align-last: justify;"> RM 12,345.00 </td>
    </tr>
    <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:10pt;background-color:#F6EFFE;">
      <td style="width: 52.7272%;" align=" left ">Change of license plate</td>
      <td style="width: 36.0039%; text-align-last: justify;"> RM 1,234.00 </td>
    </tr>
    <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:10pt;background-color:white;">
      <td style="width: 52.7272%;" align=" left ">Car wash mobile service</td>
      <td style="width: 36.0039%; text-align-last: justify;"> RM 123.00 </td>
    </tr>
    <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:10pt;background-color:#F6EFFE;">
      <td style="width: 52.7272%;" align=" left ">Personal drive service</td>
      <td style="width: 36.0039%; text-align-last: justify;"> RM 20.00 </td>
    </tr>
    <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:10pt;background-color:white;">
      <td style="width: 52.7272%;" align=" left ">Change of security ID</td>
      <td style="width: 36.0039%; text-align-last: justify;"> RM 2.00 </td>
    </tr>
    <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:10pt;background-color:#F6EFFE;">
      <td style="width: 52.7272%;" align=" right ">TOTAL</td>
      <td style="width: 36.0039%; text-align-last: justify;"> RM 13,724.00 </td>
    </tr>
  </table>
</tbody>

Примечание:

  • В приведенном выше сценарии предполагается, что столбец "B" вашей примерной таблицы задается числовым форматом like RM 12,345.00 . Если это неверно, приведенный выше скрипт не может быть использован. Пожалуйста, будьте осторожны с этим.

Ссылки:

Комментарии:

1. Большое вам спасибо за такой подробный, рабочий и организованный ответ, @Tanaike! Работает как всегда!

2. @dell Спасибо за ответ. Я рад, что ваша проблема была решена. И вам спасибо.

3. Извините, что снова поднимаю этот вопрос, г-н @Tanaike . Хотелось бы понять, что это a представляет в этой строке HTML-кода align="<? if (i == a.length - 1) {?> <?='right'?> <? } else { ?> <?='left'?> <?}?>" ? Потому что, когда я попытался применить его в другой таблице с 4 столбцами вместо 2, кажется, что он не отображается так, как вы сделали для меня в ответе выше. Я пробовал использовать его в каждом <td style> , но все равно без разницы. Спасибо.

4. Или если кто-нибудь, кто знает и может поделиться более подробной информацией об этом, будет очень признателен. Tq!

5. Я обнаружил кое-что странное. Я удалил эту строку кода align="<? if (i == a.length - 1) {?> <?='right'?> <? } else { ?> <?='left'?> <?}?>" и просто сохранил <td style = "text-align-last:justify;" , вывод по-прежнему выровнен так, как я хотел, чтобы это было раньше. Но этого не происходит с моей другой таблицей с большим количеством столбцов. Так странно .... 🙁

Ответ №2:

Вы пробовали toFixed function в javascript?

 (19085.57).toFixed(2).replace(/d(?=(d{3}) .)/g, '$amp;,'); // 19,085.57

Комментарии:

1. Извините, это не приведет к отображению RM таким, каким я хочу, чтобы он был.