Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
24
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

ブラウザのJavaScriptでShiftJISのcsvを作ってダウンロードさせる

JavaScriptでやる必要があるのだろうか……
サーバ側が対応してくれないので、rest apiを駆使してブラウザでcsvを作るとかでしょうか……?

まぁ、それは一旦横に置いておくとして。

utf-8だったらそんなに難しくないんですけれどもね。
その形式だとexcelに優しくないので、ShiftJISの形式にして頑張ってcsvを作ってみようと思います。

実装例とデモ

https://github.com/fumihiko-hidaka/create-sjis-csv
https://neko-tech-test-storage.storage.googleapis.com/create-sjis-csv/index.html

こっちの方が楽だよ! とかあれば、コメントやprいただければ:yum:
動作確認はchromeだけです:sob:

使ったライブラリ

日本語の変換用にencoding-japanese
ファイルのダウンロード用にfile-saver

主に上記の2つを使いました!

実装例

const csvFormat = (col => `"${col}"`);

const csvData = [
  ['列1', '列2', '列3'].map(csvFormat).join(','),
  ['あいうえお', 'かきくけこ', 'さしすせそ\nたちつてと'].map(csvFormat).join(','),
  ['キズナアイ', '輝夜月', '虹河ラキ'].map(csvFormat).join(','),
].join('\n');

const unicodeList = [];
for (let i = 0; i < csvData.length; i += 1) {
  unicodeList.push(csvData.charCodeAt(i));
}

// 変換処理の実施
const shiftJisCodeList = Encoding.convert(unicodeList, 'sjis', 'unicode');
const uInt8List = new Uint8Array(shiftJisCodeList);

// csv書き込みの実装
const writeData = new Blob([uInt8List], { type: 'text/csv' });

FileSaver.saveAs(writeData, `shift-jis-${(new Date()).getTime()}.csv`);

実はそんなに難しいことはしていないのです。
文字列をcharCodeAtにしたものを変換、Blobを作成しダウンロードさせています。
FileSaverを使わなくても行けるんですが……まぁ、使ったほうが実装は楽なので!

最後に

株式会社ネコカリでは猫の手も借りたい🔥炎上中🔥なお仕事を募集しています!
一緒に働くメンバーも募集していますので、よかったら是非!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
24
Help us understand the problem. What are the problem?