<template> <div id="viewer"> <GcArViewer viewMode="continuous" language="zh" :report="{ Uri: 'InvoiceList.rdlx-json' }" /> </div> </template> <script> import Vue from 'vue'; import '@grapecity/activereports-localization'; import { Viewer } from '@grapecity/activereports-vue'; let App = Vue.extend({ name: 'app', components: { GcArViewer: Viewer }, data: function () { return { reportZoom: 50, sidebar: false, toolbar: true } }, }); new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> html, body, #viewer { overflow: hidden; width: 100%; height: 100%; } </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"> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script src="/activereportsjs/demos/arjs/dist/ie-polyfills.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-viewer.js"></script> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-viewer.css"> <script> System.import('./app.vue'); </script> </head> <body style="margin: 0"> <div id="app" style="height: 100vh"></div> </body> </html>
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: 'vue-loader' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.min.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js', '@grapecity/activereports-vue': 'npm:@grapecity/activereports-vue/lib/index.js', '@grapecity/activereports/viewer': 'npm:@grapecity/activereports/dist/ar-js-viewer.js', '@grapecity/activereports/core': 'npm:@grapecity/activereports/dist/ar-js-core.js', '@grapecity/activereports/styles': 'npm:@grapecity/activereports/styles', '@grapecity/activereports-localization': 'npm:@grapecity/activereports-localization/dist/ar-js-locales.js', '@grapecity/ar-js-pagereport': 'npm:@grapecity/activereports/dist/ar-js-core.js', }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' } } }); })(this);