Designer Component Integration

These samples show how to integrate the ActiveReportsJS Designer component into Angular, React, Vue, and pure JavaScript applications. For more details, please visit theIntegration page. To view the code, scroll down the page.

<template> <div id="designer-host"> <arjs-designer :report="{ id: 'blank.rdlx-json', displayName: 'my report' }" > </arjs-designer> </div> </template> <script> import { Designer } from "@grapecity/activereports-vue"; export default { components: { "arjs-designer": Designer }, }; </script> <style> @import url("/activereportsjs/demos/resource/themes/orange-ui.css"); @import url("/activereportsjs/demos/resource/themes/orange-designer.css"); #designer-host { width: 100%; height: 550px; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script src="./compiler.js" type="module"></script> <script> System.import('$DEMOROOT$/en/lib/vue/license.ts'); System.import("./app.js"); </script> </head> <body> <div id="app"></div> </body> </html>
(function (global) { SystemJS.config({ transpiler: 'systemjs-plugin-babel', typescriptOptions: { "target": "es5", "module": "system", }, baseURL: './node_modules/', packageConfigPaths: [ './node_modules/*/package.json', "./node_modules/@grapecity/*/package.json", "./node_modules/@babel/*/package.json", "./node_modules/@vue/*/package.json" ], map: { 'vue': "./node_modules/vue/dist/vue.esm-browser.js", "systemjs-babel-build": "systemjs-plugin-babel/systemjs-babel-browser.js", "@grapecity/activereports/pdfexport": "@grapecity/activereports/dist/ar-js-pdf.js", "@grapecity/activereports/tabulardataexport": "@grapecity/activereports/dist/ar-js-tabular-data.js", "@grapecity/activereports/htmlexport": "@grapecity/activereports/dist/ar-js-html.js", "@grapecity/activereports/xlsxexport": "@grapecity/activereports/dist/ar-js-xlsx.js", "@grapecity/activereports-vue": "@grapecity/activereports-vue/lib/index.js", "@grapecity/activereports/reportviewer": "@grapecity/activereports/dist/ar-js-viewer.js", "@grapecity/activereports/viewer": "@grapecity/activereports/dist/ar-js-viewer.js", "@grapecity/activereports/reportdesigner": "@grapecity/activereports/dist/ar-js-designer.js", "@grapecity/activereports/core": "@grapecity/activereports/dist/ar-js-core.js", "@grapecity/activereports/styles": "@grapecity/activereports/styles", "@grapecity/activereports-localization": "@grapecity/activereports-localization/dist/ar-js-locales.js", "@grapecity/ar-js-pagereport": "@grapecity/activereports/dist/ar-js-core.js", "@grapecity/activereports-localization-ja": "@grapecity/activereports-localization/dist/designer/ja-locale.js", "@grapecity/activereports-localization-zh": "@grapecity/activereports-localization/dist/designer/zh-locale.js", }, meta: { '*.css': { loader: 'systemjs-plugin-css' }, './src/*.vue': { loader: "../plugin-vue/index.js" }, '*.vue': { loader: "./plugin-vue/index.js" }, }, packages: { "vue-demi": { defaultExtension: "mjs", main: "lib/index.mjs" } } }); })(this);