見出し画像

【Salesforce】LWC & VF CSVファイル出力時に文字コード指定_文字コードShift-JISでCSVファイルを出力する方法

CREFIL

はじめに

こんにちは、CREFIL の稲田です。
今回は LWC & Visualforce で構成されたカスタム画面から、CSVファイル出力時の文字コードを UTF-8 から、Shift-JIS に変換する方法についてお話します。

LWC 単体で構成されたカスタム画面からCSVファイルを出力すると、文字コードがデフォルトで UTF-8 に指定され、LWCからでは文字コードを Shift-JIS に変換することができません。

そこで、CSV出力処理に Visualforce を挟んで、文字コードを指定する方法について共有したいと思います。

なぜ LWC 単体では文字コードの指定ができないのか

LWC 単体でCSVファイル出力時に文字コードを指定できない主な理由が、下記2点になります。

  1.  Lightning Locker によって、Javascript の文字コードを変換するライブラリ（encoding.js 等）の利用が制限されているため

  2.  LWC のHTMLレンダリングがクライアントサイドで実行されるため

「２．LWC のHTMLレンダリングがクライアントサイドで実行されるため」の補足を下記に記載します。
LWC 単体では、CSVファイルの文字コード指定ができませんでしたが、Visualforce 単体だと Shift-JIS に指定してファイル出力することが可能でした。
Visualforce にて検証した際に使用したコードが以下になります。

<apex:page contentType="text/csv;charset=Shift-JIS" controller="ExportSJISEncodedCsv" action="{!create}" readOnly="true">
</apex:page>

Visualforce は LWC と異なり、HTMLのレンダリングがサーバーサイドで行われます。
Visualforce の contentType で MIME Type を指定することで、サーバーサイドでHTMLのレンダリング実行後、指定した contentType でクライアントに処理結果を返します。
LWC では、表示させるコンポーネントの contentType を設定する余白がないため、LWC 単体では文字コードの指定ができない形となります。

今回紹介する内容は、上記Visualforce にて検証したコードをベースに、LWC + Visualforce でCSVファイルの文字コード変換を実現する方法を記載します。

文字コード Shift-JIS を指定してCSVファイルを出力する方法

まず前提条件として、CSVファイルの文字列を生成する処理は LWC ではなく、Apexクラスに記載する必要があります。
理由として、今回紹介する処理の大まかな流れが下記となり、Visualforce で contentType を指定する際にApexクラスで生成された文字列をサーバーサイドにてエンコードする必要があるためです。

■大まかな処理の流れ

  1. LWC から Visualforce を呼び出す

  2. Visualforce からApexクラスを実行してCSV文字列を生成し、Visualforce で文字列をエンコード

  3. Visualforce ページでファイルをDL後、LWC に戻る

上記前提条件、処理の流れをもとにコードレベルで実装内容を説明していきます。

１．LWC からVisualforce ページを呼び出す

例えば、カスタムボタン押下時にCSVファイルを出力させたい場合、HTMLでボタンを作成し、onClickイベントを設定します。

<!-- HTML -->
<lightning-button label="ExportCsv" type="button" onclick={callVf}></lightning-button> <!-- CSV出力開始ボタン -->

HTMLのボタンに設定した onClickイベントを定義し、Javascript側でwindow.open に起動したい Visualforce のリンクを設定します。

// Javascript
async callVf() {
    window.open('/apex/exportSJISEncodedCsv', '_blank'); // 新規タブでVisualforceページ起動
}

２．Visualforce からApexクラスを実行してCSV文字列を生成し、Visualforce で文字列をエンコード

新規タブで開かれたVisualforceページから、下記コードでApexクラスを呼び出し、ApexクラスでCSV文字列を生成します。
下記コードでVisualforceページからCSV文字列生成Apexクラス（createCsvString.cls）を実行します。
また、contentType を text/csv の文字コード「Shift-JIS」に指定します。

<!-- Visualforce -->
<apex:page controller="createCsvString" contentType="text/csv;charset=Shift-JIS" readOnly="true" action="{!create}"> <!-- CSV文字列生成Apexクラス呼び出し、文字コード指定 -->
   <apex:outputText value="{!csvString}" />
</apex:page>

Visualforce から呼び出されたApexクラスにて、CSV文字列を格納する変数を定義し、CSVファイルに出力する文字列を生成します。

// Apex
public String csvString { get; set; } // CSV文字列

public void createCsvString() {
		csvString = 'test1, test2, test3\\r\\n'; // CSV出力用の文字列生成
}

３．Visualforce ページでファイルをDL後、LWC に戻る

「１．」「２．」で紹介した手順を踏むことで、最終的に Visualforce がサーバーサイドにてHTML レンダリングした結果を、contentType で指定した Shift-JIS に変換してクライアントにCSVファイルとして結果を返します。

終わりに

今回は、LWC & Visualforce を用いたカスタム画面から、Shift-JIS のCSVファイルを出力する方法について紹介いたしました。
最後まで読んでいただき、ありがとうございました。