LWCで文字コードを「Shift-JIS」を指定してダウンロードする方法

概要

LWCでファイルを出力すると、文字コードがUTF-8となるため、Shift-JISで出力するためにはVisualforceにて「Content-Type」のcharsetにShift-JISを指定して出力するのが一般的かと思われる。
今回は、LWCでShift-JISを指定して出力するやり方について備忘を兼ねて記載する

やること

• 外部ライブラリであるencoding.jsを静的リソースとして登録する
• LWCで静的リソースを読み込む

実装

1. 外部ライブラリであるencoding.jsを静的リソースとして登録する

   • UNPKGからソースコードを取得する
     

   • 「View Row」を右クリックして「リンク先を別名で保存する」をクリックして保存する(任意の名称で良い)

   • 保存したファイルを静的リソースに登録する。この際にSalesforceの設定画面からまたはVSCodeでデプロイする方法のどちらでも良い。（VSCodeで登録する場合は、こちらの方の記事が大変参考になるので、適宜参照してください）

2. LWCで静的リソースを読み込む

• まず静的リソースの内容を読み込む

lwc

import encodejs from '@salesforce/resourceUrl/{静的リソースに登録した名称}'
import { loadScript } from 'lightning/platformResourceLoader'


export default class TestComponent extends LightningElement {
   // 静的リソースを読み込む
   connectedCallback() {
       Promise.all([loadScript(this, encodejs)])
           .then(() => {
               console.log('loaded')
           })
           .catch((error) => {
               console.log('error', error)
           })
   }
   

• これでライブラリを使用できるようになったため、ロジックを実装する。ライブラリの詳しい使用方法は、READMEを参照してください。

lwc

const fileData = 'こんにちは'

// 文字列から文字コード値の配列に変換(ASCII)
const unicodeArray = Encoding.stringToCode(fileData)

// Shift-JISのバイト配列にエンコード
const sjisArray = Encoding.convert(unicodeArray, 'SJIS', 'UNICODE')

// バイト配列からBlobオブジェクトを生成
const blobData = new Blob([new Uint8Array(sjisArray)], { type: 'text/plain' })

// ダウンロードを実行
const link = document.createElement('a')
link.download = 'hoge.txt'
link.href = window.URL.createObjectURL(blobData)
link.click()
URL.revokeObjectURL(link.href)

動作検証

• 検証内容
  • LWC内の処理で出力されたファイルがShift-JISになっているか？
• 動作検証の手順については、私が別で記載した記事内に記載したので、こちらを参考にしていただければと思います。