<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);
