What's New in GrapeCity Documents in v6

We are excited to announce the GrapeCity Documents v6 releases of Documents for PDF, Documents PDF Viewer, Documents for Word, Documents for Imaging, Documents for Excel .NET, and Documents for Excel Java, which adds many new features for business document processing. In this release, we introduce two new controls - JavaScript-based GrapeCity Documents Image Viewer and GrapeCity Documents Data Viewer to view and edit images and view data files, respectively. Also included are new text markup annotations in GcPdfViewer, Word Report Template enhancements for adding calculations and conditionally showing/hiding blocks of data, and enhancements to GcPdf, GcExcel, GcWord, and GcImaging APIs as per customer requests and roadmap.

Have a look at the key highlights below:

• GrapeCity Documents Image Viewer (GcImageViewer) ^New
• GrapeCity Documents Data Viewer (GcDataViewer) ^New
• GrapeCity Documents for PDF (GcPdf)
• GrapeCity Documents PDF Viewer (GcPdfViewer)
• GrapeCity Documents for Excel (GcExcel)
• GrapeCity Documents for Word (GcWord)
• GrapeCity Documents for Imaging (GcImaging)

GrapeCity Documents Image Viewer (GcImageViewer) ^New

GrapeCity Documents for Imaging introduces JavaScript-based client-side GrapeCity Documents Image Viewer (GcImageViewer). The control supports viewing and editing images in popular formats. It provides plugin support for adding image editing options and the ability to download the edited image on the client-side. GcImageViewer can be conveniently embedded in major web frameworks such as Pure JavaScript, Angular, Vue, ASP.NET Core, ASP.NET MVC, HTML5, React, and Preact. It is a cross-platform solution for viewing and editing Image files in web apps running on Windows, MAC, Linux, iOS, and Android devices. It works in all modern browsers, including Edge, Chrome, Firefox, Opera, and Safari.

The snapshot above showcases the different UI options available in GcImageViewer to load, process, and save images. The following are key features of the control:

1. Load Image: This option lets you load images of JPEG, PNG, TIFF, GIF, BMP, ICO, SVG, and WebP.
2. Zoom control: This control offers zoom-in and zoom-out buttons to zoom the image and a zoom textbox to define a specific zoom value.
3. FullScreen: To display the viewer in fullscreen and hide the menu bar at the top. As soon as the GcImageViewer goes into fullscreen mode, an alternate toolbar appears over the image to provide you with all the functionalities offered by the main menu bar, along with an option to exit the fullscreen mode.
4. Navigation Control: This proves useful when working with TIFF/GIF images, as it lets you navigate between the image frames.
5. Download: This gives you the option to download the modified image on the client side.
6. Page Tools Plugin
1. Rotate image: Rotates images in a clockwise direction
2. Flip image horizontally or vertically: Flip the image as a mirror image, horizontally or vertically.
3. Crop/resize images: This option helps crop or resize images per user preference using image handles.
7. Undo/Redo image edits: Undo/Redo any image edits in the control.
8. Apply image filters to images: Apply filters from various options and modify the image look.

GcImageViewer is available with GrapeCity Documents for Imaging or option to install from npm.

npm install @grapecity/gcimageviewer

View the following blogs for the full feature list supported in the viewer and how to configure in ASP.NET Core application.

• New JavaScript Image Viewer Library from GrapeCity Documents

• Edit Images in JavaScript Image Viewer

For more info, view Help | Demo | License Info

GrapeCity Documents Data Viewer (GcDataViewer) ^New

GrapeCity Documents introduces new GrapeCity Documents Data Viewer (GcDataViewer) control - a JavaScript-based client-side viewer that can load and preview data-related documents like XLSX, CSV, and SpreadJS .json files. It is a read-only cross-platform solution for viewing data files with Excel and CSV options.

• Unified solution - It is a unified JavaScript-based client-side viewer that can load and preview any data-related document. Currently, it supports Excel (.xlsx and .xlsm), CSV, and SSJSON. Users are not required to look for different/separate tools to view these data files. GcDataViewer allows viewing them all in a single application, eliminating the need to switch to multiple tools to view their content
• UI for GcExcel - Customers using GcExcel .NET or Java can have a graphical interface to view the data file generated by its server-side APIs
• Cross-platform solution - Being a JS product, GcDataViewer can be integrated easily with .NET 7, Java, or JS frameworks such as NodeJS, AngularJS, React, Preact, Express, and others. Apart from this, one can view data files on Windows, Mac, Linux, iOS, and Android devices, and it works in all modern browsers, including Edge, Chrome, Firefox, Opera, and Safari
• Responsive UI - The user interface of the GcDataViewer is responsive for viewing on different devices, screen orientations, and sizes
• Light-weight Data Viewer - Less server-side dependency, and simple syntax and semantics make it a suitable choice for lightweight applications
• Extensive support for Excel features - GcDataViewer supports the read-only view of the majority of Excel features such as Tables, Pivot Tables, Formulas, Conditional Formatting, DataBar, Icons, Outline Groups, Filters, and many more
• CSV options: Configure loading of CSV document using various available settings
• Themes - Support for built-in themes to meet different UI appearance needs
• API integration - Support for public APIs that can be used to integrate and embed the viewer in existing applications
• Localize to match your market - GcDataViewer can adapt its display according to the browser language. Currently supported languages are - English, Chinese, and Korean

GcDataViewer is available with GrapeCity Documents for Excel .NET and Java packages or option to install from npm.

npm install @grapecity/gcdataviewer

View the detailed blog for full feature list supported in the viewer and how to configure in ASP.NET Core application.

View Help | Demo | License Info

GrapeCity Documents for PDF (GcPdf) and GrapeCity Documents for Imaging (GcImaging)

Rendering HTML to PDF and raster images

GcPdf and GcImaging update the existing GrapeCity.Documents.Html (GcHtml) package with a new API for converting HTML markup to PDF and images (PNG, JPEG, WEBP). The new package does not depend on a custom build of Chromium and does not include any GPL or LGPL licensed code. Also, GcHtml no longer requires any platform dependent packages specific to Windows, macOS, and Linux, as required by the previous version of GcHtml. The package introduces GcHtmlBrowser class - the main licensed class which represents a browser process, such as Chrome, Edge, or Chromium browser, and BrowserFetcher class that helps with discovering the path to the browser or downloading the Chromium browser from the public server. An instance of GcHtmlBrowser has two important methods: NewPage(Uri uri) and NewPage(string html). Both methods return an instance of HtmlPage class which represents a browser tab after navigating to the specified web address, file, or arbitrary HTML content.

The old 'GcHtmlRenderer' class is now obsolete, but it is still available (for backward compatibility) and works internally through the new GcHtmlBrowser class. There are some added advantages of using the latest package like:

• No dependencies on custom Chromium build
• No dependency on GPL/LGPL licensed software
• Use the same browser instance to render multiple pages
• Modify/replace the HTML page content

There is a lot more to the introduction of the new GcHtml package. Look at the following resources to learn how to use this package.

Steps to migrate an old project to use new packages

• GcPdf Documentation
• GcImaging Documentation

Steps from scratch to convert HTML to PDF/Images

• GcPdf Documentation
• GcImaging Documentation 

GrapeCity Documents for HTML Product Architecture

• GcPdf Documentation
• GcImaging Documentation

View full blogs

• Convert HTML to PDF documents

• Render HTML to Images 

Demo

• GcPdf HTML Demos

• GcImaging HTML Demos

GrapeCity Documents for PDF (GcPdf)

Support for Appearance streams for all annotations

To render annotations with the same display in all viewers, Appearance streams are associated with annotations - these are optional settings part of the PDF specification. GcPdf now supports an appearance stream for all annotations it supports, thereby rendering the annotations exactly with the same appearance in any viewer. Please note - In this version, GcPdf cannot generate correct appearance streams for rich text.

Additionally, in the v6 release, GcPdf adds GcPdfDocument.BuildRichTextAppearanceStreams boolean property, which generates content streams for annotations having rich text. This property is false by default, so the content streams with rich text are not generated, and viewers supporting rich text can render these annotations the same as before. If set to true, GcPdf will generate the content streams using plain text so that the rich text will be lost, but the annotation will look the same in all viewers. In the snapshot below, this property is set to false, so the free text annotation with rich text is shown correctly. The appearance of annotations is the same as rendered in Acrobat.

View Help

GrapeCity Documents PDF Viewer (GcPdfViewer)

Support for Text Markup Annotations

Now highlight, strikeout, underline text or add a squiggly line with a new set of annotations in GcPdfViewer. The following options are added:

• New toolbar for Highlight, Underline, Squiggly, and StrikeOut annotations in Quick edit tools and Annotation Editor.

• Text markup context menu with new options visible when the text is selected. The options are also added to the default context menu.

• Button keys for new annotations to add in the toolbar -'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out'.

• Enable or disable Text markup context menu.

• Change list of colors available in context menu through code.

View Help | Demo

Save PDF pages as Images

You can now save PDF pages as images from the viewer. GcPdfViewer client API adds a new saveAsImages method - to save pages of the current PDF document as PNG images. The option zips the resultant images and downloads the result zip archive on the client side. The ‘Save as images’ button can be added to ‘Annotation Editor' or ‘Form Editor’ with the button key - "save-images".

The following code can be used to programmatically save the images and specify the resultant zip file name -

// Save the pages of the current PDF document as PNG images and specify destination zip file name
viewer.saveAsImages('images.zip');

View Help | Demo

GrapeCity Documents for Excel (GcExcel)

We introduce the following new features with the v6 release. The features work in both .NET and Java with full parity.

• Introducing JavaScript-based GrapeCity Documents Data Viewer

• GcExcel Java now targets JDK 8

• Excel Workbook Size Optimization

• Template Enhancements

  • Paginated Spreadsheet Reports (GcExcel Templates) with new enhancements

  • Process specific Template worksheets

• Get used range in selected area

• Add Shape text with range reference or defined name

• Add image to cell/cell range using direct method

• Support for new Lambda function, including Help functions

• New Text and Array manipulation Excel functions

• Option to control Auto Fit

• SpreadJS Features support

View the full blog for more details.

GrapeCity Documents for Word (GcWord)

GcWord Report Templates enhancements

Conditionally show/hide multiple blocks of data

GcWord Report Templates adds new ‘if/else/endif’ statements to define conditions to show/hide whole block or multiple blocks at once. The condition defined is a set of template value operands combined with arithmetic or logic operations. Consider the following example, which shows retainer information from a Consulting Agreement document with a single if/endif condition (shows retainer information if payRetainer=1), instead of hiding specific blocks previously using hbi statements.

View Help | Demo

Add calculations to Word Templates

You can now add calculations to GcWord report templates using the new 'calc' templates feature, which allows you to use template data fields and literals in VBA-like expressions. Calc expressions support arithmetic, logical and other common operators, text and data aggregate functions, and more.

Some examples of valid 'calc' expressions include:

   {{ calc 2 * 2 + 4 }}

   {{ calc ds.UnitPrice * ds.Quantity }}

   {{ calc Sum(ds.Price) }}

   {{ calc Max(ds.Price) }}

Also, calc and the new conditional construct can be used together, enabling complex conditions under if, e.g.

{{ if useLimit and Sum(ds.score) > limit }} you passed {{ else }} you failed {{ endif }}

Consider the following example where the Invoice report adds the total price of all items in the report using calc expression.

View Help | C1CalcEngine (GcWord uses C1CalcEngine for calculations) | Demo

Support for effects in shapes and font

Reflection Effect

GcWord adds a Reflection class with detailed properties to apply reflection effect on shape or text. The effect looks like a water effect on the shape or text. You can set custom properties for the Reflection effect through TextEffects, ShapeEffects, or FormatScheme classes using ApplyBuiltInReflection method, which can set one of 9 types of built-in reflection effects on text or drawing object. In addition, you can also set the Reflection effect to shapes directly through Shape.Effects.Reflection property.  

The following code adds a ‘HalfTouching’ reflection effect on the title:

  GcWordDocument doc = new GcWordDocument();
  var style = doc.Styles.Add("My Style", StyleType.Paragraph);
  style.Font.Size = 48;
  // apply top half touching reflection effect to the text
  style.Font.Effects.ApplyBuiltInReflection(BuiltInReflectionId.HalfTouching);
  doc.Body.Paragraphs.Add("Wetlands", style);
  doc.Save("font-reflection-sample.docx");

View Help Text Effects | Shape Format | ShapeStyles | Demo

Glow Effect

This effect adds a hazy color perimeter outside the shape area or text. You can directly set the glow effect using shape.Effects.Glow property or use the ApplyBuiltInGlow method of TextEffects, ShapeEffects class to set one of 24 types of built-in glow effects on text or drawing objects.

The following code adds the glow effect directly using the ApplyBuiltInGlow method:

var style = doc.Styles.Add("My Style", StyleType.Paragraph);
style.Font.Size = 48;
style.ParagraphFormat.Alignment = ParagraphAlignment.Center;
// apply 5 point accent 2 glow effect to the text
style.Font.Effects.ApplyBuiltInGlow(BuiltInGlowId.Radius5Accent2);
doc.Body.Paragraphs.Add("Wetlands", style);
doc.Save("Article.docx");

View Help Text Effects | Shape Format | ShapeStyles | Demo

Blur Effect

To make certain shapes used in your Word document content stand out, GcWord adds the ability to add a blur effect. The ShapeEffects class is extended with the new Blur class. You can also set the Blur effect using FormatScheme class of Shape.

The following code uses a direct method of shape.Effects.Blur class to set blur effect on Shape.

Shape shape = run.GetRange().Shapes.Add(100, 100, GeometryType.Star4);
shape.Fill.Type = FillType.Solid;
shape.Fill.SolidFill.RGB = Color.Yellow;
shape.Line.Width = 4;
shape.Line.Fill.SolidFill.RGB = Color.Red;
// apply 7 point blur effect to the shape
shape.Effects.Blur.Radius = 7f;

View Help Shape Format | ShapeStyles | Demo

Soft Edge Effect

GcWord adds another way to add artistic effect to your shapes programmatically in Word documents. The ShapeEffects class has been extended with the SoftEdge class. The soft edge effect is a subtle blur on the edges of the shape. It can be applied through a SoftEdge.Radius value. The soft edge effect can be applied directly through Shape.Effects class of Shape class or FormatScheme class.

The code below applies a soft-edge effect to shape through shape style properties.

Shape shape = run.GetRange().Shapes.Add(100, 100, GeometryType.Star7);
shape.Fill.Type = FillType.Solid;
shape.Fill.SolidFill.RGB = Color.Yellow;
shape.Line.Width = 8;
shape.Line.Fill.SolidFill.RGB = Color.Red;
// apply 5 point soft edge effect to the style
var fmtEffect = doc.Theme.FormatScheme.Effects.Add();
shape.Style.Effects.ThemeEffects = fmtEffect;

View Help Shape Format | ShapeStyles | Demo

Fill Overlay Effect

A fill overlay can be used to specify an additional fill for an object and blend the two fills together. GcWord adds a fill overlay effect that can be applied over a shape. The ShapeEffects class has been extended with the FillOverlay effect class. In addition, the effect can also be applied through FormatScheme class using fixed, placeholder, or pattern color usage.

The following code applies a pattern fill overlay of one shape over another.

GcWordDocument doc = new GcWordDocument();
Paragraph p = doc.Body.Paragraphs.Add();
Run run = p.GetRange().Runs.Add();
Shape shape = run.GetRange().Shapes.Add();
shape.Fill.Type = FillType.Solid;
shape.Fill.SolidFill.ThemeColor = ThemeColorId.Accent1;

// apply pattern fill overlay with another color to mix with the main fill
var fmtEffect = doc.Theme.FormatScheme.Effects.Add();
var overlay = fmtEffect.FillOverlay;
overlay.BlendMode = BlendMode.Multiply;

var foFill = overlay.Fill;
foFill.Type = FillType.Pattern;
foFill.PatternFill.Type = PatternFillType.DashedHorizontal;
foFill.PatternFill.ForeColor.ThemeColor = ThemeColorId.None;
foFill.PatternFill.BackColor.ThemeColor = ThemeColorId.Accent6;

shape.Style.Effects.PlaceholderColor.ThemeColor = ThemeColorId.Accent3;
shape.Style.Effects.PlaceholderColor.Transparency = 0.6f;

shape.Style.Effects.ThemeEffects = fmtEffect;
doc.Save(@"shape-filloverlay-style-pattern-mixed-sample.docx");

View Help Shape Format | ShapeStyles | Demo

GrapeCity Documents for Imaging (GcImaging)

Support SVG text elements in GcSvgGraphics paths

GcImaging has been supporting the drawing of text on GcSvgGraphics with path elements. In the v6 release, GcSvgGraphics includes the DrawTextAsPath property, which gets or sets whether the text is drawn with path elements or not. After setting DrawTextAsPath to false, the GcSvgGraphics tries to save text using the standard SVG text elements, enabling users to select, copy text, or search for some text fragments, which is not possible when text is drawn using paths.

Additionally, when text is drawn to GcSvgGraphics, the following properties can be used - DrawTextAsPath and EmbedFonts.When a PDF page is saved to SVG using GcPdf, the following properties can now be used from SaveAsImageOptions class: DrawSvgTextAsPath, EmbedSvgFonts. These properties allow embedding a font subset to the output SVG file. Not all viewers support fonts embedded in SVG, but the most widely used browsers do. No fonts are embedded if the EmbedFonts property is set to false (the default value). Setting those properties to true might help users using rare fonts which will hardly be found on the client machine.

The following is an SVG image in which the text on the left is drawn by setting GcGraphics.DrawTextAsPath to false, thereby making the text searchable.

View Help | Demo

New Transparency Layers in GcGraphics

GcImaging supports the new concept of Transparency layers that enable an application to manipulate a group of drawing operations and render images with multiple groups and an opacity attribute. To modify a layer, you can push a layer onto the GcGraphics object using the new PushTransparencyLayer() method. Subsequent drawing operations by the GcGraphics are then directed to the layer. After the layer properties are modified, use the PopTransparencyLayer() method to apply the layer's contents into the GcGraphics drawing surface. The Push/Pop operations can be nested multiple times. When "pushing" the layer, you can specify the content bounds. If those bounds are not specified, the content bounds are effectively taken to be the bounds of the drawing surface. The opacity is another parameter of the layer being "pushed". The opacity of layer content is multiplied by this value when compositing the layer to the target GcGraphics.

Layers are supported in the following classes derived from GcGraphics: GcPdfGraphics, GcBitmapGraphics, GcSkiaGraphics, GcSvgGraphics, GcD2DBitmapGraphics, GcWicBitmapGraphics.

The following code draws rectangles and text with various opacity parameters using g.PushTransparencyLayer() method and finally using g.PopTransparencyLayer() to merge the content on the graphics.

static void DrawFigure(GcGraphics g)
{
    var rect = new RectangleF(50, 50, 150, 100);

    g.FillRectangle(rect, new HatchBrush(HatchStyle.ZigZag)
    {
        BackColor = Color.Yellow,
        ForeColor = Color.Purple
    });
    g.DrawRectangle(rect, new Pen(Color.LightGreen, 6f));

    var clipRect = new RectangleF(70, 50, 110, 100);
    g.PushTransparencyLayer(clipRect, 0.5f);

    g.FillRectangle(rect, Color.Green);
    rect.Height -= 60;
    rect.Y += 30;
    g.DrawRectangle(rect, new Pen(Color.Red, 6f));

    var tl = g.CreateTextLayout();
    tl.DefaultFormat.ForeColor = Color.White;
    tl.DefaultFormat.FontSize = 38;
    tl.DefaultFormat.FontSizeInGraphicUnits = true;
    tl.DefaultFormat.FontName = "Tahoma";
    tl.MaxWidth = 150;
    tl.TextAlignment = TextAlignment.Center;
    tl.Append("Hello World!");
    g.DrawTextLayout(tl, new PointF(50, 50));

    g.PopTransparencyLayer();
}