Node.js에서 PowerPoint 프레젠테이션을 HTML로 변환
개요
Aspose.Slides for Node.js via Java는 Microsoft PowerPoint 없이 PowerPoint 프레젠테이션을 HTML로 저장할 수 있습니다. 기본 변환은 단일Presentation 로드와 SaveFormat 의 save 호출로 이루어집니다. 내보낸 레이아웃, 폰트, 이미지, 노트, 댓글, SVG 출력 또는 연결된 리소스를 제어해야 할 경우HtmlOptions를 사용합니다.
이 가이드는 실용적인 HTML 내보내기 시나리오에 중점을 둡니다:
- 전체 프레젠테이션 또는 선택한 슬라이드를 내보냅니다.
- 고정 레이아웃, 반응형 또는 SVG 기반 HTML을 생성합니다.
- 발표자 노트와 댓글을 포함합니다.
- 이미지 품질 및 잘린 이미지 데이터를 제어합니다.
- 폰트를 임베드하거나 폰트 파일을 별도로 저장합니다.
- 외부 리소스와 미디어 파일이 작성되고 참조되는 방식을 선택합니다.
기본적으로 HTML 내보내기는 대부분의 리소스가 포함된 단일 HTML 문서를 생성합니다. 이는 하나의 파일을 공유하기에 편리하지만 출력 크기가 증가할 수 있습니다. 웹 게시용으로는 외부 리소스를 사용하고 이미지 DPI를 낮추며 대상 환경에 신뢰할 수 있게 제공되지 않는 폰트만 임베드하는 것을 고려하십시오.
프레젠테이션을 HTML로 변환
프레젠테이션을 HTML로 내보내려면Presentation으로 로드하고SaveFormat.Html으로 저장합니다.
let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
presentation.save("presentation.html", aspose.slides.SaveFormat.Html);
} finally {
presentation.dispose();
}
이 예제는 하나의 HTML 파일을 작성합니다. 프레젠테이션 객체는 finally 블록에서 해제되어 내보낸 후 파일 핸들과 렌더링 리소스를 해제합니다.
HtmlOptions 사용
HtmlOptions은 HTML 내보내기의 주요 구성 클래스입니다. 일반 설정은 다음과 같습니다:
SlidesLayoutOptions: 노트, 댓글, 유인물 또는 기타 레이아웃 정보를 추가합니다.HtmlFormatter: HTML 문서 구조를 변경하거나 포맷팅을 컨트롤러에 위임합니다.SlideImageFormat: 슬라이드가 표현되는 방식을 변경합니다(예: SVG).PicturesCompression: 이미지 DPI와 출력 크기를 제어합니다.DeletePicturesCroppedAreas: 잘린 이미지 데이터를 유지하거나 제거합니다.SvgResponsiveLayout: 내보낸 SVG 콘텐츠가 컨테이너에 맞게 조정되도록 합니다.ShowHiddenSlides: 필요 시 숨겨진 슬라이드를 포함합니다.
다음 섹션에서는 가장 일반적인 옵션을 별도로 보여 주어 워크플로에 필요한 옵션만 결합할 수 있도록 합니다.
선택된 슬라이드를 HTML로 변환
슬라이드 번호를 받는 Presentation.save 오버로드는 1부터 시작하는 슬라이드 위치를 사용합니다. 아래 루프는 각 슬라이드를 별도의 HTML 파일로 저장합니다.
let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
let slideCount = presentation.getSlides().size();
for (let slideIndex = 0; slideIndex < slideCount; slideIndex++) {
let slideNumber = slideIndex + 1;
let slideNumbers = java.newArray("int", [slideNumber]);
let htmlFileName = "slide-" + slideNumber + ".html";
presentation.save(htmlFileName, slideNumbers, aspose.slides.SaveFormat.Html);
}
} finally {
presentation.dispose();
}
웹 사이트나 애플리케이션에서 슬라이드당 하나의 HTML 페이지가 필요할 때 이 패턴을 사용하십시오. 각 슬라이드가 동일한 레이아웃이어야 하면 하나의HtmlOptions 인스턴스를 생성하고 각 save 호출에 전달합니다.
반응형 HTML 만들기
ResponsiveHtmlController은HtmlFormatter를 통해 반응형 HTML 출력을 제공합니다. 내보낸 페이지가 브라우저 너비에 더 잘 맞도록 조정해야 할 때 사용하십시오.
let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
let controller = new aspose.slides.ResponsiveHtmlController();
let formatter = aspose.slides.HtmlFormatter.createCustomFormatter(controller);
let htmlOptions = new aspose.slides.HtmlOptions();
htmlOptions.setHtmlFormatter(formatter);
presentation.save("presentation-responsive.html", aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
presentation.dispose();
}
SVG 기반 반응형 레이아웃의 경우HtmlOptions에 SvgResponsiveLayout을 설정합니다. 슬라이드 내용이 확장 가능한 SVG 마크업으로 내보내질 때 유용합니다.
let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
let htmlOptions = new aspose.slides.HtmlOptions();
htmlOptions.setSvgResponsiveLayout(true);
presentation.save("presentation-svg-responsive.html", aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
presentation.dispose();
}
발표자 노트와 댓글 포함
HtmlOptions.setSlidesLayoutOptions를 통해NotesCommentsLayoutingOptions를 사용하여 발표자 노트나 댓글을 포함합니다. 노트와 댓글은 기본적으로 숨겨져 있으며 위치를 지정해야 표시됩니다.
소스 프레젠테이션에 발표자 노트가 포함되어 있다고 가정합니다:
다음 코드는 슬라이드 아래에 발표자 노트를 추가하여 슬라이드 내용을 내보냅니다.
let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
let layoutOptions = new aspose.slides.NotesCommentsLayoutingOptions();
layoutOptions.setNotesPosition(aspose.slides.NotesPositions.BottomFull);
let htmlOptions = new aspose.slides.HtmlOptions();
htmlOptions.setSlidesLayoutOptions(layoutOptions);
presentation.save("presentation-with-notes.html", aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
presentation.dispose();
}
내보낸 HTML에 노트 영역이 포함됩니다:
댓글을 내보내려면 CommentsPosition을 설정합니다(예: CommentsPositions.Right 또는 CommentsPositions.Bottom). 댓글만 필요하면 NotesPosition을 생략합니다. 노트와 댓글을 모두 필요하면 두 속성을 모두 설정합니다.
이미지 품질 및 잘린 영역 제어
HTML 내보내기는 슬라이드 이미지를 압축하여 출력 크기를 줄일 수 있습니다. 높은 이미지 품질이 필요할 때는PicturesCompression 값으로 PicturesCompression을 설정하십시오.
let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
let htmlOptions = new aspose.slides.HtmlOptions();
htmlOptions.setPicturesCompression(aspose.slides.PicturesCompression.Dpi150);
presentation.save("presentation-dpi-150.html", aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
presentation.dispose();
}
기본적으로 이미지의 잘린 영역은 내보낸 출력에서 제거될 수 있습니다. 사용자가 숨겨진 이미지 부분을 복구하거나 검사해야 할 경우에만 잘린 데이터를 유지하십시오. 유지하면 HTML 크기가 증가할 수 있습니다.
let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
let htmlOptions = new aspose.slides.HtmlOptions();
htmlOptions.setDeletePicturesCroppedAreas(false);
presentation.save("presentation-with-cropped-areas.html", aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
presentation.dispose();
}
CSS 추가
간단한 스타일링을 위해 CSS 문자열을 HtmlFormatter.createDocumentFormatter에 전달합니다. 이렇게 하면 Aspose.Slides가 슬라이드 콘텐츠를 계속 렌더링하는 동안 주변 HTML 문서를 변경할 수 있습니다.
let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
let cssRules = "body { margin: 0; background: #f7f7f7; } .slide { margin: 24px auto; }";
let formatter = aspose.slides.HtmlFormatter.createDocumentFormatter(cssRules, true);
let htmlOptions = new aspose.slides.HtmlOptions();
htmlOptions.setHtmlFormatter(formatter);
presentation.save("presentation-styled.html", aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
presentation.dispose();
}
사용자 지정 문서 헤더, 연결된 CSS 파일 또는 슬라이드와 도형 주변에 사용자 지정 마크업이 필요하면 포맷팅 컨트롤러와 함께 HtmlFormatter를 사용합니다.
폰트 임베드
대상 환경에 프레젠테이션 폰트가 설치되지 않을 수 있는 경우EmbedAllFontsHtmlController를 사용해 HTML에 폰트를 임베드합니다. 임베드는 시각적 일관성을 높이지만 출력 크기가 증가합니다.
let presentation = new aspose.slides.Presentation("presentation.pptx");
try {
let fontNamesToExclude = java.newArray("java.lang.String", ["Arial"]);
let fontController = new aspose.slides.EmbedAllFontsHtmlController(fontNamesToExclude);
let formatter = aspose.slides.HtmlFormatter.createCustomFormatter(fontController);
let htmlOptions = new aspose.slides.HtmlOptions();
htmlOptions.setHtmlFormatter(formatter);
presentation.save("presentation-embedded-fonts.html", aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
presentation.dispose();
}
대상 브라우저나 시스템이 이미 폰트를 제공한다고 확신되는 경우에만 폰트를 제외하십시오. 브랜드 폰트 또는 덜 일반적인 폰트의 경우 임베드가 보통 더 안전합니다.
폰트 파일을 임베드 대신 링크하기
HTML 파일 크기를 줄이려면 폰트 데이터를 별도의 WOFF 파일에 쓰고 HTML에 @font-face 규칙을 추가할 수 있습니다. Node.js via Java에서는 일반적으로 EmbedAllFontsHtmlController를 확장하는 작은 Java 헬퍼 클래스를 만들어 폰트 바이트를 출력 디렉터리에 쓰고 생성된 HTML에 @font-face 규칙을 삽입합니다. 해당 헬퍼를 컴파일하고 Node.js 모듈 클래스패스에 추가한 뒤 JavaScript에서 java.newInstanceSync로 인스턴스화합니다.
이러한 헬퍼를 만들 때는 두 경로를 명시적으로 선택해야 합니다:
- 파일 시스템 출력 경로: 생성된 폰트 파일이 기록되는 위치.
- URL 경로: 브라우저가 HTML 문서에서 해당 폰트 파일을 로드할 때 사용하는 경로.
리소스를 외부에 저장
단일 HTML은 이동이 쉽지만 Base64로 임베드된 리소스는 파일을 크게 만들 수 있습니다. 애플리케이션에 외부 이미지, 폰트, 오디오 또는 비디오 파일이 필요하면 리소스를 선택한 디렉터리에 쓰고 브라우저에서 볼 수 있는 URL을 생성하는 내보내기 컨트롤러를 사용하십시오. 파일 시스템 경로와 URL 경로를 배포 레이아웃에 맞게 정렬해 두십시오.
미디어 파일 내보내기
VideoPlayerHtmlController은 비디오와 오디오 파일을 내보내고 브라우저에서 재생할 수 있는 HTML을 작성합니다. 생성자는 다음을 받습니다:
path: 생성된 미디어 파일이 기록될 디렉터리.fileName: 생성 중인 HTML 파일 이름.baseUri: HTML에서 미디어 파일에 대한 링크에 사용되는 절대 URI 접두사.
HTML 파일이 html-output/presentation.html이고 미디어 파일이 html-output/media에 저장되는 경우, path는 디스크상의 미디어 디렉터리를 가리키고, baseUri는 브라우저 관점에서 동일한 디렉터리를 가리켜야 합니다. 로컬 미리보기를 위해서는 미디어 디렉터리에서 file:/// URI를 만들 수 있습니다. 배포된 애플리케이션에서는 게시된 미디어 디렉터리의 절대 URL을 사용하십시오.
let fs = require("fs");
let path = require("path");
let outputDirectory = path.join(process.cwd(), "html-output");
let mediaDirectory = path.join(outputDirectory, "media");
fs.mkdirSync(mediaDirectory, { recursive: true });
let htmlFileName = "presentation.html";
let mediaBaseUri = "file:///" + mediaDirectory.replace(/\\/g, "/") + "/";
let presentation = new aspose.slides.Presentation();
try {
let videoFilePath = path.join(process.cwd(), "intro.mp4");
let videoBytes = Array.from(fs.readFileSync(videoFilePath));
let videoData = java.newArray("byte", videoBytes);
let video = presentation.getVideos().addVideo(videoData);
let slide = presentation.getSlides().get_Item(0);
slide.getShapes().addVideoFrame(20, 20, 480, 270, video);
let controller = new aspose.slides.VideoPlayerHtmlController(mediaDirectory, htmlFileName, mediaBaseUri);
let formatter = aspose.slides.HtmlFormatter.createCustomFormatter(controller);
let svgOptions = new aspose.slides.SVGOptions(controller);
let slideImageFormat = aspose.slides.SlideImageFormat.svg(svgOptions);
let htmlOptions = new aspose.slides.HtmlOptions(controller);
htmlOptions.setHtmlFormatter(formatter);
htmlOptions.setSlideImageFormat(slideImageFormat);
let htmlFilePath = path.join(outputDirectory, htmlFileName);
presentation.save(htmlFilePath, aspose.slides.SaveFormat.Html, htmlOptions);
} finally {
presentation.dispose();
}
특히 서버 애플리케이션에서는 작업당 고유한 출력 디렉터리를 사용하십시오. 공유 출력 경로는 서로 다른 변환의 파일이 덮어쓰여지는 원인이 될 수 있습니다.
성능 및 리소스 관리
HTML 변환은 렌더링 작업이므로 처리 시간과 메모리 사용량은 슬라이드 수, 이미지 해상도, 폰트, 효과, 차트 및 임베드된 미디어에 따라 달라집니다. 높은 PicturesCompression DPI 값, 임베드된 폰트, SVG 출력 및 유지된 잘린 이미지 영역은 충실도를 높이지만 일반적으로 출력 크기를 증가시킵니다.
배치 변환을 위해:
- 모든 Presentation 인스턴스를 즉시 해제하십시오.
- 작업별로 별도의 출력 디렉터리를 사용하십시오.
- 충실도가 필요하지 않은 경우 일반 폰트 임베드를 피하십시오.
- HTML이 미리보기 또는 썸네일용인 경우 이미지 DPI를 낮추십시오.
- 배포 경로가 최종 확정될 때까지 원본 프레젠테이션, 생성된 HTML 및 외부 리소스를 함께 보관하십시오.
FAQ
HTML 출력에서 하이퍼링크가 보존되나요?
예. 프레젠테이션 하이퍼링크는 HTML로 내보내지며 대상 URL이 유효하면 클릭이 가능합니다.
프레젠테이션을 HTML로 병렬 변환할 수 있나요?
예, 하지만 하나의 Presentation 인스턴스를 워커 간에 공유하지 마십시오. 다른 파일을 별개의 프레젠테이션 인스턴스, 별도 스트림 및 별도 출력 디렉터리로 처리하십시오. 자세한 내용은 멀티스레딩 가이드를 참조하십시오.
Presentation 객체는 스레드 안전한가요?
아니요. 단일 Presentation 인스턴스는 하나의 워커에서 로드, 수정, 저장 및 해제되어야 합니다. 병렬 작업을 위해서는 워커당 독립적인 인스턴스를 생성하거나 프로세스를 분리하십시오.
생성된 HTML 파일이 큰 이유는 무엇인가요?
기본 내보내기는 리소스를 HTML에 직접 임베드합니다. 임베드된 폰트, 고 DPI 이미지, 미디어, SVG 콘텐츠 및 유지된 잘린 이미지 영역도 크기를 증가시킵니다. 외부 리소스를 사용하고, 일반 폰트를 임베드에서 제외하며, 작은 출력이 최대 충실도보다 중요할 경우 PicturesCompression을 낮추십시오.
PowerPoint에서 24pt와 같은 글꼴 크기가 HTML에서는 17.999819pt로 표시되는 이유는 무엇인가요?
PowerPoint와 HTML은 다른 DPI 모델을 사용하기 때문입니다. PowerPoint는 72 DPI 기반의 타이포그래픽 포인트로 텍스트 크기를 저장하고, HTML 레이아웃은 96 DPI 기반의 CSS 픽셀을 사용합니다. Aspose.Slides가 프레젠테이션을 HTML로 내보낼 때 글꼴 크기가 이러한 시스템 간에 변환되면서 작은 반올림 차이가 발생할 수 있습니다.
이 값은 실제 시각적 글꼴 크기 변화를 나타내는 것이 아니라 PowerPoint와 HTML 간 텍스트 메트릭을 변환하면서 발생하는 수학적 부수 효과에 불과합니다.
미디어 내보내기에서 baseUri를 어떻게 선택해야 하나요?
브라우저 관점에서의 경로를 baseUri로 선택하고 절대 URI로 전달하십시오. 로컬 미리보기를 위해서는 출력 디렉터리에서 file:/// URI를 파생시킬 수 있습니다. 배포 시에는 게시된 미디어 디렉터리의 절대 URL을 사용하십시오. 파일 시스템 path와 브라우저 baseUri는 문자열이 동일할 필요는 없지만 동일한 리소스 위치를 가리켜야 합니다.
숨겨진 슬라이드를 포함할 수 있나요?
예. 숨겨진 슬라이드를 내보내야 할 경우 HtmlOptions에서 ShowHiddenSlides를 true로 설정하십시오.