クリック動作で、google.script.runを動かしたい

Question

実現したいこと

クリック動作で、google.script.runを動かしたい

前提

以下の様なコードを書き、Gasにてデプロイを行います。
そのデプロイしたURLにアクセスすると、すぐにdownloadzipが動いて、
output2.zipがダウンロードされ、
次にgoogle.script.runのgetvbaが動いてgas側の返り値のdataを元に、
element.clickで新たにGoogleドライブのファイルがダウンロードされます。
ダウンロードしたいファイルは２ファイルになります。

function downloadzip(){
var testfile = ("https://drive.google.com/uc?id=xxxxxxxxxxxx");
var zip = new JSZip();
var folderName = 'ここに入ってる';
var folder = zip.folder(folderName);
var karireport = document.getElementById('karireport');
var element = document.createElement('a');

Array.from(karireport.files).forEach((f,i) => {
folder.file(f.name,f)
})

var data2 = "テスト, テスト, テスト\nテスト, テスト, テスト";
var bom = new Uint8Array([0xef, 0xbb, 0xbf]);
var blob = new Blob([bom, data2], { type: "text/csv" });
folder.file('csv.csv',blob);

zip.generateAsync({type:'blob'})
.then((content) => {
saveAs(content,"output2.zip")
})

google.script.run.withSuccessHandler(data => {
testfile = ("https://drive.google.com/uc?id="+data);
element.setAttribute('href',testfile);
document.body.appendChild(element);
element.click();
}).getvba();

};

downloadzip();

発生している問題・エラーメッセージ

先程のコードのdownloadzip();の箇所をコメントアウトした後に再度デプロイして、
html側で書いた以下のダウンロードzipボタンを押すと、
zipファイルはダウンロードされるのですが、
google.script.runのgetvbaの処理後のwithSuccessHandlerが動かずに、
elementclickが反応せず、Googleドライブのファイルがダウンロードされずに悩んでいます。
ダウンロードされるファイルは1ファイルのみになってしまいます。
<button onClick='downloadzip()'>ダウンロードzip</button>

試したこと

①withSuccessHandlerの中にconsole.logを仕込んでもログは何も出力されていませんでした。

②withFailureHandlerを設定した後に、同じくwithFailureHandlerの中にconsole.logを仕込んでもログは何も出力されなかったので、
Success・Failure共に動いていないんだと思います。

③再度downloadzip();のコメントアウトを解除するとダウンロードは2ファイル行われます。

gas側とブラウザ側どちらもエラーは出ていないみたいです。
最下行のdownloadzip();をURLにアクセスして動かすのと、クリックして動かすとで、
google.script.runの挙動が異なるのかが分からず悩んでいます。
宜しくお願いします。

Comments

[y_waiwai]

挙動が異なるとは、どういうふうに異なるんでしょうか
特に、どういう挙動となって、それをどう言う風にしたいかなど
そこらへん詳しく説明しよう

[TomJerry]

説明不足ですみません。

・downloadzip();をコメントアウトしなかった場合
デプロイしてURLにアクセスすると、zipファイルがダウンロードされた後に、element.click();の箇所でU新たにGoogleドライブからファイルがダウンロードされます。

やりたい事はdownloadzip()をHTMLで記述したボタン操作で発火させたいです。

挙動が違うというのはボタン操作だとzipファイルしかダウンロードされないという意味です。

[TomJerry]

なぜだか分かりませんが、console.logだと何も出ないですが、alertにするとwithSuccessHandlerの処理が行われている事が分かりました。

ですので、element.click();の直前でalert(element)とすると、ダウンロードしたいURLが表示されました。
ですがelement.click()は実行されません。
試しにelemnetをブラウザのURLに貼り付けてEnterキーを押すと、ダウンロードされる事を確認しました。
もうちょっとなんですが、原因が分からないです。

[TomJerry]

element.click()をする際にhtmlが全て消えている為、clickする箇所が無い事が原因でした。

↓こちらだとhtmlが全て消えます。
<button onClick='downloadzip()'>ダウンロードzip</button>

↓こちらに変更するとhtmlがそのままだったので、ダウンロードが無事行われました。
<input type="button" onClick="downloadzip()" value="ダウンロードzip">

Answer 1

html側のボタンが以下のものだとhtmlが全て消えてしまった為、
elementそのものがないのでクリック出来ない事が原因でした。
<button onClick='downloadzip()'>ダウンロードzip</button>

以下の様に変更すると無事にダウンロードされました。
<input type="button" onClick="downloadzip()" value="ダウンロードzip">

buttonタグとinputタグの違いについての少し勉強してきます。
また、console.logが出ない事が余計に自分の中で混乱を招いたのですが、
結果的にalertで調べる方法もあるという事が学べました。

お騒がせしました。