UiApp已弃用求助：Google表格脚本报错需改用HtmlService

Yep, this is a super common problem—lots of developers who built scripts with UiApp ran into this once Google sunset the service entirely. Don’t worry, switching to HtmlService (the replacement Google recommends) is straightforward. Here’s how to update your export feature:

Step 1: Create an HTML Dialog File #

First, make a new HTML file in your script editor (go to File > New > HTML file and name it something like ExportDialog). This will replace the UiApp interface you had before. Paste this basic template (you can tweak the styling to match your original setup):

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .dialog-content { padding: 2rem; text-align: center; }
      .export-button {
        padding: 0.8rem 1.5rem;
        background-color: #1a73e8;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1rem;
      }
      .export-button:hover { background-color: #1557b0; }
    </style>
  </head>
  <body>
    <div class="dialog-content">
      <h2>Export Data</h2>
      <button class="export-button" onclick="runExport()">Start Export</button>
    </div>

    <script>
      function runExport() {
        // Call your export logic in the .gs script
        google.script.run
          .withSuccessHandler(() => google.script.host.close())
          .withFailureHandler(error => alert(`Export failed: ${error.message}`))
          .handleExport(); // Replace with your actual export function name
      }
    </script>
  </body>
</html>

Step 2: Update Your .gs Script #

Replace your old UiApp initialization code (var app = UiApp.createApplication().setTitle('Export');) with code that loads the HTML dialog instead. Here’s what that looks like:

function showExportDialog() {
  const htmlDialog = HtmlService.createHtmlOutputFromFile('ExportDialog')
    .setTitle('Export'); // Matches your original title
  
  SpreadsheetApp.getUi().showModalDialog(htmlDialog, 'Export');
}

// Keep your existing export logic here (rename to match the HTML call if needed)
function handleExport() {
  // Paste your original data export code here:
  // e.g., fetching sheet data, generating a CSV/PDF, triggering a download, etc.
}

Key Tips #

• Any user interactions you had in UiApp (like button clicks, form inputs) will now be handled via google.script.run in the HTML file—this is how the frontend (HTML) communicates with your backend script (.gs).
• If your original UiApp had more complex elements (like dropdowns or text inputs), you can add those to the HTML file and pass values back to the .gs script using google.script.run with parameters.
• Test the updated script thoroughly to make sure your export logic works seamlessly with the new dialog.

内容的提问来源于stack exchange，提问作者EgzonArifi