개요

index.html 그냥 CSV를 검색하는 시스템을 만들었습니다.
다음과 같은 방법으로 CSV 파일을 로드하고 표시합니다.

미리 업로드 한 CSV로드

<input type="file">에서 대화 상자에서 CSV 파일 선택

사용한 프레임워크

JavaScript: Vue.js

CSV 변환: PapaParse

CSS: bulma

사용한 오픈 데이터 (CSV 파일)

아래의 오픈 데이터를 사용했습니다.

htps //w w. t sh sh boar rd. . jp/다타후에 ds/csv#300

htps //w w. 네, t. . jp / s t-sea rch / fu s? Page = 1 & t t = data st & Tokei = 00200521 & ts t = 000001011777 & cyc 0 = 0 & tc s1 = 000001094741

게시 대상

코드

htps : // 기트 b. 코 m / 타모 코 모코 모코 / csv 세아 rch

코드는 index.html만을 확인해 주세요【 여기 】

웹페이지

h tps://타모코모코코모코. 기 t b. 이오/csv-세아 rch

할 수 있는 일

열을 지정하여 검색 가능

지정한 열의 데이터에 문자가 포함된 사물만을 필터링합니다.

수치 데이터라면 비교할 수 있다

수치의 경우라면 이상이나 이하등으로 좁힐 수 있습니다.
다만, 잘 비교할 수 없는 데이터도 있었으므로 요조사.

미리 준비한 CSV를 로드할 수 있습니다.

아래의 폴더 구성으로 미리 CSV를 업로드해 두고 로드할 수도 있습니다.



코드 측은 다음 csvPathList로 설정합니다.

            el: '#app',
            data: {
                isMenuOpen: false,
                isHttpReq: false,
                csvTitle: null,
                csvCols: [],
                csvData: [],
                allCsvData: [],
                selectedCol: null,
                searchKeyword: null,
                numSearchMode: false,
                numSearchCondition: 'eq',
                numSearchParams: ['eq', 'gt', 'le'],
                searchNumMode: false,
                csvPathList: [
                    { btnName: 'data1', csvPath: 'csv/男女別人口全国都道府県（大正９年～平成27年）.csv' },
                    { btnName: 'data2', csvPath: 'csv/年齢（５歳階級）男女別人口－全国（大正９年～平成27年）.csv' },
                    { btnName: 'data3', csvPath: 'csv/年齢（５歳階級）男女別人口－都道府県（大正９年～平成27年）.csv' },
                    { btnName: 'data4', csvPath: 'csv/IT投資計画_InvestmentPlan_20201031015945.csv' }
                ]
            },

CSV 파일을 선택하여 로드할 수 있음

메뉴에서 "Import"를 클릭하여 파일 대화상자에서 CSV 파일을 선택할 수 있습니다.

후리카리

index.html 그냥 CSV를 검색하는 메커니즘을 만들었습니다.
의외로 간편하게 다룰 수 있어 2~3시간 정도로 작성할 수 있었습니다.
환경 등의 준비가 필요 없기 때문에 초보자도 부담없이 도전해 주시면 감사하겠습니다.

빠진 포인트

Papaparse에서 CSV를 로드할 수 있습니다.

Papaparse 심지어 미리 업로드 한 물건을 다운로드하여로드 할 수 있습니다

단 Shift-Jis 형식의 CSV가 잘 읽을 수 없어 깨져 버렸습니다

그래서 굳이 XMLHttpRequest 로 불러오려고 합니다