Blazor WebAssembly＋OpenMapWeatherApiで取得したデータをExcelファイルとしてダウンロードする

Blazor WebAssemblyでOpenMapWeatherApiを使ってみる

以前Blazor WebAssemblyで作成した天気予想アプリは結果を表示するだけでしたが、今回はExcelで予報をダウンロードできるようにしました。

まず取得したデータをExcelファイルにするためにJavaScriptを使います。

wwwrootにjsというフォルダを作り、そのなかにdownload-excel.jsというファイルを作成します。そしてwwwroot/index.htmlに3行追加します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Blazor WebAssemblyとOpenMapWeatherApiで天気予報を表示する</title>
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">??</a>
    </div>

	<!-- excelファイルのダウンロード関連 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.2/xlsx.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
    <script src="./js/download-excel.js"></script>
	<!-- excelファイルのダウンロード関連 ここまで -->

    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Blazor WebAssemblyとOpenMapWeatherApiで天気予報を表示する</title>

</head>

<body>

<app>Loading...</app>

An unhandled error has occurred.

<a href="" class="reload">Reload</a>

</div>

</body>

</html>

wwwroot/js/download-excel.jsには以下を書きます。

// 二次元配列 g_arrayをExcelファイルとしてダウンロードする

let g_array = [];

function DownloadExcelFile() {
    let write_opts = { type: 'binary' };
    let sheetName = "Sheet1";

    let sheets = {};
    sheets[sheetName] = XLSX.utils.aoa_to_sheet(g_array);

    let wb = { SheetNames: [sheetName], Sheets: sheets };
    let wb_out = XLSX.write(wb, write_opts);

    let buf = new ArrayBuffer(wb_out.length);
    let view = new Uint8Array(buf);

    for (var i = 0; i != wb_out.length; ++i)
        view[i] = wb_out.charCodeAt(i) & 0xFF;

    let blob = new Blob([buf], { type: 'application/octet-stream' });
    saveAs(blob, 'result.xlsx');
}

// 二次元配列 g_arrayにデータを追加する

function AddData(day, time, weather, temp, humidity, pressure, windDirect, windSpeed) {
    let ar = [];
    ar.push(day);	// 日付
    ar.push(time);	// 時刻
    ar.push(weather); // 天気
    ar.push(temp);	// 気温
    ar.push(humidity); // 湿度
    ar.push(pressure); // 気圧
    ar.push(windDirect); // 風向き
    ar.push(windSpeed); // 風速
    g_array.push(ar);
}

// 二次元配列 g_arrayのデータをクリアする

function ClearArray() {
    g_array = [];
}

// 二次元配列 g_arrayをExcelファイルとしてダウンロードする

let g_array = [];

function DownloadExcelFile() {

let write_opts = { type: 'binary' };

let sheetName = "Sheet1";

let sheets = {};

sheets[sheetName] = XLSX.utils.aoa_to_sheet(g_array);

let wb = { SheetNames: [sheetName], Sheets: sheets };

let wb_out = XLSX.write(wb, write_opts);

let buf = new ArrayBuffer(wb_out.length);

let view = new Uint8Array(buf);

for (var i = 0; i != wb_out.length; ++i)

view[i] = wb_out.charCodeAt(i) & 0xFF;

let blob = new Blob([buf], { type: 'application/octet-stream' });

saveAs(blob, 'result.xlsx');

}

// 二次元配列 g_arrayにデータを追加する

function AddData(day, time, weather, temp, humidity, pressure, windDirect, windSpeed) {

let ar = [];

ar.push(day); // 日付

ar.push(time); // 時刻

ar.push(weather); // 天気

ar.push(temp); // 気温

ar.push(humidity); // 湿度

ar.push(pressure); // 気圧

ar.push(windDirect); // 風向き

ar.push(windSpeed); // 風速

g_array.push(ar);

}

// 二次元配列 g_arrayのデータをクリアする

function ClearArray() {

g_array = [];

}

Index.razorの変更部分を示します。

「結果をExcelファイルで取得する」というボタンを追加しているだけです。@code 部分はボタンをおしたときに実行される OnClickDownload()メソッドを追加したのと、Search()メソッドが実行されたあとExcelに保存するデータを上記のg_arrayに格納する処理を追加しただけです。

@page "/"

@inject HttpClient httpClient

@using Newtonsoft.Json;

<h1>OpenWeatherMap で 天気予報を取得</h1>

<div class="form-group">
    <input type="button" @onclick="Search" value="検索" />
    <select name="area" @bind="@SelectedValue">
        @foreach (var pair in KeyValuePairs)
        {
            <option value="@pair.Value">@pair.Key</option>
        }
    </select>
    <select name="count" @bind="@SelectedCount">
        <option value="8">24時間</option>
        <option value="16">48時間</option>
        <option value="24">72時間</option>
        <option value="32">96時間</option>
    </select>
    <input type="button" id="xlsx" value="結果をExcelファイルで取得する" @onclick="OnClickDownload">
</div>
<hr />

<!-- 以下、省略 -->

@code {
    @inject IJSRuntime JS;

	// 追加されたメソッド
    async void OnClickDownload()
    {
        await JS.InvokeVoidAsync("DownloadExcelFile");
    }

	// 修正されたメソッド
    public async void Search()
    {
        string url = String.Format("https://api.openweathermap.org/data/2.5/forecast?id={0}&units=metric&cnt={1}&APPID={2}", SelectedValue, SelectedCount, apiKey);

        string str = await httpClient.GetStringAsync(url);
        this.weatherResult = JsonConvert.DeserializeObject<WeatherResult>(str);

        this.StateHasChanged();

		// 以下が追加された部分
        await JS.InvokeVoidAsync("ClearArray");
        KeyValuePair<string, string> pair = KeyValuePairs.FirstOrDefault(c => c.Value == SelectedValue);
        string key = pair.Key;
        await JS.InvokeVoidAsync("AddData", "［" + key + "］の天気予報");
        await JS.InvokeVoidAsync("AddData", "日付", "時刻", "天気", "気温（℃）", "湿度（％）", "気圧（hPa）", "風向き", "風速（m / sec）");

        foreach (var weatherSummary in weatherResult.List)
        {
            string day = weatherSummary.DtTxt.DateTime.AddHours(9).ToString("M月d日");
            string time = weatherSummary.DtTxt.DateTime.AddHours(9).ToString("H時mm分");
            string weather = GetWeather(@weatherSummary.Weather[0].Main);
            string temp = weatherSummary.Main.Temp + " ";
            string humidity = weatherSummary.Main.Humidity.ToString();
            string pressure = weatherSummary.Main.Pressure.ToString();
            string windDirect = WindDirect(@weatherSummary.Wind.Deg);
            string windSpeed = weatherSummary.Wind.Speed.ToString();
            await JS.InvokeVoidAsync("AddData", day, time, weather, temp, humidity, pressure, windDirect, windSpeed);
        }
    }
}

@page "/"

@inject HttpClient httpClient

@using Newtonsoft.Json;

<h1>OpenWeatherMap で天気予報を取得</h1>

@foreach (var pair in KeyValuePairs)

{

}

</select>

</select>

</div>

<hr />

@code {

@inject IJSRuntime JS;

// 追加されたメソッド

async void OnClickDownload()

{

await JS.InvokeVoidAsync("DownloadExcelFile");

}

// 修正されたメソッド

public async void Search()

{

string url = String.Format("https://api.openweathermap.org/data/2.5/forecast?id={0}&units=metric&cnt={1}&APPID={2}", SelectedValue, SelectedCount, apiKey);

string str = await httpClient.GetStringAsync(url);

this.weatherResult = JsonConvert.DeserializeObject<WeatherResult>(str);

this.StateHasChanged();

// 以下が追加された部分

await JS.InvokeVoidAsync("ClearArray");

KeyValuePair<string, string> pair = KeyValuePairs.FirstOrDefault(c => c.Value == SelectedValue);

string key = pair.Key;

await JS.InvokeVoidAsync("AddData", "［" + key + "］の天気予報");

await JS.InvokeVoidAsync("AddData", "日付", "時刻", "天気", "気温（℃）", "湿度（％）", "気圧（hPa）", "風向き", "風速（m / sec）");

foreach (var weatherSummary in weatherResult.List)

{

string day = weatherSummary.DtTxt.DateTime.AddHours(9).ToString("M月d日");

string time = weatherSummary.DtTxt.DateTime.AddHours(9).ToString("H時mm分");

string weather = GetWeather(@weatherSummary.Weather[0].Main);

string temp = weatherSummary.Main.Temp + " ";

string humidity = weatherSummary.Main.Humidity.ToString();

string pressure = weatherSummary.Main.Pressure.ToString();

string windDirect = WindDirect(@weatherSummary.Wind.Deg);

string windSpeed = weatherSummary.Wind.Speed.ToString();

await JS.InvokeVoidAsync("AddData", day, time, weather, temp, humidity, pressure, windDirect, windSpeed);

}

ほかは変更ありません。

Blazor WebAssembly＋OpenMapWeatherApiで取得したデータをExcelファイルとしてダウンロードする

鳩でも分かるC#管理人からのお願い

コメントについて

管理人のモチベーションアップのために

コメントをどうぞ