데이터 로드 및 내보내기
셀 데이터와 스타일을 모두 포함할 수 있는 준비된 데이터 세트로 DHTMLX Spreadsheet를 채울 수 있습니다. 컴포넌트는 두 가지 데이터 로드 방법을 지원합니다.
- 외부 파일에서 로드
- 로컬 소스에서 로드
컴포넌트는 또한 Excel 파일로 데이터 내보내기를 지원합니다.
데이터 준비하기
DHTMLX Spreadsheet는 JSON 형식의 데이터를 받습니다.
셀 객체의 단순 배열일 수 있습니다. 하나의 시트에 대한 데이터 세트만 만들어야 하는 경우 이 방법을 사용하십시오.
const data = [
{ cell: "A1", value: "Country" },
{ cell: "B1", value: "Product" },
{ cell: "C1", value: "Price" },
{ cell: "D1", value: "Amount" },
{ cell: "E1", value: "Total Price" },
{ cell: "A2", value: "Ecuador" },
{ cell: "B2", value: "Banana" },
{ cell: "C2", value: 6.68, format:"currency" },
{ cell: "D2", value: 430, format:"percent" },
// "myFormat" is the id of a custom format
{ cell: "E2", value: 2872.4, format:"myFormat" },
// add drop-down lists to cells
{ cell: "A9", value: "Turkey", editor: {type: "select", options: ["Turkey","India","USA","Italy"]} },
{ cell: "B9", value: "", editor: {type: "select", options: "B2:B8" } },
// more cell objects
];
또는 여러 시트에 한 번에 로드할 데이터를 가진 객체일 수 있습니다. 예를 들어:
const data = {
sheets: [
{
name: "sheet 1",
id: "sheet_1",
data: [
{ cell: "A1", value: "Country" },
{ cell: "B1", value: "Product" },
// more data
],
merged: [
// merge cells A1 and B1
{ from: { column: 0, row: 0 }, to: { column: 1, row: 0 } },
// merge cells A2, A3, A4, and A5
{ from: { column: 0, row: 1 }, to: { column: 0, row: 4 } },
]
},
{
name: "sheet 2",
id: "sheet_2",
data: [
{ cell: "A1", value: "Country" },
{ cell: "B1", value: "Product" },
// more data
]
},
// more sheet objects
]
};
두 가지 방법에 사용 가능한 속성의 전체 목록은 API 레퍼런스에서 확인하십시오.
병합된 셀을 로드하는 기능은 시트 객체 형태로 데이터를 준비한 경우에만 사용 가능합니다.
셀 스타일 설정하기
데이터 세트에서 셀 스타일을 정의해야 할 수도 있습니다. 이 경우 데이터는 데이터 객체와 특정 셀에 적용되는 CSS 클래스를 별도의 속성으로 설명하는 객체여야 합니다.
css 속성으로 셀에 CSS 클래스를 설정하십시오.
const styledData = {
styles: {
someclass: {
background: "#F2F2F2",
color: "#F57C00"
}
},
data: [
{ cell: "A1", value: "Country" },
{ cell: "B1", value: "Product" },
{ cell: "C1", value: "Price" },
{ cell: "D1", value: "Amount" },
{ cell: "E1", value: "Total Price" },
{ cell: "A2", value: "Ecuador" },
{ cell: "B2", value: "Banana" },
{ cell: "C2", value: 6.68, css: "someclass" },
{ cell: "D2", value: 430, css: "someclass" },
{ cell: "E2", value: 2872.4 }
],
}
셀 잠금 상태 설정하기
데이터 세트에 잠긴 셀을 지정하려면 셀의 locked 속성을 사용하여 true로 설정하십시오.
const dataset = [
{ cell: "a1", value: "Country", locked: true }, //locks a cell
{ cell: "b1", value: "Product", locked: true },
{ cell: "a2", value: "Ecuador" },
{ cell: "b2", value: "Banana" },
{ cell: "a3", value: "Belarus" },
{ cell: "b3", value: "Apple" },
// more cells
];
사용 가능한 셀 속성의 전체 목록은 API 레퍼런스에서 확인하십시오.
관련 샘플: Spreadsheet. 잠긴 셀
셀에 링크 추가하기
데이터 세트에서 직접 셀에 대한 링크를 지정할 수 있습니다. 이를 위해 link 속성을 객체로 설정하고 필요한 설정을 제공하십시오.
text- (선택 사항) 링크의 텍스트href- (필수) 링크 대상을 정의하는 URL
데이터 세트에서의 모습은 다음과 같습니다.
const dataset = [
{ cell: "a1", value: "Country"}, //locks a cell
{ cell: "b1", value: "Product"},
{ cell: "a2", value: "Ecuador"},
{
cell: "b2",
value: "Banana",
link:{
href:"http://localhost:8080/"
}
},
// more cells
];
cell 객체의 value 속성과 link 객체의 text 속성은 상호 배타적이므로 동시에 사용하지 마십시오.
관련 샘플: Spreadsheet. JSON 가져오기 및 내보내기
외부 데이터 로드
JSON 데이터 로드하기
기본적으로 Spreadsheet는 JSON 형식의 데이터를 받습니다. 외부 소스에서 데이터를 로드하려면 load() 메서드를 사용하십시오. 이 메서드는 데이터 파일의 URL을 매개변수로 받습니다.
var spreadsheet = new dhx.Spreadsheet("spreadsheet");
spreadsheet.load("../common/data.json");
관련 샘플: Spreadsheet. 데이터 로드
사용자가 파일 탐색기를 통해 JSON 파일을 스프레드시트로 가져올 수 있게 하려면 JSON 파일 로드하기를 참고하십시오.
CSV 데이터 로드하기
CSV 형식의 데이터도 로드할 수 있습니다. 이를 위해 load() 메서드를 호출하고 두 번째 매개변수로 형식 이름("csv")을 전달하십시오.
var spreadsheet = new dhx.Spreadsheet("spreadsheet");
spreadsheet.load("../common/data.csv", "csv");
관련 샘플: Spreadsheet. CSV 로드
Excel 파일(.xlsx) 로드하기
.xlsx 확장자의 Excel 형식 파일을 스프레드시트로 로드할 수 있습니다. 사용자 인터페이스의 툴바와 메뉴에 해당 컨트롤이 있습니다.
- 메뉴: 파일 -> 다음으로 가져오기.. -> Microsoft Excel(.xlsx)
- 툴바: 가져오기 -> Microsoft Excel(.xlsx)
데이터를 가져오는 방법
가져오기 기능은 Internet Explorer에서 작동하지 않습니다.
DHTMLX Spreadsheet는 WebAssembly 기반 라이브러리인 Excel2Json을 사용하여 Excel에서 데이터를 가져옵니다. Excel 데이터를 Spreadsheet로 로드하려면 다음을 수행해야 합니다.
- Excel2Json 라이브러리를 설치합니다
- Spreadsheet 구성에 importModulePath 옵션을 지정하고 다음 두 가지 방법 중 하나로 worker.js 파일 경로를 설정합니다.
- 컴퓨터의 파일에 대한 로컬 경로 제공:
"../libs/excel2json/1.0/worker.js" - CDN의 파일에 대한 링크 제공:
"https://cdn.dhtmlx.com/libs/excel2json/1.0/worker.js"
- 컴퓨터의 파일에 대한 로컬 경로 제공:
var spreadsheet = new dhx.Spreadsheet(document.body, {
importModulePath: "../libs/excel2json/1.0/worker.js"
});
관련 샘플: Spreadsheet. 사용자 정의 가져오기 내보내기 경로
Excel 파일에서 데이터를 로드하려면 load() 메서드의 두 번째 매개변수로 확장자 유형 문자열("xlsx")을 전달하십시오.
// .xlsx only
spreadsheet.load("../common/data.xlsx", "xlsx");
컴포넌트는 .xlsx 확장자를 가진 Excel 파일에서만 가져오기를 지원합니다.
관련 샘플: Spreadsheet. Xlsx 가져오기
필요한 경우 스프레드시트 데이터를 Excel 파일로 내보낼 수도 있습니다.
로드 후 코드 처리하기
컴포넌트는 AJAX 호출을 수행하며 원격 URL이 유효한 데이터를 제공할 것으로 기대합니다. 데이터 로드는 비동기적으로 이루어지므로 로드 후 코드는 promise로 래핑해야 합니다.
spreadsheet.load("/some/data").then(function(){
// do something
});
로컬 소스에서 로드하기
로컬 소스에서 데이터를 로드하려면 parse() 메서드를 사용하십시오. 이 메서드의 매개변수로 미리 정의된 데이터 세트를 전달하십시오.
const spreadsheet = new dhx.Spreadsheet("spreadsheet");
spreadsheet.parse(data);
관련 샘플: Spreadsheet. 사용자 정의 셀 수
여러 시트를 스프레드시트로 로드하는 방법에 대한 자세한 내용은 시트 작업 문서를 참고하십시오.
상태 저장 및 복원
스프레드시트의 현재 상태를 저장하려면 serialize() 메서드를 사용하십시오. 이 메서드는 데이터를 JSON 객체 배열로 변환합니다. 각 JSON 객체에는 셀의 구성이 포함됩니다.
// saving state of the spreadsheet1
var state = spreadsheet1.serialize();
그런 다음 저장된 상태 배열에 저장된 데이터를 다른 스프레드시트로 파싱할 수 있습니다. 예를 들어:
// creating a new spreadsheet
var spreadsheet2 = new dhx.Spreadsheet(document.body);
// parsing the state of the spreadsheet1 into spreadsheet2
spreadsheet2.parse(state);
데이터 내보내기
Excel로 내보내기
DHTMLX Spreadsheet는 스프레드시트 데이터를 Excel 파일로 내보낼 수 있습니다. 사용자 인터페이스의 툴바와 메뉴에 해당 컨트롤이 있습니다.
- 메뉴: 파일 -> 다음으로 다운로드.. -> Microsoft Excel(.xlsx)
- 툴바: 내보내기 -> Microsoft Excel(.xlsx)
데이터를 내보내는 방법
내보내기 기능은 Internet Explorer에서 작동하지 않습니다.
라이브러리는 WebAssembly 기반 라이브러리인 Json2Excel을 사용하여 데이터를 Excel로 내보냅니다. 내보내기는 Json2Excel 라이브러리의 worker.js 파일에서 처리됩니다(기본 링크: https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx). 공개 내보내기 서버 또는 로컬 내보내기 서버를 사용할 수 있습니다. 파일을 내보내려면 다음을 수행해야 합니다.
- Spreadsheet 구성에 exportModulePath 옵션을 지정하고 worker.js 파일 경로를 설정합니다.
- 공개 내보내기 서버를 사용하는 경우 기본값으로 사용되므로 링크를 지정할 필요가 없습니다
- 자체 내보내기 서버를 사용하는 경우:
- Json2Excel 라이브러리를 설치합니다
- 특정 버전에 대해
"../libs/json2excel/x.x/worker.js?vx"를 사용합니다(x.x를 서버에 배포된 버전으로 교체하십시오)
var spreadsheet = new dhx.Spreadsheet(document.body, {
exportModulePath: "../libs/json2excel/x.x/worker.js?vx" // the path to the export module, if a local export server is used
});
관련 샘플: Spreadsheet. 사용자 정의 가져오기 내보내기 경로
필요한 소스를 조정했으면 Export 객체의 관련 xlsx() API 메서드를 사용하여 컴포넌트 데이터를 내보낼 수 있습니다.
spreadsheet.export.xlsx();
관련 샘플: Spreadsheet. Xlsx 내보내기
컴포넌트는 .xlsx 확장자를 가진 Excel 파일로만 내보내기를 지원합니다.
내보낸 파일의 사용자 정의 이름 설정하기
기본적으로 내보낸 파일의 이름은 "data"입니다. 내보낸 파일에 사용자 정의 이름을 지정할 수 있습니다. 이를 위해 xlsx() 메서드의 매개변수로 사용자 정의 이름을 전달하십시오.
spreadsheet.export.xlsx("MyData");
관련 샘플: Spreadsheet. Xlsx 내보내기
Excel 파일에서 Spreadsheet로 데이터를 가져오는 단계를 확인하십시오.
JSON으로 내보내기
v4.3부터 라이브러리는 스프레드시트 데이터를 JSON 파일로도 내보낼 수 있습니다. Export 객체의 json() 메서 드를 사용하십시오.
spreadsheet.export.json();
관련 샘플: Spreadsheet. JSON 내보내기/가져오기