このトピックでは、Vueアプリケーション（ASP.NET Core）にJSビューワコンポーネントを組み込む方法について説明します。Reactテンプレートを使用して、ReactフロントエンドアプリケーションをVue.jsフロントエンドアプリケーションに置き換えます。Vueアアプリケーションサーバーを実行するには、NodeJSとVue CLIが必要です。Vue CLIをインストールするにはコマンドプロンプトで次のコマンドを入力してインストールします。

npm install -g @vue/cli

1. Reactテンプレートを使用して、新しいASP.NET Core Webアプリケーションを作成します。

2. Controllersフォルダ内のデフォルトのControllerを削除し、「HomeController.cs」という空のMVCコントローラーを追加します。

3. HomeController.csファイルの上部にに次の「using」ステートメントを追加します。

   using Microsoft.AspNetCore.Hosting;
using System.IO;

4. HomeController.csのデフォルトのIndexメソッドを次のように変更します。

   HomeController.cs	コードのコピー
   private readonly IWebHostEnvironment _env; public HomeController(IWebHostEnvironment env) => _env = env; public IActionResult Index() { return new PhysicalFileResult(Path.Combine(_env.WebRootPath, "index.html"), "text/html"); }

5. ［ソリューションエクスプローラー］で、ソリューションを右クリックし、［NuGet パッケージの管理］を選択します。

6. 次のパッケージをプロジェクトに追加します。

   GrapeCity.ActiveReports.Aspnetcore.Viewer.ja

7. プロジェクトフォルダ内に ［Reports］フォルダを作成します。Reportsフォルダには、ビューワに表示するレポートを配置します。

8. レポートの［ビルドアクション］プロパティが「埋め込みリソース」に設定されていることを確認します。

9. Startup.csファイルを開き、上部に次のusingステートメントを追加します。

   using GrapeCity.ActiveReports.Aspnetcore.Viewer.ja;
using System.Reflection;
using System.Text;

10. Startup.csファイルのConfigureServicesメソッドとConfigureメソッドを次のように変更します。

    Startup.cs

    コードのコピー

    public void ConfigureServices(IServiceCollection services) { Encoding.RegisterProvider(CodePagesEncodingProvider.Instance); services .AddReporting() .AddMvc(options => options.EnableEndpointRouting = false); } // このメソッドはランタイムによって呼び出されます。このメソッドを使用して、HTTP要求パイプラインを構成します。 public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Error"); } app.UseStaticFiles(); app.UseReporting(settings => { settings.UseEmbeddedTemplates("JSViewer_Vue_NetCore.Reports", Assembly.GetAssembly(GetType())); settings.UseCompression = true; }); app.UseMvc(routes => { routes.MapRoute( name: "ディフォルト", template: "{controller=Home}/{action=Index}/{id?}"); }); }

11. レポートのUseEmbeddedTemplatesの最初の引数に正しい名前空間が指定されていることを確認します。

12. アプリケーションをビルドします。

    Vue.jsフロントエンドを構成する

13. 既存のclient-appフォルダを削除します。

14. コマンドプロンプトでClientAppフォルダを開き、次のコマンドを実行します。

    vue create client-app

    （Vue CLIでは、プロジェクト名に大文字は使用できません）。

15. Vue CLIがプロジェクトの生成を終了したら、client-appフォルダの名前をClientAppに変更します。

    上記の3つの手順で、ReactフロントエンドアプリケーションをVue.jsフロントエンドアプリケーションに完全に置き換えました。

16. ClientAppフォルダ内のsrcフォルダを展開します。

17. srcフォルダから、assetsおよびcomponentsフォルダ、およびApp.vue、.gitignore、babel.config.jsファイルを削除します。

18. ClientApp\srcフォルダ内のmain.jsを開き、その内容を次のコードに置き換えます。

    main.js	コードのコピー
    import Vue from 'vue'; import App from './app/App.vue'; import "@grapecity/ar-viewer-ja/dist/jsViewer.min.js"; import "@grapecity/ar-viewer-ja/dist/jsViewer.min.css"; new Vue({ el: '#app', render: h => h(App) });

19. srcフォルダを右クリックし、「app」という新しいフォルダを追加します。

20. appフォルダ内に新しい「Text」ファイルを追加し、名前を「App.vue」に変更します。

21. App.vueファイルに次の内容を追加します。

    App.vue	コードのコピー
    <template> <div id="viewer-host"> </div> </template> <script> export default { name: 'app', mounted() { this.viewer = new GrapeCity.ActiveReports.JSViewer.create({ element: '#viewer-host' }); this.viewer.openReport("DemoReport.rdlx"); } } </script> <style> #viewer-host{ background-color: #e5e5e5; height: 100vh; float: right; width: 100%; } </style>

     

22. ClientAppフォルダを右クリックし、次の内容を持つ新しいファイル「webpack.config.js」を追加します。

    webpack.config.js

    コードのコピー

    const path = require('path'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const HtmlWebpackPlugin = require("html-webpack-plugin"); const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, '../wwwroot/'), filename: 'bundle.js' }, devtool: "source-map", module: { rules: [ { test: /\.vue$/, exclude: /node_modules/, loader: 'vue-loader' }, { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options:{ presets:["@babel/preset-env"] } } ] }, plugins: [ new VueLoaderPlugin(), new HtmlWebpackPlugin({ template: "./src/index.html" }) ], devServer: { contentBase: 'src/', historyApiFallback: true, disableHostCheck: true, proxy: { '/api/*': {target: 'http://localhost:58723', secure: false}, '/reports': {target: 'http://localhost:58723', secure: false} } } };

                      

23. ClientAppフォルダ内のpackage.jsonファイルを選択し、その内容を次のコードに置き換えます。

    package.json

    コードのコピー

    { "name": "js-viewer-vue", "version": "1.0.0", "description": "本サンプルでは、ASP .NET CoreとVueJSフレームワークを使用したWebアプリケーションでJSビューワを使用する方法を紹介します。", "author": "GrapeCity", "license": "MIT", "scripts": { "dev": "webpack-dev-server --mode development --hot --open", "build": "webpack --mode production" }, "devDependencies": { "@babel/core": "^7.4.5", "@babel/plugin-proposal-class-properties": "^7.4.4", "@babel/preset-env": "^7.4.5", "babel-loader": "^8.0.6", "copy-webpack-plugin": "^5.0.3", "css-loader": "^1.0.0", "html-webpack-plugin": "^3.2.0", "vue-loader": "^15.4.2", "vue-template-compiler": "^2.5.17", "webpack": "^4.20.0", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.9" }, "dependencies": { "vue": "^2.5.17", "@grapecity/ar-viewer-ja": "latest" } }

24. index.htmlをパブリックフォルダからsrcフォルダに移動し、パブリックフォルダを削除します。

25. index.htmlファイルを選択し、ファイルから次の行を削除します。

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

26. コマンドプロンプトでClientAppフォルダを開き、次のコマンドを実行してnpmパッケージをインストールします。

    npm install

27. ソリューションをビルドして実行します。