파일 업로드
파일 업로드 셀 유형은 파일을 업로드하는 버튼 셀입니다. 버튼 셀은 스프레드를 사용하여 페이지에 로컬 파일을 추가하려는 경우 유용할 수 있습니다.
설명
app.js
index.html
styles.css
파일 업로드 셀을 만들려면 다음 예를 따르십시오.
const sheet = spread.getActiveSheet();
const fileUpload = new GC.Spread.Sheets.CellTypes.FileUpload();
sheet.setCellType(1, 1, fileUpload);
// FileUpload support three formatted data types: blob, dataUrl, and GC.Spread.Sheets.CellTypes.IFileInfo.
// sheet.setValue(1, 1, dataUrl);
// sheet.setValue(1, 1, blob);
// sheet.setValue(1, 1, { name: 'test1.png', blob: blob });
// sheet.setValue(1, 1, { name: 'test2.txt', dataUrl: dataUrl });
valuePath 속성을 사용하여 셀 값 경로를 사용자 정의할 수 있습니다. 기본값은 'dataUrl'입니다.
fileUpload.valuePath(undefined); // After uploading the file, a special object(GC.Spread.Sheets.CellTypes.IFileInfo) will be stored in the cell.
// sheet.getValue(1, 1); // { name: 'test1.png', dataUrl: dataUrl, blob: blob }
// fileUpload.valuePath('dataUrl'); // After uploading the file, a string(dataUrl) will be stored in the cell.
// sheet.getValue(1, 1); // string
// fileUpload.valuePath('blob'); // After uploading the file, a special object(Blob) will be stored in the cell.
// sheet.getValue(1, 1); // Blob object
제공되는 많은 API를 사용하여 버튼을 사용자 정의할 수 있습니다. 셀의 버튼 위치를 제어하려면 다음 메서드를 사용합니다.
marginTop: 버튼의 위쪽 여백을 셀에 상대적인 픽셀 수로 가져오거나 설정합니다.marginRight: 버튼의 오른쪽 여백을 셀에 상대적인 픽셀 수로 가져오거나 설정합니다.marginBottom: 버튼의 아래쪽 여백을 셀에 상대적인 픽셀 수로 가져오거나 설정합니다.marginLeft: 버튼의 왼쪽 여백을 셀에 상대적인 픽셀 수로 가져오거나 설정합니다.
fileUpload.marginLeft(15);
fileUpload.marginTop(7);
fileUpload.marginRight(15);
fileUpload.marginBottom(7);
"maxSize" 메서드를 사용하여 업로드 가능한 파일의 크기 제한을 가져오고 설정할 수 있습니다. "accept" 메서드를 사용하여 업로드 가능한 파일의 유형 제한을 가져오고 설정할 수 있습니다. 예:
fileUpload.maxSize(3000); // The unit is KB.
fileUpload.accept('image/*');
셀에서 파일 업로드 버튼의 작업 목록을 제어하려면 다음 메서드를 사용합니다.
isPreviewEnabled: 파일 미리 보기 버튼을 표시할지 여부를 가져오거나 설정합니다.isDownloadEnabled: 파일 다운로드 버튼을 표시할지 여부를 가져오거나 설정합니다.isClearEnabled: 파일 지우기 버튼을 표시할지 여부를 가져오거나 설정합니다.
fileUpload.isPreviewEnabled(true);
fileUpload.isDownloadEnabled(true);
fileUpload.isClearEnabled(false);
previewCommand 속성을 사용하여 미리 보기 로직을 사용자 정의할 수 있습니다.
fileUpload.previewCommand = function (file) {
// Custom preview logic
}
// or
fileUpload.previewCommand = 'commandName'; // You need to register the corresponding command on the workbook first.
마지막으로 builtInFileIcons 속성을 사용하여 다양한 파일 형식의 아이콘을 사용자 정의할 수 있습니다.
spread.options.builtInFileIcons = { txt: 'xxx.png' };