Angular2でBase64のExcelファイルをAjaxを使ってダウンロードする方法

■前提
・ExcelファイルはASP.NetのWebAPIで作成
　⇒GETメソッドでxlsxファイルをResponseで返す

■ポイント
・responseTypeでArrayBufferを指定

this.http.get("http://hogehoge.com", { responseType: ResponseContentType.ArrayBuffer })
    .subscribe(
        data => {
            var blob = new Blob([data.arrayBuffer()], { type: data.headers.get("content-type") });
            var fName: string;
            fName = decodeURI(data.headers.get("content-disposition").substring(data.headers.get("content-disposition").indexOf('=') + 1));
            //IEの場合
            if (window.navigator.msSaveBlob) {
                window.navigator.msSaveOrOpenBlob(blob, fName);
            } else {
                //それ以外の場合（Chromeしか確認していない）
                var a = document.createElement('a');
                a.download = fName;
                a.target = '_blank';
                a.href = window.URL.createObjectURL(blob);
                a.click();
            }
        }
    )

WebAPIでEPPlusで作成したExcelブックをダウンロードする手順

ASP.NetでWebAPIを使ったサーバサイド処理にて、
EPPlusで作成したExcelブックをダウンロードさせる手順。
細かいところは省略してます。

public HttpResponseMessage Get([FromUri] SagyouNumKousuParamModelGet modelParam)
{
    //レスポンスインスタンス生成
    HttpResponseMessage response = this.Request.CreateResponse(HttpStatusCode.OK);

    using (ExcelPackage inputFile = new ExcelPackage(new System.IO.FileInfo(HttpContext.Current.Server.MapPath("./") + "assets\\Template.xlsx"), false))
    {
        //inputFileに対して色々と処理
        
        //Content作成
        response.Content = new ByteArrayContent(inputFile.GetAsByteArray());
        //Contentヘッダ設定
        response.Content.Headers.Add("Content-Type", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
        response.Content.Headers.Add("content-disposition", "attachment;  filename=Sample.xlsx");
    }
}

EPPlusで名前付きセルの範囲を取得する

名前が定義されているのはNamesプロパティ。
シートに対する操作なので”ExcelWorksheet.Names["hogehoge"]”としてしまいがちだがこれではダメ。

名前はWorkbookで一意となるため、”ExcelWorkbook.Names["hogehoge"]”とする。


以下サンプル。

ExcelWorkbook workBook = inputFile.Workbook;
ExcelWorksheet template = inputFile.Workbook.Worksheets["Template"];
ExcelWorksheet workSheet = inputFile.Workbook.Worksheets.Add("Sheet1");

//名前「ヘッダ」の範囲をA1にコピー
workBook.Names["ヘッダ"].Copy(workSheet.Cells[1, 1]);

Angular2バリデーションの注意点

Angular2のバリデーションで躓いたのでメモ。 inputのerrorsプロパティはエラーの場合しかオブジェクトが生成されないため、 エラーメッセージを隠す際はngIfを使用する。

<form #form1="ngForm">
    <ion-grid>
        <ion-row>
            <ion-col>
                対象月：
                <input type="text"
                       [(ngModel)]="targetMonth"
                       [ngModelOptions]="{standalone: true}"
                       #t_month="ngModel"
                       pattern="^20(0[1-9]|[1-9][0-9])(0[1-9]|1[0-2])" ngModel />
                <p *ngIf="t_month.errors && t_month.errors.pattern" class="error">
                    値が不正です。西暦4桁＋月2桁を入力してください。（例：201612）
                </p>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col width-10>
                <button type="button" (click)="onSubmit()" [disabled]="!form1.form.valid">
                    データ取得
                </button>
            </ion-col>
        </ion-row>
    </ion-grid>
</form>

Wijmo5に関するサイト

■Wijmo公式ドキュメント
wijmoの各モジュールについて、プロパティ、メソッド、イベントがまとめられている。

■サンプルエクスプローラ
公式サンプル集。色々参考になります。
基本を押さえた上でないと使えない。

■Angular2マークアップ構文
Angular2のマークアップ構文の開設。Wijmoモジュールを例にしているので分かりやすい。

■FlexGrid入門
FlexGridの基本的な使い方の紹介。

Angular2でng-show

Angular2ではng-showがありません。

<div ngshow="data">....</div>

なんて書くとエラーで怒られてしまいます。


こんな時はこう書きましょう。

<div [hidden]="!data">....</div>

hiddenなのでtrueの時に隠れちゃいますから、否定の!をつけるのを忘れないようにご注意を。

「Cannot read property 'directive' of undefined in Wijmo grid」の対応

【事象】
Wijmo5の以下のディレクティブを使用するとエラーが発生する。
・wj-flex-grid-column
・wj-flex-grid-filter

【エラー内容】
TypeError: Cannot read property ‘directive’ of undefined

【構成】
Angular2：2.2.1
Wijmo：5.20163.234

【対応】
Wijmo5.20163.239にバージョンアップする。
ダウンロードはここから

【参考】
http://wijmo.com/topic/error-when-upgrade-angular-2-2-1-cannot-read-property-directive-of-undefined/



さんきゅーAlex！！