How to manually convert PDF to HTML5

There is no conversion required to make a PDF document available in HTML5. All you have to do is point FlowPaper to your PDF document and you're all set! We recommend having a look at our technology comparison to find the best set of technologies for your audience.

We have changed our name from FlexPaper to FlowPaper so if you'are using an older version than 2.4.7 then use FlexPaperViewer instad of FlowPaperViewer when creating the viewer.


The code sample below shows how to display a document in FlowPaper using HTML5.

  $('#documentViewer').FlowPaperViewer(
  { config : {
    PDFFile : 'pdf/Paper.pdf',
    RenderingOrder : 'html5'
  }});


Converting large documents from PDF to HTML5

FlowPaper supports splitting PDF documents into one file per page and loads only the visible pages to reduce bandwidth consumption and load time for your visitors. To split the document we typically recommend a tool like PDFTK if you are doing this manually. Our Desktop Publisher will do this work automatically for you from your desktop if you prefer that. Use the following command to split the document manually using PDFTK:
pdftk.exe Paper.pdf burst output Paper_%1d.pdf compress
You will also need to supply a JSON file to FlowPaper when using this mode. This is to give FlowPaper the ability to search the document even if not fully downloaded. A JSON file can be created from your PDF with the following command using PDF2JSON:
pdf2json.exe Paper.pdf -enc UTF-8 -compress -split 10 Paper.pdf_%.js
To configure your viewer with these new files, you must adjust your PDFFile and JSONFile parameters. The following example uses the files created above to load them in split mode:
  $('#documentViewer').FlowPaperViewer(
  { config : {
    PDFFile : 'pdf/Paper_[*,2].pdf',
    JSONFile : 'pdf/Paper.pdf_{page}.js',
    RenderingOrder : 'html5'
  }});