如何在Vue.js中使用HTML5报表查看器

环境

描述

的HTML5报表查看器是基于HTML5, CSS和JavaScript构建的。这使得查看器几乎可以在任何JavaScript框架中使用。Vue.js已经获得了很多牵引力，我们想要探索如何在Vue应用程序中实现HTML5报表查看器及其依赖项。我们将要研究的解决方案是一种非常基本的方法，用于创建一个新的Vue.js应用程序，包括查看器的依赖项，并显示报表查看器。

解决方案

下面的指南假设你对Vue.js有一定的了解:

1. 首先使用以下CLI命令创建一个新的Vue应用程序:

   Vue init webpack hello-world

2. 观众依赖于jQuery．在应用程序文件夹中运行:

   NPM安装jquery

3. 开放构建/ webpack.base.conf.js并添加插件：

   Const webpack = require('webpack')…

   模块。Exports = {plugins:[新的webpack。ProvidePlugin({$: 'jquery'， jquery: 'jquery'， '窗口。jQuery': ' jQuery'， jQuery: ' jQuery'})]…

4. 如果你正在使用ESLint,打开.eslintrc.js并添加全局变量：

   模块。出口={全局:{“$”:真的,“jQuery”:真正的},…

5. 添加所需的剑道UI少基于主题来index . html为了设置查看器的样式:

     …

6. 添加jQuery的剑道UIJS库。另一种方法是只添加HTML5报表查看器正常工作所需的Kendo小部件的子集。该子集可在Telerik Reporting安装文件夹(C:\Program Files (x86)\Progress\Telerik Reporting R2 2020\Html5\ReportViewer\js\telerikReportViewer.kendo-14.1.20.618.min.js)，并可以复制到Vue应用程序的资产文件夹(src /资产/ ReportViewer / js)．然后在App.vue：

7. 运行

   运行开发

   

另请参阅

下载最终的Vue.js应用程序．