2 Viewing and Interrogating PDF in the Browser

HOOPS Publish can be used view interactive 3D PDF documents in a browser using standard web technologies without the help of any plug-ins.

This section first addresses how to export a PDF file so it could be viewed inside a browser, followed by a chapter on how to customize our web experience.

PDF features

No plugin required

Support 3D PDF interactivity

Browser compatibility

The generated document can be viewed using:

More specifically, your browser must be able to support:

You may want to check your browser compatibility using this link.

Web export API

To generate web files from a PDF, use the A3DRWParamsExportHtmlData data structure and call the method A3DConvertPDFToWebFormat.

// This snippet is also part of the sample provided in the package
A3DRWParamsExportHtmlData paramsExportData;
paramsExportData.m_pcHtmlTemplateName = pc3DTemplateFile;
paramsExportData.m_eHtmlOutputMode = kA3DWebOnline;
A3DStatus status = A3DConvertPDFToWebFormat(pcFileName, &paramsExportData, pcOutputDirectory, pcOutputName, kA3DWebOutFormatHtml);

The file pc3DTemplateFile in this example is a file that will be used as a template for generating HTML files for each 3D annotation in your PDF. It is provided in the HOOPS Publish package.

3 kinds of outputs are available that can be chosen by the m_eHtmlOutputMode variable. Each have their own way to be viewed inside a web browser to fill different needs.

Client/Server integration

In client/server mode (kA3DWebOnline), the call to the function delivers one XML file and one HTML file per 3D stream in your PDF document.

The XML file is the entry point of all. It represents your PDF document. The XML and HTML files will be parsed and displayed in the browser by a client web viewer that we provide as part of HOOPS Publish. See the samples directory in the package download: samples\publish\publishhtml\htmlforserver .

To help test this functionality, we have provided a simple HTTP server that can be launched by clicking on samples\publish\publishhtml\htmlforserver\exportpdftohtml\start_server.bat .

Once the server is launched, open the following URL in your browser: localhost:11180/viewer.html?sample=sample_DemoDataModel . You can load your own 3D PDF converted into HTML by updating the sample querystring parameter with the XML file name describing your document without the .xml file extension : localhost:11180/viewer.html?sample=XmlFilenameWithoutExtension .

Be sure to properly URL-encode 'XmlFilenameWithoutExtension'. For instance, there are no spaces in a URL, so any space character in your file name must be replaced by "%20" (without the quotes) for a space character. See https://www.w3schools.com/tags/ref_urlencode.asp for more information about URL encoding.

By default, the viewer of a 3D annotation will display a toolbar and a panel will display the model tree and views. You can hide them by adding the following to your querystring:

Example: localhost:11180/viewer.html?sample=sample_DemoDataModel&modeltree=none&toolbar=none

viewer.html can load any generated XML file; to change the file you're viewing, simply change the query string "sample=AnotherXmlFilenameWithoutExtension" in the URL with the new file name.

If you want to integrate this viewer into a larger website, note that the folder where viewer.html is located must be set as a root for all files in it. This will allow you to drop any XML/HTML generated files into the 'PdfContent' folder at any depth in the subfolders. To view an XML file in a subfolder of 'PdfContent', just change the querystring to "sample=SubFolder/XmlFilenameWithoutExtension" in the URL.

Please note, viewer.html can be customized to include your own content or logo. If you need to further customize the 3D viewer component, you might consider using HOOPS Communicator or The HOOPS Web platform. Please contact us for more information.

Integrate into an existing website

The sample contains the file viewer.html which is the entry point of our demo. The file is readable and a good starting point for those who want to integrate this solution into an existing website. The file contains a script section that checks some compatibility with web browsers, and load the XML document (which is your PDF export), retrieve the content and call TS3DPdfLoader.ASyncLoadFromXml(xmlDocument) where xmlDocument is the xml string.

HTTP Server Configuration

Also, to optimize network bandwith, it could be good to enable gzip compression for all files contained in PdfContent folder.

Single HTML file - Standalone

For single HTML standalone file output (kA3DWebOfflineSingleFile), when calling A3DConvertPDFToWebFormat, you should fill the A3DRWParamsExportHtmlData data structure with new parameters. The call to the function delivers one HTML file that could be read anywhere if you havbe a compatible browser.

You must create a A3DRWHtmlOfflineData data structure and set it with the parameter m_pHtmlOfflineData.
This structure contains two additional fields :

One of the main advantages of this mode is to enable offline viewing of the PDF. Additional benefits include, for instance, simplified cache management on mobile devices.

// This snippet is also part of the sample provided in the package
A3DRWParamsExportHtmlData paramsExportData;
paramsExportData.m_pcHtmlTemplateName = pc3DTemplateFile;
// set the output as monolithic
// fill and set mandatory parameters
offlineData.m_pcPathToHtmlViewerFile = viewerFilePath;
paramsExportData.m_pHtmlOfflineData = &offlineData;
A3DStatus status = A3DConvertPDFToWebFormat(pcFileName, &paramsExportData, pcOutputDirectory, pcOutputName, kA3DWebOutFormatHtml);

Android specificities

On Android, the browsers have different security settings. Chrome, for instance, blocks the linking of javascript files if the html is opened using something else than the file protocol. Therefore, on Android, you should always have a path starting with file:///sdcard/... Some file system explorers on Android do not open files using file protocol by default.

Single HTML file - Distributed

For this single distributed file output (kA3DWebOfflineWithDependencies), you should also fill m_pHtmlOfflineData with the same elements.

The changes from a standalone file lie in how the file is read from the browser. This is not a standalone file as it requires js and css folders to be in the same folder as the file. Those folders are part of the sample we deliver in samples\publish\publishhtml\htmlforserver\exportpdftohtml\rootspan>.

There are two benefits for using this export :

However the main downside is, if you distribute this file, the one who reads it should have the js and css files on their device as well.

top_level:1 prog_guide:3