How to use HTML5 Report Viewer in Vue.js
Environment
| Product | Progress® Telerik® Reporting R2 2020 |
| Framework | Vue.js |
| Report Viewer | HTML5 |
Description
The HTML5 Report Viewer is built upon HTML5, CSS, and JavaScript. This allows the viewer to be used in virtually any JavaScript framework. Vue.js has been gaining a lot of traction and we would like to explore how the HTML5 Report Viewer could be implemented, together with its dependencies, in a Vue application. The solution we are about to examine is a very basic approach to create a new Vue.js application, include the viewer's dependencies, and display the report viewer.
Solution
The following guide assumes previous knowledge of Vue.js:
-
Start by creating a new Vue application using the following CLI command:
vue init webpack hello-world -
The viewer depends on jQuery. In the application folder run:
npm install jquery --save -
Open build/webpack.base.conf.js and add plugins:
const webpack = require('webpack') ...module.exports = { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jquery: 'jquery', 'window.jQuery': 'jquery', jQuery: 'jquery' }) ] ... -
If you are using ESLint, open .eslintrc.js and add globals:
module.exports = { globals: { "$": true, "jQuery": true }, ... -
Add the desired Kendo UI Less-Based Theme to index.html in order to style the viewer:
<head> <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css" rel="stylesheet" /> <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default.min.css" rel="stylesheet" /> ... -
Add Kendo UI for jQuery JS library. An alternative approach is to add only the subset of Kendo widgets required for the proper work of the HTML5 Report Viewer. The subset is available in the Telerik Reporting installation folder (C:\Program Files (x86)\Progress\Telerik Reporting R2 2020\Html5\ReportViewer\js\telerikReportViewer.kendo-14.1.20.618.min.js) and can be copied to the Vue application's assets folder (src/assets/ReportViewer/js). Then reference it in App.vue:
<script> import './assets/ReportViewer/js/telerikReportViewer.kendo-14.1.20.618.min.js' ...To avoid getting errors from ESLint for any report viewer dependencies, add them to .eslintignore:
src/assets/ReportViewer/ src/components/ReportViewer.vue Add the HTML5 Report Viewer JS library from the Telerik Reporting installation folder (C:\Program Files (x86)\Progress\Telerik Reporting R2 2020\Html5\ReportViewer\js) to assets (src/assets/ReportViewer/js).
-
Create a new report viewer component and configure the routes accordingly. The new component contains a div element to hold the report viewer object and applies CSS to this element. The component calls the telerik_ReportViewer method to create the report viewer with the specified configuration options. It is important that the serviceUrl option points to the URL of a working Reporting REST Service. How to implement this service is described here.
<template> <div class="hello"> <h1></h1> <div id="reportViewer1">loading...</div> </div> </template> <script> import '../assets/ReportViewer/js/telerikReportViewer-14.1.20.618.min.js' export default { name: 'ReportViewer', data () { return { msg: 'Welcome to Your Vue.js App' } }, mounted () { this.$nextTick(function () { $('#reportViewer1') .telerik_ReportViewer({ serviceUrl: 'http://my.service.url/api/reports/', reportSource: { report: 'Telerik.Reporting.Examples.CSharp.ReportCatalog, CSharp.ReportLibrary' }, viewMode: telerikReportViewer.ViewModes.INTERACTIVE, scaleMode: telerikReportViewer.ScaleModes.SPECIFIC, scale: 1.0, sendEmail: { enabled: true } }) }) } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> body { font-family: Verdana, Arial; margin: 5px; } #reportViewer1 { position: absolute; top: 70px; bottom: 10px; left: 10px; right: 10px; overflow: hidden; clear: both; } </style> -
Run
npm run dev