Stable version 1.0.5 (Compatible with OutSystems 11)

Uploaded

on 27 Oct (14 hours ago)

4.8

(4 ratings)

Documentation

1.0.5

Overview

OFFICETOHTML_FileView previews PDF, Word, PowerPoint, spreadsheet and image files inside an OutSystems Reactive Web app. Everything is rendered in the browser: no server conversion, no plugin, nothing uploaded. Module: OfficeToHtml_Reactive (Forge).

The block works in two modes:

URL mode: set OptionalConfiguration.url and the file at that address is displayed.
File picker mode: leave url empty and the block shows a file picker; the chosen file is previewed and returned through the GetFile event.

Format	Extensions	Rendered with
PDF	pdf	PDF.js viewer (toolbar, thumbnails, search, print)
Word	docx	mammoth.js (converted to HTML)
PowerPoint	pptx	PPTXjs + divs2slides (slide mode)
Spreadsheet	xlsx, xls, xlsm, xlsb, csv, ods, fods, dif, slk, prn, dbf	SheetJS + Handsontable (one tab per sheet)
Image	png, jpg, jpeg, gif, bmp, svg, tif, tiff	verySimpleImageViewer (zoom, pan, rotate)
Not supported	doc, ppt	A message asks the user to convert to docx or pptx

Getting started

Install OfficeToHtml_Reactive from the Forge.
In your Reactive module, open Manage Dependencies, select OfficeToHtml_Reactive and tick OFFICETOHTML_FileView (plus OfficeToHtml_CreateFileUrl and OfficeToHtml_RevokeFileUrl if you show Binary Data).
Drag OFFICETOHTML_FileView onto a screen.
Set OptionalConfiguration:
- To show a file from a URL: { url: GetOwnerURLPath() + "Report.pdf" }
- To let the user pick a file: { }
Publish and open the screen.

Files added to your module under Data > Resources with Deploy Action "Deploy to Target Directory" are reachable at GetOwnerURLPath() + "<file name>". Encode spaces in the name (data%20(1).xlsx).

Block: OFFICETOHTML_FileView

Shows one file. The viewer area is 800 px tall and scrolls inside itself.

Input parameter

Name	Type	Mandatory	Description
OptionalConfiguration	OfficeToHtmlConfig	No	What to display and how. Set `url` to show a file from a URL; leave it empty to show a file picker. Changing the value at runtime reloads the viewer (identical values are ignored).

Event

Name	Mandatory	Triggered when
GetFile	No	The user picks a file with the block's file picker (only when `url` is empty). The file is previewed automatically; handle the event to save or upload it.

Event parameter	Type	Description
FIle	Binary Data	Content of the picked file
FileName	Text	Name of the picked file, including its extension (e.g. Report.pdf)

Lifecycle

OnReady: renders the viewer from OptionalConfiguration.
OnParametersChanged: re-renders when OptionalConfiguration changes.
OnDestroy: releases the file input handler, PDF.js page-wide listeners and object URLs.

Client actions

OfficeToHtml_CreateFileUrl turns Binary Data into a browser object URL the block can display. The file name is appended as a fragment (blob:…#Report.pdf) so the viewer can detect the type.

Parameter	Direction	Type	Mandatory	Description
FileContent	In	Binary Data	Yes	Content of the file, e.g. from a database record or an upload widget
FileName	In	Text	Yes	File name with extension (e.g. Report.pdf); the extension selects the viewer
MimeType	In	Text	No	MIME type (e.g. application/pdf); leave empty if unknown
FileUrl	Out	Text	—	Object URL to pass to `OfficeToHtmlConfig.url`; empty when FileContent is empty

OfficeToHtml_RevokeFileUrl releases a URL created by OfficeToHtml_CreateFileUrl to free browser memory. Call it before creating a new URL for the same viewer, and in the screen's OnDestroy.

Parameter	Direction	Type	Mandatory	Description
FileUrl	In	Text	Yes	URL returned by OfficeToHtml_CreateFileUrl; other URLs are ignored

Configuration at a glance

[embed: node/b72dca65-0f44]

The top level chooses the file; each format reads only its own settings group, and PptxSetting nests SlideModeConfig.

Configuration reference

Every attribute is optional; attributes you leave out keep their default. In an expression you can set only what you need, e.g. { url: "a.pdf", PdfSetting: { PrintBtn: False } }.

OfficeToHtmlConfig

Attribute	Type	Default	Description
url	Text	""	File to display (absolute, relative, or an object URL from OfficeToHtml_CreateFileUrl). Empty = show the file picker. Other domains need CORS.
FileType	Text	""	Forces the type (e.g. "pdf", "docx") when the url has no extension. Empty = detect from the extension.
inputObjId	Text	"grv"	Advanced. Id of the file input to listen to. Keep "grv" for the block's own picker; set another input's id to drive the viewer from it; "" disables picking.
PdfSetting	PdfSetting	—	PDF viewer options
DocxSetting	DocxSetting	—	Word options
PptxSetting	PptxSetting	—	PowerPoint options
SheetSetting	SheetSetting	—	Spreadsheet options
ImageSetting	ImageSetting	—	Image options

PdfSetting

Every Boolean shows (True) or hides (False) a toolbar control; all default to True.

Attribute	Type	Default	Controls
SetLang	Text	""	Interface language, e.g. "en-US", "fr" (list); empty = browser language
ThumbnailViewBtn	Boolean	True	Sidebar with thumbnails and outline
SearchBtn	Boolean	True	Find in document
NextPreviousBtn	Boolean	True	Next / previous page
PageNumberTxt	Boolean	True	Page number box
TotalPagesLabel	Boolean	True	Total pages label
ZoomBtns	Boolean	True	Zoom in / out
ScaleSelector	Boolean	True	Zoom level dropdown
PresantationModeBtn	Boolean	True	Presentation mode (full screen)
OpenFileBtn	Boolean	True	Open another PDF from the computer
PrintBtn	Boolean	True	Print
DownloadBtn	Boolean	True	Download
BookmarkBtn	Boolean	True	Open current view in a new window
SecondaryToolbarBtn	Boolean	True	Tools menu
FirstPageBtn	Boolean	True	Tools menu: first page
LastPageBtn	Boolean	True	Tools menu: last page
PageRotateCwBtn	Boolean	True	Tools menu: rotate clockwise
PageRotateCcwBtn	Boolean	True	Tools menu: rotate counterclockwise
CursorSelectTextToolbarBtn	Boolean	True	Tools menu: text selection tool
CursorHandToolbarBtn	Boolean	True	Tools menu: hand tool

DocxSetting

Attribute	Type	Default	Description
IncludeEmbeddedStyleMap	Boolean	True	Use the style map embedded in the document
IncludeDefaultStyleMap	Boolean	True	Apply mammoth.js' default style map (Heading 1 → h1, ...)
IgnoreEmptyParagraphs	Boolean	False	Skip empty paragraphs
IdPrefix	Text	""	Prefix for generated element ids, to avoid clashes on the page
IsRtl	Text	""	"rtl", "ltr" or "auto" (detects Hebrew only); empty = direction not changed

ImageSetting

Attribute	Type	Default	Description
Mouse	Boolean	True	Zoom with the mouse wheel, pan by dragging
Keyboard	Boolean	True	Zoom and move with +, - and arrow keys
Toolbar	Boolean	True	Show the zoom toolbar
RotateToolbar	Boolean	False	Show rotate buttons

PptxSetting

Attribute	Type	Default	Description
SlidesScale	Text	""	Slide scale, e.g. "50%"; empty = original size
SlideMode	Boolean	True	One slide at a time with navigation; False = all slides listed
KeyBoardShortCut	Boolean	False	F5 enters / leaves slide mode (SlideMode must be True)
MediaProcess	Boolean	True	Process embedded audio and video; False loads faster
JsZipV2	Boolean	False	Keep False; JSZip v2 is already included
SlideModeConfig	SlideModeConfig	—	Slide mode options below

SlideModeConfig

Attribute	Type	Default	Description
First	Long Integer	1	Slide shown first
Nav	Boolean	True	Previous / next buttons
NavTxtColor	Text	"black"	CSS color of the slide counter
KeyBoardShortCut	Boolean	False	Arrow keys navigate; F8 starts / stops auto-play
ShowSlideNum	Boolean	True	Show current slide number
ShowTotalSlideNum	Boolean	True	Show total slide count
AutoSlide	Long Integer	1	Seconds per slide during auto-play
RandomAutoSlide	Boolean	False	Auto-play in random order
Loop	Boolean	False	Return to the first slide after the last
Background	Boolean	False	Keep False (default background)
Transition	Text	"default"	"slid", "fade", "default" or "random"; visible when TransitionTime > 0.5
TransitionTime	Long Integer	1	Transition duration in seconds

SheetSetting

Options passed to Handsontable for every sheet.

Attribute	Type	Default	Description
Search	Boolean	False	Search box that highlights matching cells
ReadOnly	Boolean	False	Prevent editing (changes are never saved to the file anyway)
ColumnSorting	Boolean	True	Click a header to sort
SortIndicator	Boolean	False	Arrow on the sorted column
RowHeaders	Boolean	True	Row numbers
ColHeaders	Boolean	True	Column letters
FixedRowsTop	Long Integer	0	Frozen rows at the top
FixedColumnsLeft	Long Integer	0	Frozen columns on the left
AutoColumnSize	Boolean	True	Fit column widths to content
AutoRowSize	Boolean	False	Fit row heights to content (slower)
SelectionMode	Text	"single"	"single", "range" or "multiple"
Copyable	Boolean	True	Ctrl+C copies selected cells
ContextMenu	Boolean	False	Right-click menu
CustomBorders	Boolean	False	Custom cell borders
AllowEmpty	Boolean	True	Empty cells allowed when editable
ActiveHeaderClassName	Text	""	CSS class on headers of selected cells
Language	Text	"en-US"	Grid interface language
StartRows	Long Integer	1	Minimum rows for an empty sheet
StartCols	Long Integer	1	Minimum columns for an empty sheet
Jqueryui	Boolean	False	Use jQuery UI tabs (needs jQuery UI CSS)
Columns	Boolean	False	Keep False (all columns shown)
Width	Boolean	False	Keep False (grid as wide as the viewer)
Height	Boolean	False	Keep False (grid as tall as the viewer)

Recipes

Use case	OptionalConfiguration
File from the module's resources	`{ url: GetOwnerURLPath() + "Report.pdf" }`
Let the user pick any file	`{ }`
Read-only PDF (no print, download or open)	`{ url: FileUrl, PdfSetting: { PrintBtn: False, DownloadBtn: False, OpenFileBtn: False } }`
URL without an extension (e.g. a REST endpoint)	`{ url: "/api/files/42", FileType: "pdf" }`
Searchable, read-only spreadsheet	`{ url: FileUrl, SheetSetting: { Search: True, ReadOnly: True } }`
All slides listed, no slide mode	`{ url: FileUrl, PptxSetting: { SlideMode: False } }`
Arabic or Hebrew Word document	`{ url: FileUrl, DocxSetting: { IsRtl: "rtl" } }`
Image with rotate buttons	`{ url: FileUrl, ImageSetting: { RotateToolbar: True } }`

Show a file stored in the database

Fetch the record in a data action or aggregate (e.g. GetDocument.List.Current.Document.File).
In a client action, call OfficeToHtml_CreateFileUrl with FileContent = the binary and FileName = its name (e.g. "Invoice.pdf").
Assign FileUrl to a local variable and bind the block: { url: FileUrl }.
In the screen's OnDestroy (or before loading the next file), call OfficeToHtml_RevokeFileUrl with that URL.

Save the file the user picked

Leave url empty so the block shows its file picker.
Handle GetFile: the handler receives FIle (binary) and FileName.
Call your server action to store them. The preview is already on screen.

Troubleshooting

Symptom	Cause	Fix
"The file is not supported!"	Extension not recognised, or the url has none	Check the file name, or set `FileType`
".doc / .ppt file is not supported"	Legacy binary Office format	Convert to .docx / .pptx
"Unable to load the document / spreadsheet / presentation"	URL returns 404, needs login, or is blocked by CORS	Open the URL in a new tab; enable CORS on the other server; use OfficeToHtml_CreateFileUrl for protected files
"Invalid or corrupted ... file"	The file is damaged or not really that format	Re-save the file in Office and try again
PPTX opened as PDF ("Invalid or corrupted PDF file")	Older component version	Update to the latest version and refresh references
Second PDF on the same screen is broken	PDF.js uses fixed element ids	Show one PDF per screen
Spreadsheet grid looks cut off	Viewer height (800 px) is smaller than the sheet	The grid scrolls inside the viewer; use FixedRowsTop for headers
Old preview stays after changing the url	Consumer still references an old component version	Refresh references and republish the consumer

Limitations

One PDF per screen at a time; other formats can have several viewers.
Rendering happens in the browser: very large files (hundreds of pages or tens of MB) load slowly.
PPTX and DOCX rendering is an HTML approximation; complex layouts, fonts and animations may differ from Office.
Changes made in the spreadsheet grid are never saved back to the file.

1.0.4

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

Adding the Component:
- Drag and drop the OfficeToHtml_File web block onto your page in the OutSystems environment.
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.
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

1.0.3