클라이언트 사이드 JavaScript를 사용하여 몇 가지 스타일로 Excel 파일을 만듭니다(가능한 경우 js-xlsx 라이브러리를 사용하여).
엑셀 파일(.xlsx 형식)을 만들어서 클라이언트 사이드 자바스크립트를 사용하여 다운로드할 수 있게 하고 싶습니다.저는 js-xlsx 라이브러리를 사용하여 샘플 파일을 만들 수 있었습니다.하지만 나는 그것에 어떤 스타일도 적용할 수 없습니다.머리글 배경색, 머리글 굵은 글씨, 셀 텍스트 래핑 등 최소한 몇 가지 기본 스타일이 필요합니다.
js-xlsx 라이브러리 설명서에는 Cell Object를 사용하여 스타일을 지정할 수 있다고 나와 있습니다.
셀 오브젝트를 사용하여 스타일을 부여하려고 했지만 다운로드된 .xlsx 파일에 반영되지 않습니다.저는 심지어 XLSX.write() 함수를 사용하여 .xlsx 파일을 읽고 같은 파일을 다시 작성해 보았습니다.하지만 스타일이 전혀 없는 엑셀 파일을 돌려줍니다.이상적으로는 다운로드된 파일의 업로드된 파일 스타일이 동일할 것으로 예상합니다.다시 만든 파일에 글꼴 색이나 배경 색이 적용되지 않았습니다.저는 다운로드 받은 파일을 테스트하기 위해 Excel 2013을 사용합니다.
업로드 전과 업로드 후 아래 엑셀 스크린샷을 찾아주세요.
원본 파일
다운로드한 파일
코드는 아래와 같습니다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="xlsx.core.min.js"></script>
<script type="text/javascript" src="Blob.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<script>
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
/* set up XMLHttpRequest */
var url = "template-sample.xlsx";
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
oReq.onload = function(e) {
var arraybuffer = oReq.response;
/* convert data to binary string */
var data = new Uint8Array(arraybuffer);
var arr = new Array();
for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join("");
/* Call XLSX */
var workbook = XLSX.read(bstr, {type:"binary", cellStyles:true});
console.log("read workbook");
console.log(workbook);
/* DO SOMETHING WITH workbook HERE */
var wbout = XLSX.write(workbook, {bookType:'xlsx', bookSST:true, type: 'binary', cellStyles: true});
saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), "template-download.xlsx");
}
function read(){
oReq.send();
}
</script>
</head>
<body>
<button onclick="read()">save xlsx</button>
</body></html>
여기서 샘플 코드를 가져왔습니다.
제가 기대하는 것은 js-xlsx 라이브러리를 사용하여 셀에 스타일을 제공하는 옵션이거나 이 기능을 제공하는 다른 라이브러리입니다.exceljs라는 이름의 라이브러리를 찾았는데, 이를 지원하기 위해서는 노드 j가 필요합니다.저는 순수한 고객 측 기반 솔루션을 찾고 있습니다.이것은 Cordova 기반 태블릿 및 데스크톱 애플리케이션에 사용됩니다.
몇 가지 조사 후에 저는 제 자신의 질문에 대한 해결책을 찾을 수 있었습니다.스타일을 주기 위한 xlsx-style이라는 이름의 새로운 라이브러리를 찾았습니다.xlsx-style은 js-xlsx 위에 빌드되어 생성된 Excel 파일에도 스타일을 제공합니다.스타일은 셀 객체 내부의 새 속성을 사용하여 셀에 지정할 수 있습니다.
설명은 npm xlsx 스타일 페이지에서 확인할 수 있습니다.
스타일은 각 셀과 연결된 스타일 객체를 사용하여 지정됩니다.글꼴, 색상, 정렬 등은 이 스타일 객체를 사용하여 지정할 수 있습니다.
나는 github 페이지에 미니멀리스트 데모를 추가했습니다.샘플 코드는 이 github 저장소에서 사용할 수 있습니다.
생성된 엑셀 페이지의 스크린샷은 아래에서 확인하실 수 있습니다.
간단한 글쓰기를 위한 또 다른 대안으로*.xlsx내가 제안하고 싶은 파일들write-excel-file꾸러미
https://npmjs.com/package/write-excel-file
굵은 글꼴, 텍스트 색상, 배경 색상, 수평 정렬, 수직 정렬 및 오버플로 시 텍스트 래핑으로 스타일 셀을 지원합니다.
import writeXlsxFile from 'write-excel-file'
const data = [
[{
value: 'Row 1, Col 1',
fontWeight: 'bold'
}, {
value: 'Row 1, Col 2',
color: '#ffffff',
backgroundColor: '#cc0000'
}],
[{
value: 'Row 2, Col 1',
align: 'right',
alignVertical: 'top'
}, {
value: 'Row 2, Col 2. Long Text \n Multi-line',
wrap: true
}]
]
await writeXlsxFile(data, {
fileName: 'file.xlsx'
})
xlsx 스타일을 사용하는 예는 몇 가지에 불과하지만 명확하지 않거나 필요한 것을 빠르게 얻을 수 있습니다.
다음은 워크북을 만들고 셀 값을 설정하고 해당 셀에 색상을 지정하는 데 필요한 기본 골격이 포함된 xlsx 스타일을 사용하는 솔루션입니다.
올바른 xlsx.core.min.js 파일을 얻는 데 약간 어려움이 있었습니다. 어떤 이유에서인지 모든 버전에 이 파일이 포함되어 있지는 않습니다.저는 결국 니틴 베이비에서 직접 복사하게 되었습니다(응답자 데모).
여기 코드의 간단한 버전이 있습니다.
/* Object for the excel workbook data */
class Workbook {
constructor() {
this.SheetNames = [];
this.Sheets = {};
}
}
/* function for downloading the excel file */
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
// create the worksheet data
var ws_data = {}
var range = { s: { c: 0, r: 0 }, e: { c: 10, r: 10 } }; // worksheet cell range
ws_data['!ref'] = XLSX.utils.encode_range(range); // set cell the range
var cell = { // create cell
v: 'test', // value
s: { // style
fill: {
fgColor: { rgb: "FF6666" } // red
}
}
}
ws_data[XLSX.utils.encode_cell({ c: 1, r: 1 })] = cell; // add the cell to the sheet data
// create workbook and download
var wb = new Workbook();
wb.SheetNames.push('test'); // create new worksheet
wb.Sheets['test'] = ws_data; // set workseet data to the cell data
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'binary' }); //workbook output
saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), "Test Color.xlsx") // save workbook
몇 가지 주의할 점이 있습니다.
XLSX.utils.encode_cell({ c: 1, r: 1 })번호에 엑셀 코드를 할당하는 방법입니다.예:{ c: 1, r: 1 } == 'B2'
Excel 파일을 다운로드할 수 있지만 셀 데이터가 표시되지 않으면 시트 범위 값과 관련이 있을 가능성이 높습니다.데이터 양과 일치하거나 데이터 양보다 커야 합니다. range = { s: { c: 0, r: 0 }, e: { c: 10, r: 10 } };여기서 's' = 전류 및 'e' = 총계입니다.
xlsx-style은 셀을 만들 때 설정할 수 있는 더 많은 속성을 가지고 있습니다. 셀에 무엇이 있는지 알기 위해 빠르게 훑어볼 가치가 있습니다.이제 출력에 필요한 셀을 생성/스타일링하고 범위 값을 적절하게 설정하는 방법을 파악해야 합니다.
xlsx 스타일을 사용하여 각 컬렉션에 대해 '워크시트'를 추가하고 '워크북'에 추가하기 전에 스타일을 추가합니다.이 프로세스를 담당하는 속성은 's'(스타일)입니다.
샘플:
_.forEach(ws, (v, c) => {
if (c !== '!ref') {
if (header.indexOf(v.v) >= 0) {
ws[c]['s'] = {
fill: {
patternType: 'solid', // none / solid
fgColor: {rgb: 'FFD3D3D3'}
}
}
}
}
})
언급URL : https://stackoverflow.com/questions/40486860/create-an-excel-file-with-a-few-styles-using-client-side-javascript-if-possible
'programing' 카테고리의 다른 글
| 미리 정의된 값을 반복합니다. (0) | 2023.04.29 |
|---|---|
| bash -c'는 무엇을 합니까? (0) | 2023.04.29 |
| ClosedX에서 통화 형식을 지정하는 방법ML(숫자) (0) | 2023.04.29 |
| Tomcat을 사용하여 Eclipse에서 웹 서비스를 실행하는 동일한 경로 오류가 있는 여러 컨텍스트 (0) | 2023.04.29 |
| 코코아 응용 프로그램의 인포리스트에서 "번들 표시 이름"과 "번들 이름"의 차이점은 무엇입니까? (0) | 2023.04.29 |