Have ideas to improve npm?Join in the discussion! »

    @grapecity/activereports-vue

    2.1.0 • Public • Published

    ActiveReportsJS Vue Wrapper

    This package is a part of the ActiveReportsJS and provides vue wrapper for ARJS Viewer Component

    Usage Example

    1. Install Vue CLI using following command
    npm install -g @vue/cli
    1. Create new application and navigate to the application folder:
    vue create arjs-vue -d
    cd arjs-vue
    1. Add reference to ActiveReportsJS Vue module:
    npm install @grapecity/activereports-vue

    Or if you are using yarn:

    yarn add @grapecity/activereports-vue
    

    Note: If you are using Vue 2.0 then install @vue/composition-api package:

    npm install @vue/composition-api
    

    Or if you are using yarn:

    yarn add @vue/composition-api
    
    1. Save the following module source code in src/App.vue:
    <template>
        <div id="app" style="height: 100vh">
             <GcArViewer :report="{ Uri: reportTemplate }"></GcArViewer>
        </div>
    </template>
    
    <script>
      import { Viewer } from "@grapecity/activereports-vue";
      import "@grapecity/activereports/styles/ar-js-ui.css";
      import "@grapecity/activereports/styles/ar-js-viewer.css";
    
      export default {
        name: "App",
        components: {
          GcArViewer: Viewer,
        },
        data: function () {
          return {
            reportTemplate: {
              Type: "report",
              Body: {
                Name: "Body",
                Type: "section",
                ReportItems: [
                  {
                    Type: "textbox",
                    Name: "textbox1",
                    Style: { FontSize: "18pt" },
                    Value: "Hello, ActiveReportsJS Viewer",
                    Height: "10in",
                  },
                ],
              },
              Name: "Report",
            },
          };
        },
      };
    </script>
    1. Start application
    'npm run serve' or 'yarn serve' command
    1. Go to http://localhost:8080/

    Documentation

    For more information on how to use ActiveReportsJS and available tools, refer to the Documentation or API reference for guidance.

    Install

    npm i @grapecity/activereports-vue

    DownloadsWeekly Downloads

    193

    Version

    2.1.0

    License

    Commercial

    Unpacked Size

    44.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar