时间戳

首页 > 解决方案 > 使用 AppScript 在 WebApp 中打印输出

javascript - 使用 AppScript 在 WebApp 中打印输出

问题描述

function doGet() {
  return HtmlService.createHtmlOutputFromFile("vi");
  // var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
  
}
function doPost() {
  return HtmlService.createHtmlOutputFromFile("vi");
  // var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
  
}




// function from https://stackoverflow.com/a/9733420/3695983                     
function luminance(r, g, b) {
  var a = [r, g, b].map(function (v) {
    v /= 255;
    return v <= 0.03928
      ? v / 12.92
    : Math.pow( (v + 0.055) / 1.055, 2.4 );
  });
  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}

function calculateRatio(color1, color2) {

  // read the colors and transform them into rgb format
  // const color1 = document.querySelector("#color-1").value;
  // const color2 = document.querySelector("#color-2").value;
  const color1rgb = hexToRgb(color1);
  const color2rgb = hexToRgb(color2);

  // calculate the relative luminance
  const color1luminance = luminance(color1rgb.r, color1rgb.g, color1rgb.b);
  const color2luminance = luminance(color2rgb.r, color2rgb.g, color2rgb.b);

  // calculate the color contrast ratio
  const ratio = color1luminance > color2luminance 
  ? ((color2luminance + 0.05) / (color1luminance + 0.05))
  : ((color1luminance + 0.05) / (color2luminance + 0.05));
  

  return ratio;
  // Logger.log(ratio);
}
function hexToRgb(hex) {
  
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

// document.querySelector("btn").addEventListener("click", function() {
//   const ratio = calculateRatio();
//   // show results depending on WCAG requirements
//   const result = `
// AA-level large text: ${ratio < 1/3 ? 'PASS' : 'FAIL' }<br>
// AA-level small text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
// AAA-level large text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
// AAA-level small text: ${ratio < 1/7 ? 'PASS' : 'FAIL' }
// `;
//   document.querySelector("#result").innerHTML = result;
// });
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <label>Foreground Color:</label>  <input type="text" id="color-1"  />
    <label2>BackGround Color:</label2><input type="text" id="color-2"  />

<button id="btn">Calculate Color Contrast</button>

<div id="#result">
  <label>Result : </label>
</div>

<script>

document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
  var fcolor = document.getElementById("color-1").value;
  var bgcolor = document.getElementById("color-2").value;

  google.script.run.withSuccessHandler(ratio => {
    const result = `
    AA-level large text: ${ratio < 1/3 ? 'PASS' : 'FAIL' }<br>
    AA-level small text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
    AAA-level large text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
    AAA-level small text: ${ratio < 1/7 ? 'PASS' : 'FAIL' }`;
    document.getElementById("#result").innerHTML = result;
  }).calculateRatio(fcolor, bgcolor);
}



// document.getElementById("btn").addEventListener("click", function() {
//   const ratio = calculateRatio();
//   // show results depending on WCAG requirements
//   const result = `
// AA-level large text: ${ratio < 1/3 ? 'PASS' : 'FAIL' }<br>
// AA-level small text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
// AAA-level large text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
// AAA-level small text: ${ratio < 1/7 ? 'PASS' : 'FAIL' }
// `;
//   document.querySelector("#result").innerHTML = result;
// });
</script> 
  </body>
</html>

我正在尝试制作一个谷歌脚本网络应用程序，该应用程序从 HTML 表单获取输入并从脚本传递输入。现在，该函数失败了，因为结果值没有打印在 html 页面中。我怎样才能解决这个问题？

但是，当我从部署中运行它时，我没有得到预期的输出。当我输入值并单击按钮时，没有任何反应。不过，这同样适用于 javascript。有人可以帮助我在 Google AppScript 中使用此代码吗？那我如何在 AppScript 的帮助下打印结果输出？

标签： javascripthtmlwebgoogle-apps-scriptgoogle-apps

解决方案

修改点：

  • 当您想从 HTML 端运行 Google Apps 脚本时，请使用google.script.run. 当我看到你的脚本时，它似乎google.script.run被用作注释行。在这种情况下，为了使用从 Google Apps 脚本返回的值，withSuccessHandler使用了。

当以上几点反映到您的脚本时，它变成如下。

修改后的脚本：

请doStuff()进行如下修改。

function doStuff(){
  var fcolor = document.getElementById("color-1").value;
  var bgcolor = document.getElementById("color-2").value;

  google.script.run.withSuccessHandler(ratio => {
    const result = `
    AA-level large text: ${ratio < 1/3 ? 'PASS' : 'FAIL' }<br>
    AA-level small text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
    AAA-level large text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
    AAA-level small text: ${ratio < 1/7 ? 'PASS' : 'FAIL' }`;
    document.getElementById("#result").innerHTML = result;
  }).calculateRatio(fcolor, bgcolor);
}

笔记：

  • 在这种情况下，您的 HTML 和 Javascript 必须包含在 Google Apps 脚本项目中。请注意这一点。
  • 在此修改中，它假设您calculateRatio的 Google Apps 脚本工作正常并返回正确的值。

参考：

推荐阅读