Reporting for Vue

• Jun 17, 2024
• 2 minutes to read

Topics in this section describe how to create reporting applications based on the Vue.js framework.

Constants and enums in TypeScript code may require the import directive. The following example declares the DevExpress.Reporting.Viewer.ZoomAutoBy enum:

import { ZoomAutoBy } from "devexpress-reporting/viewer/constants";

You can import constants from the following sources:

• Document Viewer: devexpress-reporting/dx-webdocumentviewer
• Report Designer: devexpress-reporting/dx-reportdesigner

Document Viewer

Integration

• Create a Vue Front-End Application with a Document Viewer

Customization

• Customize the Document Viewer Toolbar in Vue Application
• Customize the Document Viewer Tab Panel in Vue Application
• Tasks and Solutions for ASP.NET Core Applications

• A general technique that allows you to customize the UI elements in Reporting components: Use Custom HTML Templates.

Report Designer

Integration

• Create a Vue Front-End Application with a Report Designer

Customization

• Tasks and Solutions for ASP.NET Core Applications

• A general technique that allows you to customize the UI elements in Reporting components: Use Custom HTML Templates.

• Use the ReportDesignerSettingsBase class to configure the Web End-User Report Designer on the client. For more information, refer to the following section: ReportDesignerSettingsBase for JavaScript Frameworks

Client-Side API

To access the client-side Reporting API in Vue applications, use the following objects:

• Document Viewer - the JSReportViewer class
• Report Designer - the JSReportDesigner class

Client-side events in Vue are handled with callbacks specified in the Knockout bindings.

Event names and data in event arguments passed to the Angular callback handler functions are the same as events in an ASP.NET Core application. Review the following help topics with information on ASP.NET Core client-side events:

• WebDocumentViewerClientSideEventsBuilder
• ReportDesignerClientSideEventsBuilder

For more information on Knockout bindings, review the following help topics:

• Document Viewer Client-Side Configuration (Knockout Bindings)
• Report Designer Client-Side Configuration (Knockout Bindings)

The following code snippet illustrates how to use the CustomizeExportOptions callback to remove the XLS format from the Export To drop-down list and from the Export Options panel:

Vue

import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer'
import ko from "knockout";


var componentData = {
    name: "WebDocumentViewer",
    mounted() {
    // ...
        var    callbacks = {  
      CustomizeExportOptions: function(s, e){
        e.HideFormat(ExportFormatID.XLS);
      }
        };    
        ko.applyBindings({
      // ..
            callbacks: callbacks
        }, this.$refs.viewer);
    },
  // ...
};
export default componentData;

Standalone Report Parameters Panel

Quick Start

• Standalone Report Parameters Panel in Vue Applications