Lightning Web ComponentsでCSVファイルを出力する方法

Lighting Web Componentsで、Shift JISのCSVファイルを出力する方法をご紹介します。

Lightning Web Componentsで、CSVファイルの内容を文字列として作成して、FileSaverなどでファイルとして保存するようにしても、CSVファイルを作成することは可能です。

しかし、UTF-8になります。

UTF-8もメジャーになってきましたが、Excelで開くとか、他のシステムに取り込むとかになると、Shift-JISが多いです。

Salesforceのデータをオンプレのシステムに取り込むという場面では、ほぼShift-JISです。

Javascriptで、UTF-8からShift JISに変換するには、encoding.jsというライブラリがあります。

Lightning Web Componentsでこのライブラリを使おうとすると、Locker Serviceで使用が認められていない機能を使っているために使うことができません。

Shift JISのCSVファイルを作成する方法

Lightning Web ComponentsからCSVファイルを作成する方法は以下の通りです。

・ApexクラスでCSVファイルの内容を文字列で作成する

・Visualforce PageでApexクラスで作成したCSVファイルをダウンロードする

・Lighting Web ComponentsでVisualforce Pageを表示する

は、はい。ほぼ、ApexクラスとVisualforce Pageが仕事をしてます。

ApexクラスでCSVファイルの内容を文字列で作成する

CSVファイルの内容を文字列として作成します。

public with sharing class aclCsv {
   /**
   * CSVデータ
   */
   public String data { get; set; }

   /**
   * ファイル名
   */
   public String fileName { get; set; }

   /**
   * CSVデータを作成する
   */
   public void create() {
     // CSVデータを作成する
     List<String> lst = new List<String>();
     lst.add('"0001","岩手県"');
     lst.add('"0001","秋田県"');

     // 作成したCSVデータを連結する
     data = String.join(lst, '\r\n');
     // 最終行にも改行を付加する
     data += '\r\n';

     // ファイル名を設定する
     fileName = 'shiftjis';
     fileName += '.csv';
  }
}

Visualforce PageでApexクラスで作成したCSVファイルをダウンロードする

apex:pageでcontentTypeで、ファイル形式をtext/csv､文字コードをShift-JIS、そしてファイル名を指定します。

<apex:page
   controller="aclCsv"
   action="{!create}"
   sidebar="false"
   showHeader="false"
   contentType="text/csv;charset=Shift-JIS#{!fileName}"
   readOnly="true"
   title="CSV出力">

   <apex:outputText value="{!data}" />
</apex:page>

Lighting Web ComponentsでVisualforce Pageを表示する

    async handleOutput() {
       let url = '/apex/aclCsv';
       window.open(url, '_blank');
   }