XMLHttpRequestのresponseがnullになってしまう問題を解決したい

前提

下記の添付ファイルダウンロードAPIにて、Excelデータ(xlsx)をダウンロードする処理を作成しております。
https://sites.google.com/a/sateraito.jp/nextset-dounyuu/Home/wakufuro-ji-neng/api#TOC-API16
以下の過去の質問を参考にAPIを実行しようとしています。
https://teratail.com/questions/241068

実現したいこと

添付ファイルダウンロードAPIを正常に動作させる（xml.responseを正常に動作させる）

エラーメッセージ

xml.responseがnullになる。
ファイルをダウンロードしてもファイルが壊れているので開けないとエラーが発生する。

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3 <head>
4 <meta charset="utf-8">
5 <title>TEST</title>
6 <!--[if lt IE 9]>
7 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
8 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
9 <![endif]-->
10<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
11    
12 </head>
13 
14<body>
15<button onclick="clickEvent()">ボタン</button>
16<a id="download" download="test.xlsx">ダウンロード</a>
17<script>
18
19function clickEvent() {
20    
21    downloadFile([doc_id],[file_id]);
22
23}
24
25
26function downloadFile(doc_id,file_id) { 
27    const url = "https://workflow.nextset.jp/[テナント名]/api/public/attach/download";
28    const xml = new XMLHttpRequest();
29    xml.open("POST", url, true);
30    xml.responseType = "blob";
31    xml.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8");
32
33    var data = new Map();
34    var access_token = getAccessToken();
35    data.set('access_token', '[access_token]');
36    data.set('impersonate_email',  '[impersonate_email]');
37    data.set('application_id', '[application_id]');
38    data.set('doc_id', [doc_id]);
39    data.set('file_id', [file_id]);
40
41    var param = [...data.entries()].map(d => d.join('=')).join('&')
42    xml.send(param)
43    console.log(xml) //ここからはBlobが返ってきていることを確認できる
44    console.log(xml.response) //ここではnullが表示される
45    var blob = new Blob([xml.response],  { type: 'application/octet-stream' }, "test.xlsx");
46    const a = document.getElementById('download');
47    a.href = window.URL.createObjectURL(blob);
48    return blob;
49}
50
51</script>
52</body>
53</html>

試したこと

xml.responseType = "arraybuffer" に変更してみましたが、
xml.responseはnullのままでした。

補足情報（FW/ツールのバージョンなど）

使用ブラウザ：Microsoft Edge
（都合上使用できるブラウザはMicrosoft Edgeのみです）

行動規範の内容に同意します

回答2件

ベストアンサー

xml.send() は非同期の処理を始めるので、直後に xml.response にアクセスすることはできません。loadイベントで結果を処理しましょう。

js
1    xml.send(param)
2    xml.addEventListener('load', e => {
3        console.log(xml.response);
4        var blob = new Blob([xml.response],  { type: 'application/octet-stream' }, "test.xlsx");
5         ...
6    });

投稿2022/08/19 04:01

int32_t

総合スコア20856

Tysoon

2022/08/19 04:08

丁寧に教えていただきありがとうございます。こちらの勉強不足でした。もっとJavaScriptの理解を深めたいと思います。

行動規範の内容に同意します

状況わからないのですが、所定のurlにpostするとエクセルデータが返ってくるということですか？

javascript
1<script>
2window.addEventListener('DOMContentLoaded',async ()=>{
3  const url="sample.php";
4  const content=await fetch(url,{method:"post"}).then(res=>res.blob());
5  document.querySelector('#download').setAttribute('href',window.URL.createObjectURL(content));
6});
7</script>
8<a id="download" download="test.xlsx">ダウンロード</a>