【TypeScript】Generate and download CSVs in Shift_JIS character code.

Complete only on the front side.
CSV data is generated as string and converted with encoding-japanese.


Install & load

encoding-japaneseInstall package.

npm install --save encoding-japanese

Load inimport

import Encoding from 'encoding-japanese';

For other references, see GitHub.


Generate CSV

Converts from Object to String CSV data.
The first argument, data, is an array of Key Values, and the map() method is used to process each element of the array.
After processing, headerString and rowItems objects are generated as strings, separated by newlines.

 * Object to Csv
 * @param data
 * @param headerOrder
 * @param headerGridDisplay 表示ヘッダー切り替え
 * @returns
export const objectToCsv = (
  data: Record<string, any>[],
  headerOrder: string[],
  headerGridDisplay: string[] = []
): string => {
  let headerString: string = headerOrder.join(',')
  const replacer = (_: string, value: any): any => value ?? ''
  const rowItems: string[] = data.map((row: Record<string, any>) =>
    headerOrder.map((fieldName: string) => JSON.stringify(row[fieldName], replacer)).join(',')

  if (headerGridDisplay) {
    headerString = headerGridDisplay.join(',')

  const csv: string = [headerString, ...rowItems].join('\r\n')

  return csv

Download files from your browser

The data passed as the first argument is generated as a Blob by specifying the type.
After creating the url with createObjectURL, the click() method of the a tag element is fired.

 * ファイルダウンロード
 * @param data
 * @param name
export const download = (data: string | Uint8Array, name: string) => {
  const blob = new Blob([data], { type: 'text/csv' })
  const url = window.URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.setAttribute('href', url)
  a.setAttribute('download', `${name}.csv`)

Convert to Shift_JIS character code and download CSV.

Generate CSV data with objectToCsv, convert the data to Shift_JIS with Encoding.convert, and pass it to downlod to download the CSV converted to Shift_JIS.

Encoding.convert requires the IntArrayType to be passed, so TextEncoder().encode is used to pass the Uint8Array type.
Specify Shift_JIS in the second argument of Encoding.convert.

const csvdata = objectToCsv(exportData, keys, headerGridDisplay)

  new Uint8Array(
    Encoding.convert(new TextEncoder().encode(csvdata), {
      to: 'SJIS',
      from: 'AUTO'