Overview

The OfficeToHtml_Reactive component for OutSystems leverages the "OfficeToHtml" jQuery plugin to convert Office files (PPTX, DOCX, XLSX) and PDF documents to HTML using pure JavaScript. This component enables seamless integration and easy file viewing within your OutSystems applications.

Features

• Convert Various Formats: Supports conversion of PPTX, DOCX, XLSX, and PDF files to HTML.
• Flexible Input: Accepts a URL as an input parameter to directly view files or provides an input box for file upload when no URL is provided.
• Easy Integration: Simply drag and drop the component into your application to get started.

Getting Started

1. Adding the Component:

   • Drag and drop the OfficeToHtml_File web block onto your page in the OutSystems environment.

2. Using URL as Input:

   • If you have a file URL that you want to view, pass the URL as an input parameter to the web block.
   • The component will automatically fetch and display the file content.

3. Using File Upload:

   • If you do not pass any input parameter to the web block, an input box will be displayed.
   • Users can upload a file directly from their device to view its content.

Input Parameters

• FileURL (Text): The URL of the file to be converted and displayed. If this parameter is provided, the component will fetch and display the file directly.
• No Input Parameter: If no URL is provided, an input box will be shown, allowing users to upload a file from their device.
  
  
  
  For more customization
  
  
• pdfSetting:
  

  #	name	description	default value
  1	setLang	set manually the interface language(short name code) -click here to see all supported languages: link. if set to "" or not set at all then the language will be as the browser interface language or English if it is not supported.	""
  1	thumbnailViewBtn	Thumbnail viewer button (true - view button, false - hide button).	true
  2	searchBtn	Seraching button (true - view button, false - hide button).	true
  3	nextPreviousBtn	next and previous button (true - view button, false - hide button).	true
  4	pageNumberTxt	page number textbox  (true - view text, false - hide text).	true
  5	totalPagesLabel	total pages label (true - view label, false - hide label).	true
  6	zoomBtns	zoom buttons (true - view buttons, false - hide buttons).	true
  7	scaleSelector	scale selector (true - view selector, false - hide selector).	true
  8	presantationModeBtn	presentation mode button (true - view button, false - hide button).	true
  9	openFileBtn	open file button (true - view button, false - hide button).	true
  10	printBtn	print button (true - view button, false - hide button).	true
  11	downloadBtn	download button (true - view button, false - hide button).	true
  12	bookmarkBtn	bookmark button - open current view in new window (true - view button, false - hide button).	true
  13	secondaryToolbarBtn	secondary toolbar button (true - view button, false - hide button).	true
  14	firstPageBtn	go to first page button (true - view button, false - hide button).	true
  15	lastPageBtn	go to last page button (true - view button, false - hide button).	true
  16	pageRotateCwBtn	rotate page clockwise button (true - view button, false - hide button).	true
  17	pageRotateCcwBtn	rotate page counter clockwise button (true - view button, false - hide button).	true
  18	cursorSelectTextToolbarBtn	select text button (true - view button, false - hide button).	true
  19	cursorHandToolbarBtn	cursor hand button (true - view button, false - hide button).	true

  
  

  docxSetting:

  #	name	description	default value
  1	isRtl	set if the docx document is "rtl" (right to left) or "ltr" (left to right). set "auto" for automatic detaction (work for hebrew only)	"auto"
  2		For the others options see mammoth.js github page

  
  

  pptxSetting:

  #	name	description	default value
  1	slidesScale	Change Slides scale by percent(%). for orginal size set this option to "" or "100%"	""
  2	slideMode	If true, turn on presentation mode. The settings of the presentation mode are controlled by the variables "slideModeConfig"	false
  3	keyBoardShortCut	If true, enable to enter or exit from presentation mode by keyboard shortcut F5	false
  4	mediaProcess	if true, then process video and audio files.If 'false', you can not play and see or hear the videos and audios embedded in the presentation.	true
  5	jsZipV2	url link to jsZip version 2. This allows the ability to load jsZip v.2 in case jsZip v.3 is loaded for another use.	false
  6	slideModeConfig	settings of the presentation mode. for more details click here	{}
  7	slideModeConfig.first	The first slide that will be loaded.	1
  8	slideModeConfig.nav	show ('true') or hide ('false') navigator buttons.	true
  9	slideModeConfig.navTxtColor	color of slide number text and total slides number shown in navigator area.	"black"
  10	slideModeConfig.keyBoardShortCut	if true , enable to control presentation by keyboard shortcuts. for keyboard shortcuts list click here	false
  11	slideModeConfig.showSlideNum	if true , show slide number in navigator area.	true
  12	slideModeConfig.showTotalSlideNum	if true , show total slides number in navigator area.	true
  13	slideModeConfig.autoSlide	options:'false' or number (seconds). if set 'false' it disable auto slide mode. if set number then auto slide mode will be enabled and the number will be the time between slides.	1
  14	slideModeConfig.randomAutoSlide	if true and autoSlide mode are enabled then The slides appear in random order.	false
  15	slideModeConfig.loop	if true, in presentation mode , after last slide will go to first slide. in auto slideMode, the presentation will play in loop.	false
  16	slideModeConfig.background	color of presentation background.	false
  17	slideModeConfig.transition	transition types options: "slid","fade","default","random".	"default"
  18	slideModeConfig.transitionTime	Time delay in seconds between slides.	1
  19	slideType (v1.11.0)	slide viewr option: 'divs2slidesjs', 'revealjs'(https://revealjs.com)	"divs2slidesjs"
  20	revealjsPath (v1.11.0)	path to js file of revealjs.	'./revealjs/reveal.js'
  21	revealjsConfig (v1.11.0)	revealjs options. see https://revealjs.com */

  
  

  sheetSetting:

  #	name	description	default value
  1	jqueryui	if true , will use jQuery-ui interface. To use this option, must include "jquery-ui.js" and "jquery-ui.css" in the HEAD area.	false
  2		For the others options see handsontable tutorial

  
  

  imageSetting:

  #	name	description	default value
  1		For options see verySimpleImageViewer github page