Reporting for Vue

• Aug 20, 2020

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

Document Viewer

Integration

• Document Viewer Integration

Customization

• Customize the Document Viewer Toolbar
• Customize the Document Viewer Tab Panel

Report Designer

Integration

• Report Designer Integration

Print and Export

• Print and Export
• Print and Export without a Preview

Client-Side API

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

• Document Viewer - the IPreviewModel interface
• Report Designer - the JSReportDesigner class

Review the Report Designer Client-Side Configuration help topic for information on Knockout bindings.

To handle client-side events, use callbacks with the same name in the 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

<script>
import ko from "knockout";
import DevExpress from "devexpress-reporting/dx-webdocumentviewer";

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