Назначить ссылку на HTML-кнопку на ГАЗЕ

ProgramBox

Назначить ссылку на HTML-кнопку на ГАЗЕ

Post author:admin
Запись опубликована:17 января, 2022
Post category:Вопросы по программированию

#javascript #html #google-apps-script

Вопрос:

ОБНОВЛЕНИЕ: Спасибо всем за вашу помощь, особенно ale13. Я обновил вопрос окончательным кодом, который сработал для меня.

Я пытаюсь создать HTML-кнопку, которая появляется в моих таблицах Google, и по щелчку она должна инициировать загрузку листа. Я создал кнопку, и все остальное работает идеально. Когда я вручную сгенерирую ссылку и нажму на нее, файл загрузится. Однако, когда я нажимаю на кнопку, ничего не происходит.

Это код для запуска HTML.

 function downloadPopup(){
  var html = HtmlService.createHtmlOutputFromFile('Button');
  SpreadsheetApp.getUi().showModalDialog(html, 'Download Lists as CSV');
}

Настройка и получение свойства

 PropertiesService.getScriptProperties().setProperty('urlD', downloadURL);

 function urlHTML(){
  return PropertiesService.getScriptProperties().getProperty('urlD');
}

Это HTML

 <!DOCTYPE html>
<html>
  <head>
    <base target="_center">
  <style>
.
.
.
</style>
  </head>
  <script>
    var downloadURL = PropertiesService.getScriptProperties().getProperty('urlD');
    function downloadFile(downloadURL){
      window.open(downloadURL);
    }
  </script>
  <body>
    <div id="buttonlink"></div>
    <button type="button" onclick="google.script.run.withSuccessHandler(downloadFile).urlHTML()" class="button">Download CSV</button>
  </body>
</html>

Большое спасибо!

Ответ №1:

Я предлагаю вам изменить код следующим образом:

Code.gs

 function downloadPopup(){
  var html = HtmlService.createHtmlOutputFromFile('Button');
  SpreadsheetApp.getUi().showModalDialog(html, 'Download Lists as CSV');
}

function urlHTML(){
  return downloadURL;
}

Button.html

 <!DOCTYPE html>
<html>
  <head>
    <base target="_center">
  <style>
</style>
  </head>
  <script>
    function downloadFile(downloadURL){
      window.open(downloadURL, '_self');
    }
  </script>
  <body>
   <div id="buttonLink"></div>
   <button type="button" onclick="google.script.run.withSuccessHandler(downloadFile).urlHTML()">Preview The Document</button>
  </body>
</html>

Если вам действительно не нужны две разные функции для возврата URL-адреса, я бы посоветовал вам использовать только одну, которая будет возвращать URL-адрес непосредственно при вызове. В качестве примечания важно иметь в виду, что глобальные переменные сценария приложений отличаются от переменных в других языках программирования — каждый новый вызов функций приведет к возвращению в сценарий нового контекста без памяти о предыдущих исполнениях, если они не были сохранены. Для правильного хранения глобальной переменной я предлагаю вам взглянуть на этот класс.

Что касается HTML-части, то при нажатии на кнопку withSuccessHandler(downloadFile) можно указать функцию обратного вызова на стороне клиента, которая будет выполняться, когда функция urlHTML() сервера ответит. Для того, чтобы открыть ссылку в новом окне, window.open была использована ссылка.

Ссылка

Приложения Поддерживают связь между клиентом и сервером.

1. Спасибо тебе, але13! Это сработало! Однако для открытия другой страницы и загрузки файла требуется много секунд. Когда я сделал это с помощью гиперссылки, это было очень быстро. Я также пытался воспользоваться услугой недвижимости, но она не сработала, как только я это сделал. Я создал свойство PropertiesService.getScriptProperties().setProperty(‘urlD’, downloadUrl);, затем в HTML я попытался его вызвать. Это не сработало, поэтому я создал var в HTML и использовал его в функции загрузки файла. Это тоже не сработало. У вас есть какие-нибудь советы, как быстро начать загрузку и работать с собственностью? Спасибо!

2. Вам нужно будет установить свойство с помощью setProperty , а затем извлечь его с помощью getProperty — после этого вместо возврата downloadURL переменной вы вернете только что полученное свойство 🙂 Что касается медленной загрузки файла, это может быть вызвано чем-то с вашей стороны, так как я смог быстро начать загрузку.

3. Большое вам спасибо @ale13! Сейчас он работает идеально! Я немного запутался с withSuccessHandler(downloadFile).urlHTML() тем, как и как вставить свойство в downloadFile() функцию. Я не понимаю, почему мы добавляем .urlHTML() после withSuccessHandler , потому что похоже, что он ничего не делает. downloadFile() Функция делает все. Знаете ли вы функцию, позволяющую начать загрузку, не открывая другую вкладку?

4. Вы можете использовать '_self' атрибут с window.open — window.open(downloadURL,'_self') . Это должно мгновенно запустить загрузку, не открывая новую вкладку.

5. Спасибо тебе, але13! Это сработало идеально, и работает именно так, как мне было нужно! Ты такой хороший! Спасибо!

Ответ №2:

 <input type="button" value="Download CSV" onclick="downloadFile()" />

Пример кода из проекта, показывающий, как стилизовать кнопки и тому подобное

 <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  <!-- Add CSS code to format the sidebar from google stylesheet -->
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  
  <style>
    body {
      padding: 20px;
    }
  </style>
  </head>
  <body>
  <div class="block">
    <input type="button" value="Get Sheet Size" onclick="getSheetSize()" />
  </div>
  <div class="block">
    <input type="button" value="Close" onclick="google.script.host.close()" />
  </div>
  <div class="block">
    <div id="results"></div>  
  </div>
 <script>
 function getSheetSize() {
  //google.script.run.auditSheet();
  //google.script.run.withSuccessHandler(displayResults).auditSheet();
  google.script.run.withSuccessHandler(displayResults).auditAllSheets();

 }

 function displayResults(results) {
  // display results in sidebar
  document.getElementById("results").innerHTML = results;
}

 </script>
  </body>
</html>