ReactJS FieldList 에서 셀로 드래그했을때 이미지를 업로드 시키고싶습니다.
추천0 비추천 0
페이지 정보
작성자 바밤바
작성일 2023-09-27 13:25 조회 447회
댓글 1건
제품 버전 : 16.1.3
컨트롤 이름 : Designer Component
본문
관련링크
오른쪽 field List의 값을 셀에 드래그 한 후
Sheet Binding 재클릭시 바인딩된 데이터가 해당 셀로 들어갈겁니다
그럼 이때 해당 셀에 이미지가 들어갔으면 합니다.
여기서 logo들은 모두 base64로 인코딩된 이미지 입니다.
아래는 예시코드입니다.
useEffect(() => {
if (!workbook || !sheet || !fieldListData) return;
const bindingSource = { ...fieldListData };
bindingSource.clientLogo = `=IMAGE("${fieldListData.clientLogo}"), 1)`;
bindingSource.clientLogo1 = `=IMAGE("${fieldListData.clientLogo1}", 1)`;
bindingSource.clientLogo2 = `=IMAGE("${fieldListData.clientLogo2}", 1)`;
bindingSource.sigLogo1 = `=IMAGE("${fieldListData.sigLogo1}", 1)`;
bindingSource.sigLogo2 = `=IMAGE("${fieldListData.sigLogo2}", 1)`;
bindingSource.sigLogo3 = `=IMAGE("${fieldListData.sigLogo3}", 1)`;
bindingSource.sigLogo4 = `=IMAGE("${fieldListData.sigLogo4}", 1)`;
bindingSource.etc1 = `=IMAGE("${fieldListData.etc1}", 1)`;
bindingSource.etc2 = `=IMAGE("${fieldListData.etc2}", 1)`;
// =IMAGE 에서 =앞에 ' 따옴표가 붙어서 나오는 문제가 있다. spread Js측에 문의해봐야한다.
// 그리고 =IMAGE로 이미지를 넣었을때 생기는 문제는 EXPORT시에 image가 나오지 않는다. 이것도 문의 해봐야한다.
// 이거를 로직으로 따로 처리하기위해선 Template에서는 일단 저장해두고 실제 사용할 Sheet에서 함수로 따로 처리해야할듯 하다.
console.log(bindingSource.clientLogo);
const productData = {
revisionInfo: { ...bindingSource },
};
const source = new GC.Spread.Sheets.Bindings.CellBindingSource(productData);
sheet.setDataSource(source);
workbook.toJSON({ includeBindingSource: true, saveAsView: true });
}, [fieldListData]);
const getDesigner = (designer: any) => {
const workbook: GC.Spread.Sheets.Workbook = designer.getWorkbook();
const sheet: GC.Spread.Sheets.Worksheet = workbook.getActiveSheet();
setSheet(sheet);
setWorkBook(workbook);
const fieldList = {
$schema: 'http://json-schema.org/draft-04/schema#',
properties: {
revisionInfo: {
dataFieldType: 'text',
type: 'string',
properties: {
clientLogo: {
dataFieldType: 'text',
type: 'string',
},
clientLogo1: {
dataFieldType: 'text',
type: 'string',
},
clientLogo2: {
dataFieldType: 'text',
type: 'string',
},
sigLogo1: {
dataFieldType: 'text',
type: 'string',
},
sigLogo2: {
dataFieldType: 'text',
type: 'string',
},
sigLogo3: {
dataFieldType: 'text',
type: 'string',
},
sigLogo4: {
dataFieldType: 'text',
type: 'string',
},
etc1: {
dataFieldType: 'text',
type: 'string',
},
etc2: {
dataFieldType: 'text',
type: 'string',
},
projectNo: {
dataFieldType: 'text',
type: 'string',
},
documentNo: {
dataFieldType: 'text',
type: 'string',
},
revisionNo: {
dataFieldType: 'text',
type: 'string',
},
projectTitle: {
dataFieldType: 'text',
type: 'string',
},
revisionDate: {
dataFieldType: 'text',
type: 'string',
},
revisionDescription: {
dataFieldType: 'text',
type: 'string',
},
equipmentTagNo: {
dataFieldType: 'text',
type: 'string',
},
equipmentTagDescription: {
dataFieldType: 'text',
type: 'string',
},
},
},
},
type: 'object',
};
designer.setData('treeNodeFromJSON', JSON.stringify(fieldList));
};
댓글목록
GCK루카스님의 댓글
GCK루카스
작성일
2 답변
