Node.js에서 REST API를 사용하여 Excel 데이터를 HTML로 표시

HTML 웹 페이지는 휴대용 장치에서 사용할 수 있는 모든 브라우저에서 볼 수 있습니다. HTML 페이지에 Excel 데이터를 표시하면 실제 Excel 스프레드시트를 공유하지 않고도 관련 이해 관계자에게 데이터를 표시할 수 있습니다. 따라서 모든 브라우저에서 필요한 정보/데이터를 쉽게 볼 수 있습니다. 이 기사에서는 Node.js에서 REST API를 사용하여 Excel 데이터를 HTML로 표시하는 방법을 배웁니다.

이 문서에서는 다음 항목을 다룹니다.

Excel to HTML Viewer REST API 및 Node.js SDK

XLS 또는 XLSX 스프레드시트를 렌더링하기 위해 GroupDocs.Viewer Cloud의 Node.js SDK API를 사용합니다. 프로그래밍 방식으로 모든 종류의 인기 있는 문서 및 이미지 파일 형식을 렌더링하고 볼 수 있습니다. 콘솔에서 다음 명령을 사용하여 설치하십시오.

npm install groupdocs-conversion-cloud

언급된 단계를 따르기 전에 대시보드에서 클라이언트 ID와 암호를 가져오십시오. ID와 시크릿이 있으면 아래와 같이 코드를 추가합니다.

// 대시보드에서 클라이언트 ID와 암호를 가져와 아래와 같이 코드를 추가하십시오.
global.clientId = "112f0f38-9dae-42d5-b4fc-cc84ae644972";
global.clientSecret = "16ad3fe0bdc39c910f57d2fd48a5d618";
global.myStorage = "";

const configuration = new groupdocs_viewer_cloud.Configuration(clientId, clientSecret);
configuration.apiBaseUrl = "https://api.groupdocs.cloud";

Node.js에서 REST API를 사용하여 Excel 데이터를 HTML로 표시

아래에 주어진 간단한 단계에 따라 Excel 데이터를 HTML로 표시할 수 있습니다.

  1. 업로드 XLSX 파일을 클라우드에
  2. Node.js를 사용하여 HTML로 Excel 데이터 표시
  3. 다운로드 렌더링된 파일

문서 업로드

먼저 아래 제공된 코드 예제를 사용하여 XLSX 파일을 클라우드에 업로드합니다.

// 이 코드 예제는 XLSX 파일을 클라우드에 업로드하는 방법을 보여줍니다.
// FileApi 구성
let fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);
let resourcesFolder = 'C:\\Files\\viewer\\sample.xlsx';

// 파일을 하나씩 읽기
fs.readFile(resourcesFolder, (err, fileStream) => {
  // 업로드 파일 요청 생성
  let request = new groupdocs_viewer_cloud.UploadFileRequest("sample.xlsx", fileStream, myStorage);
  // 파일 업로드
  fileApi.uploadFile(request);
});

결과적으로 업로드된 파일은 클라우드 대시보드의 파일 섹션에서 사용할 수 있습니다.

Node.js를 사용하여 Excel 데이터를 HTML로 표시

아래 단계에 따라 프로그래밍 방식으로 HTML 페이지에 Excel 데이터를 렌더링하거나 표시할 수 있습니다.

  • 먼저 ViewApi 인스턴스를 생성합니다.
  • 다음으로 FileInfo의 인스턴스를 만듭니다.
  • 그런 다음 입력 파일 경로를 설정합니다.
  • 다음으로 ViewOptions의 인스턴스를 만듭니다.
  • 그런 다음 FileInfo를 할당하고 “HTML"을 viewFormat으로 설정합니다.
  • 다음으로 HtmlOptions의 인스턴스를 만듭니다.
  • 그런 다음 SpreadsheetOptions를 시작하고 할당합니다.
  • 다음으로 paginateSheets, textOverflowMode, renderGridLines 등과 같은 다양한 옵션을 설정합니다.
  • 그런 다음 viewOptions를 인수로 사용하여 CreateViewRequest 메서드를 호출하여 보기 요청을 만듭니다.
  • 마지막으로 CreateViewRequest를 인수로 사용하여 ViewApi.createView 메서드를 호출하여 HTML을 렌더링합니다.

다음 코드 샘플은 Node.js에서 REST API를 사용하여 Excel 데이터를 HTML로 표시하는 방법을 보여줍니다.

// 이 코드 예제는 HTML 페이지에서 Excel을 렌더링하는 방법을 보여줍니다.
// API 초기화
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);

// 입력 파일
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";

// 보기 옵션 정의
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;

// 렌더링 옵션 정의
viewOptions.renderOptions = new groupdocs_viewer_cloud.HtmlOptions();

// 스프레드시트 렌더링 옵션 정의
viewOptions.renderOptions.spreadsheetOptions = new groupdocs_viewer_cloud.SpreadsheetOptions();
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = false;
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = groupdocs_viewer_cloud.SpreadsheetOptions.TextOverflowModeEnum.HideText;
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;

// 보기 요청 만들기
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// 보기 만들기
let response = await viewApi.createView(request);

// 렌더링된 HTML 페이지 경로 표시
for (let page = 0; page < response.pages.length; page++) {
  console.log("Document rendered: " + response.pages[page].path);
}
Node.js를 사용하여 Excel 데이터를 HTML로 표시

Node.js를 사용하여 Excel 데이터를 HTML로 표시

기본적으로 하나의 워크시트가 하나의 페이지로 렌더링됩니다. 다음 옵션을 적용하여 Excel 렌더링을 사용자 지정할 수 있습니다.

  • Excel 워크시트를 여러 페이지에 표시
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = true;
viewOptions.renderOptions.spreadsheetOptions.countRowsPerPage = 45;
  • HTML에서 눈금선 표시
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
  • 빈 행과 열 렌더링
viewOptions.renderOptions.spreadsheetOptions.renderEmptyRows = true;
viewOptions.renderOptions.spreadsheetOptions.renderEmptyColumns = true;
  • 숨겨진 행 및 열 표시
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;
  • 인쇄 영역만 렌더링
viewOptions.renderOptions.spreadsheetOptions.renderPrintAreaOnly = true;
  • 텍스트 오버플로 모드 설정
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = "HideText";

HTML 페이지 다운로드

위의 코드 샘플은 렌더링된 HTML 페이지를 클라우드에 저장합니다. 다음 코드 예제를 사용하여 다운로드할 수 있습니다.

// 이 코드 예제는 클라우드에서 HTML 페이지를 다운로드하는 방법을 보여줍니다.
// API 초기화
var fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);

// 파일 다운로드 요청 생성
let request = new groupdocs_viewer_cloud.DownloadFileRequest("/viewer/sample_xlsx/sample_page_1.html", myStorage);

// 파일 다운로드
let response = await fileApi.downloadFile(request);

// 작업 디렉토리에 이미지 파일 저장
fs.writeFile("C:\\Files\\viewer\\sample_xlsx\\sample_page_1.html", response, "binary", function (err) { });

Node.js를 사용하여 워터마크가 있는 HTML로 Excel 데이터 표시

아래 단계에 따라 프로그래밍 방식으로 Excel 데이터를 HTML 페이지에 렌더링하는 동안 워터마크 텍스트를 추가할 수 있습니다.

  • 먼저 ViewApi 인스턴스를 생성합니다.
  • 다음으로 FileInfo의 인스턴스를 만듭니다.
  • 그런 다음 입력 파일 경로를 설정합니다.
  • 다음으로 ViewOptions의 인스턴스를 만듭니다.
  • 그런 다음 FileInfo를 할당하고 “HTML"을 viewFormat으로 설정합니다.
  • 다음으로 워터마크 인스턴스를 생성하고 할당합니다.
  • 그런 다음 워터마크 크기와 텍스트를 설정합니다.
  • 그런 다음 viewOptions를 인수로 사용하여 CreateViewRequest 메서드를 호출하여 보기 요청을 만듭니다.
  • 마지막으로 CreateViewRequest를 인수로 사용하여 ViewApi.createView 메서드를 호출하여 HTML을 렌더링합니다.

다음 코드 샘플은 Node.js에서 REST API를 사용하여 워터마크가 있는 HTML로 Excel 데이터를 표시하는 방법을 보여줍니다.

// 이 코드 예제는 워터마크를 사용하여 HTML 페이지에서 Excel을 렌더링하는 방법을 보여줍니다.
// API 초기화
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);

// 입력 파일
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";

// 보기 옵션 정의
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;

// 워터 마크를 추가
viewOptions.watermark = new groupdocs_viewer_cloud.Watermark();
viewOptions.watermark.size = 100;
viewOptions.watermark.text = "This is a sample watermark!";

// 보기 요청 만들기
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// 보기 만들기
let response = await viewApi.createView(request);

// 렌더링된 HTML 페이지 경로 표시
for (let page = 0; page < response.pages.length; page++) {
  console.log("Document rendered: " + response.pages[page].path);
}
Node.js를 사용하여 워터마크가 있는 HTML로 Excel 데이터 표시

Node.js를 사용하여 워터마크가 있는 HTML로 Excel 데이터 표시

온라인 시도

위의 API를 사용하여 개발된 다음 무료 온라인 Excel 렌더링 도구를 사용해 보십시오. https://products.groupdocs.app/viewer/xlsx

결론

이 기사에서는 Excel 데이터를 클라우드에서 HTML로 표시하는 방법을 배웠습니다. 또한 Node.js를 사용하여 렌더링된 HTML 페이지에 워터마크를 추가하는 방법도 살펴보았습니다. 이 문서에서는 프로그래밍 방식으로 XLSX 파일을 클라우드에 업로드한 다음 클라우드에서 렌더링된 HTML 파일을 다운로드하는 방법도 설명했습니다. 그 외에도 문서를 사용하여 GroupDocs.Viewer Cloud API에 대해 자세히 알아볼 수 있습니다. 또한 브라우저를 통해 직접 API를 시각화하고 상호 작용할 수 있는 API 참조 섹션을 제공합니다. 모호한 점이 있으면 언제든지 포럼에 문의해 주십시오.

또한보십시오