텍스트 영역에 입력된 CSV를 가공하여 파일로 출력하는 방법
목적
엑셀(CSV)에서 받은 데이터에 대해 어떠한 가공을 하는 경우가 많지만 매번 수작업으로 항목을 추가하거나 추출하는 것은 번거롭습니다. 또, 엑셀 매크로로 실현하는 것도 비용이 듭니다.Java도 실행 환경을 의식하지 않으면 안되어 귀찮습니다.
그 때문에, Javascript로 실현할 수 있으면(자) 생각하는 것이 많기 때문에, 그 베이스가 되는 프로그램을 작성했습니다.
다음 프로그램을 복사하기만 하면 텍스트 영역의 내용을 가공하여 파일로 출력할 수 있습니다.
프로그램
내용
가공의 샘플로서 csv를 콤마로 분할하고 나서 스페이스 구분으로 변환하고 있습니다.
이 변환을 하고 있는 루프 처리내에서 적절한 가공으로 변환해 주세요.
(저는 Insert 문을 작성하거나 릴리스시 명령 목록을 작성하고 있습니다.)
화면
프로그램
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style type="text/css">
</style>
<script type="text/javascript">
/**
* ボタンクリック処理
*/
function clickBtn() {
//テキストエリアから値を取得
const textareavalue = document.getElementById('textarea').value;
//ファイル名
const filename = document.getElementById('text').value;
//テキストエリアに値がない場合
if (textareavalue === "") {
document.getElementById("span1").textContent = "テキストエリアが未入力です。";
return;
}
//ファイル名に値がない場合
if (filename === "") {
document.getElementById("span1").textContent = "ファイル名が未入力です。";
return;
}
//1行ずつに分割
var textareavaluesplit = textareavalue.split("\n");
var result = "";
//行数分処理
for (var i = 0; i < textareavaluesplit.length; i++) {
//値がない場合
if (textareavaluesplit[i] === "") {
continue;
}
//カンマ区切り
var textareavaluespli2 = textareavaluesplit[i].split(",");
console.log(textareavaluesplit[i]);
//分割数分処理
for (var j = 0; j < textareavaluespli2.length; j++) {
//値がない場合
if (textareavaluespli2[j] === "") {
continue;
}
//1回目以外の場合スペースを追加
if (j !== 0) {
result = result + " ";
}
result = result + textareavaluespli2[j];
}
result = result + "\n";
}
console.log(result);
// 項目に値を設定
document.getElementById("span1").textContent = result;
// ファイル出力
outputFile(result, filename);
}
/**
* ファイル出力処理
* @param {string} value ファイルに出力する値
* @param {string} filename ファイル名
*/
function outputFile(value, filename) {
var blob = new Blob([value], { "type": "text/plain" });
// Internet exproerの場合
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(blob, filename);
} else {
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = filename;
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
}
</script>
<title>Convert to space from CSV tool</title>
</head>
<body>
<h1>Convert to space from CSV tool</h1>
<table>
<tr>
<td>変換する値</td>
</tr>
<tr>
<td><textarea id="textarea" cols="60" rows="20"
placeholder="変換する値を入力入力してください。 -例- AAA,BBB,CCC DDD,,FFF,GGG XXXX,Y,ZZ"></textarea>
</td>
</tr>
<tr>
<td>ファイル名</td>
</tr>
<td><input id="text" type="text" name="name" size="30"></td>
<tr>
<td><input type="button" value="ボタン" onclick="clickBtn()" /></td>
</tr>
</table>
</br>
</br>
<div id="span1"></div>
</body>
</html>
주의
프로덕션 시스템에 통합할 수 있을 정도의 보안을 의식한 프로그램이 아닙니다.
Reference
이 문제에 관하여(텍스트 영역에 입력된 CSV를 가공하여 파일로 출력하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/KOJI-YAMAMOTO/items/3ab3cf7608ad99e8de8f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
내용
가공의 샘플로서 csv를 콤마로 분할하고 나서 스페이스 구분으로 변환하고 있습니다.
이 변환을 하고 있는 루프 처리내에서 적절한 가공으로 변환해 주세요.
(저는 Insert 문을 작성하거나 릴리스시 명령 목록을 작성하고 있습니다.)
화면
프로그램
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style type="text/css">
</style>
<script type="text/javascript">
/**
* ボタンクリック処理
*/
function clickBtn() {
//テキストエリアから値を取得
const textareavalue = document.getElementById('textarea').value;
//ファイル名
const filename = document.getElementById('text').value;
//テキストエリアに値がない場合
if (textareavalue === "") {
document.getElementById("span1").textContent = "テキストエリアが未入力です。";
return;
}
//ファイル名に値がない場合
if (filename === "") {
document.getElementById("span1").textContent = "ファイル名が未入力です。";
return;
}
//1行ずつに分割
var textareavaluesplit = textareavalue.split("\n");
var result = "";
//行数分処理
for (var i = 0; i < textareavaluesplit.length; i++) {
//値がない場合
if (textareavaluesplit[i] === "") {
continue;
}
//カンマ区切り
var textareavaluespli2 = textareavaluesplit[i].split(",");
console.log(textareavaluesplit[i]);
//分割数分処理
for (var j = 0; j < textareavaluespli2.length; j++) {
//値がない場合
if (textareavaluespli2[j] === "") {
continue;
}
//1回目以外の場合スペースを追加
if (j !== 0) {
result = result + " ";
}
result = result + textareavaluespli2[j];
}
result = result + "\n";
}
console.log(result);
// 項目に値を設定
document.getElementById("span1").textContent = result;
// ファイル出力
outputFile(result, filename);
}
/**
* ファイル出力処理
* @param {string} value ファイルに出力する値
* @param {string} filename ファイル名
*/
function outputFile(value, filename) {
var blob = new Blob([value], { "type": "text/plain" });
// Internet exproerの場合
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(blob, filename);
} else {
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = filename;
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
}
</script>
<title>Convert to space from CSV tool</title>
</head>
<body>
<h1>Convert to space from CSV tool</h1>
<table>
<tr>
<td>変換する値</td>
</tr>
<tr>
<td><textarea id="textarea" cols="60" rows="20"
placeholder="変換する値を入力入力してください。 -例- AAA,BBB,CCC DDD,,FFF,GGG XXXX,Y,ZZ"></textarea>
</td>
</tr>
<tr>
<td>ファイル名</td>
</tr>
<td><input id="text" type="text" name="name" size="30"></td>
<tr>
<td><input type="button" value="ボタン" onclick="clickBtn()" /></td>
</tr>
</table>
</br>
</br>
<div id="span1"></div>
</body>
</html>
주의
프로덕션 시스템에 통합할 수 있을 정도의 보안을 의식한 프로그램이 아닙니다.
Reference
이 문제에 관하여(텍스트 영역에 입력된 CSV를 가공하여 파일로 출력하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/KOJI-YAMAMOTO/items/3ab3cf7608ad99e8de8f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
