The TX Text Control Document Viewer can be used to view a variety of industry-standard document types, including Office Open XML DOCX, DOC, RTF, and PDF. All documents can be viewed in browser applications with the same look and feel, and can be used to fill out forms or review documents with track changes, comments, and annotations.

The following screenshot shows a typical scenario of a form that is made available for an end user to fill out and submit.

Filling out forms in TX Text Control Document Viewer

As of version 32.3.1, the render mode can be specified when adding an instance to a view. The render mode defines how the document is rendered in the viewer. The following render modes are available:

  • Auto: The viewer automatically selects the best mode based on the browser capabilities.
  • Bitmap: The document is rendered as a bitmap image.
  • GlyphOutlines: The document is rendered as SVG vector graphics.
  • Font: The document is rendered using the actual fonts.

The following code snippet shows how to add the viewer to a view with a specific render mode, in this case GlyphOutlines:

@Html.TXTextControl().DocumentViewer(settings => {
settings.DocumentPath = ("App_Data/Documents/invoice.docx");
settings.RenderMode = ComponentRenderMode.GlyphOutlines;
}).Render()
view raw test.cs hosted with ❤ by GitHub

Bitmap vs. SVG

Now the document is loaded and pages are rendered as vector graphics, with all fonts rendered to glyphs, eliminating the need for client-side fonts to render a consistent document across browsers and devices. This mode is very useful when using a higher resolution (4k+), as SVGs are rendered quickly and efficiently by modern browsers, but small elements are difficult to read when downscaled.

At lower resolutions, such as Full HD, the bitmap rendering mode is recommended because smaller text elements render more smoothly and are easier to read on lower resolution screens. The disadvantage of the bitmap rendering mode is that the document is rendered as an image, which can be slower to render and can be less sharp when zooming in.

When using the Font mode, the actual fonts are used to render the document. The disadvantage of this mode is that the fonts must be available on the client-side, which can be a problem when using custom fonts or when the document contains fonts that are not available on the client-side.

When using the Auto mode, the viewer automatically selects the best mode based on the browser capabilities. This is the default mode and is recommended for most scenarios.

Size Considerations

When using the GlyphOutlines mode, the document is rendered as SVG vector graphics. This mode is very efficient in terms of file size because the document is rendered as vector graphics. The returned bitmap images are compressed and optimized, but the file size is larger compared to the SVG vector graphics. When using the Font mode, the file size is the smallest because it contains only the actual text information and positions.

The following screenshot from Chrome Developer Tools shows the return page size of a sample document when rendered in Bitmap mode:

Chrome Developer Tools showing the return page size of a sample document when rendered in Bitmap mode

The following screenshot shows the return page size of the same document when rendered in GlyphOutlines mode:

Chrome Developer Tools showing the return page size of a sample document when rendered in GlyphOutlines mode

The next screenshot shows the return page size of the same document when rendered in Font mode:

Chrome Developer Tools showing the return page size of a sample document when rendered in Font mode

This is clearly the smallest file size, as it contains only the actual text information and positions, including included images, which of course need to be embedded.

Conclusion

The TX Text Control Document Viewer can be used to view a variety of industry-standard document types, including Office Open XML DOCX, DOC, RTF, and PDF. The viewer can be used to fill out forms or review documents with track changes, comments, and annotations. The render mode can be specified when adding an instance to a view. The render mode defines how the document is rendered in the viewer. The following render modes are available: Auto, Bitmap, GlyphOutlines, and Font.

When using the GlyphOutlines mode, the document is rendered as SVG vector graphics. This mode is very efficient in terms of file size because the document is rendered as vector graphics. The returned bitmap images are compressed and optimized, but the file size is larger compared to the SVG vector graphics. When using the Font mode, the file size is the smallest because it contains only the actual text information and positions.