AR JS Viewer with Vue.js problem

Posted by: goldli on 18 March 2020, 8:17 pm EST

  • Posted 18 March 2020, 8:17 pm EST

    Hi, guys.
    I have a problem when trying to pass data to Js Viewer with vue.js.

    bellow is my code , i can get data from server , but i have no idea how to pass data to the viewer.

    i don't know how many errors with my code , because , i can't find any full Vue.js demo from search webs .

    please help.




    @{
    Layout = null;
    }

    <!DOCTYPE html>

    <html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>report demo</title>

    <link href="~/lib/element-ui/theme-chalk/index.css" rel="stylesheet" />
    <link href="~/lib/element-ui/theme-chalk/display.css" rel="stylesheet" />
    <link href="~/css/scrollbar.css" rel="stylesheet" />
    <link href="~/css/site.css" rel="stylesheet" />

    <link href="~/AR/styles/ar-js-viewer.css" rel="stylesheet" />
    <script type="text/javascript" src="~/AR/dist/ar-js-core.js"></script>
    <script type="text/javascript" src="~/AR/dist/ar-js-viewer.js"></script>
    <script type="text/javascript" src="~/AR/dist/ar-js-pdf.js"></script>
    <script type="text/javascript" src="~/AR/dist/ar-js-xlsx.js"></script>
    <script type="text/javascript" src="~/AR/dist/ar-js-html.js"></script>
    <script>
    //GC.ActiveReports.Core.PageReport.LicenseKey = “YOUR_LICENSE_KEY”;
    </script>
    </head>

    <body>
    <div id="Viewer" style="height: 100vh">
    <ArViewer ref="arViewer"
    language="zh"
    v-bind:zoom="reportZoom"
    viewMode="paginated"
    v-bind:availableExports="['pdf','xlsx']"
    v-on:report-loaded="onReportLoaded"
    v-on:document-loaded="onDocumentLoaded"
    :report="{ Uri: 'MarketSnapshot.rdlx-json' }" />
    </div>


    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/js/site.js"></script>
    <script src="~/lib/vue/vue.min.js"></script>
    <script src="~/lib/element-ui/index.js"></script>

    <script src="~/js/jquery.cookie.js"></script>
    <script src="~/lib/axios/axios.min.js"></script>
    <script src="~/lib/crypto-js/crypto-js.js"></script>
    <script src="~/lib/jsrsasign/jsrsasign-all-min.js"></script>
    <script src="~/js/webApp.js"></script>

    <script>

    var vm = new Vue({
    el: "#app",
    components: {
    //ArViewer: ActiveReports.Viewer
    ArViewer: Viewer
    },
    data: function() {
    return {
    reportZoom: 50,
    sidebar: false,
    toolbar: true
    }
    },
    mounted() {
    this.getData();
    },
    methods: {

    getData: function () {
    this.$webApp.Get("GetJsonData", { year: 2020, month: 3 }, function (jsonData) {
    debugger;
    var viewer = vm.getViewer();
    viewer.Open("@ViewBag.RptFile", { ReportParams: [{ Name: "data", Value: jsonData }] });
    });
    },
    onDocumentLoaded: function (a) {
    console.log("document loaded", a);
    },
    onReportLoaded: function (arg) {
    console.log("report loaded", arg);
    },
    getViewer() {
    return this.$refs.arViewer;
    }
    }
    });
    </script>
    </body>
    </html>



  • Replied 18 March 2020, 8:20 pm EST

    the first problem is when i call vm.getViewer(); , this.$refs.arViewer; returns undefined .
  • Replied 18 March 2020, 8:53 pm EST

    after some code change , i found the problem

    with the follow code


    <div id="app">
    <div id="Viewer" style="height: 100vh" ref="test">
    @*<ArViewer ref="arViewer"
    language="zh"
    v-bind:zoom="reportZoom"
    viewMode="paginated"
    v-bind:availableExports="['pdf','xlsx']"
    v-on:report-loaded="onReportLoaded"
    v-on:document-loaded="onDocumentLoaded"
    :report="{ Uri: 'MarketSnapshot.rdlx-json' }" />*@
    </div>
    </div>



    Vue.js can't parse it . so , $refs is empty.
    please tell me that what should be the right code here ?
  • Replied 19 March 2020, 12:01 am EST

    Hello,

    Have you tried with the following code:


    <GcArViewer ref="control"
    language="zh"
    v-bind:zoom="reportZoom"
    viewMode="paginated"
    v-bind:availableExports="['pdf','xlsx']"
    v-on:report-loaded="onReportLoaded"
    v-on:document-loaded="onDocumentLoaded"
    :report="{ Uri: 'MarketSnapshot.rdlx-json' }" />


    Thanks,
    Mohit
  • Replied 19 March 2020, 12:07 pm EST

    still empty. see snaps.


  • Replied 22 March 2020, 7:30 am EST

    As the 'ref' attribute is set to 'control', you need to use the same in the getViewer() method as below:

    getViewer() {
    return this.$refs.control;
    }


  • Replied 23 March 2020, 11:54 am EST

    Hi, i think you didn’t understand what I talked about. I mean $ref is empty. It says that there was nothing could be parsed from the source code. Have you mentioned that?
  • Replied 23 March 2020, 4:15 pm EST

    Hi,

    Sorry if I misunderstood. I re-checked and $refs is not empty at my end. Please see attached screen shot. I've also attached my application for your reference. Let me know if you get $refs as empty with the attached application as well.


    ArjsVueApp.zip
  • Replied 25 March 2020, 8:19 pm EST

    abdias.michael said:
    Hi,

    Sorry if I misunderstood. I re-checked and $refs is not empty at my end. Please see attached screen shot. I've also attached my application for your reference. Let me know if you get $refs as empty with the attached application as well.

    i saw your code . that might be correct with .net core project . But in my case , i am using Visual studio 2019 , asp.net core 3.1 . please recheck .
    thanks.


    ArjsVueApp.zip
  • Replied 26 March 2020, 11:12 pm EST

    Hello,

    I have checked with VueJs+ .Net Core 3.1 and found that $refs is not empty at my end.
    Could you please share your application so that I can check at my end.

    Thanks,
    Mohit
  • Replied 26 March 2020, 11:30 pm EST

    Hello,
    You can check with the attached sample and please let us know if you are able to replicate the issue at your end with the attached sample.
    Thanks,
    Mohit

    VueDemoWithAsp.NetCore.zip
  • Replied 27 March 2020, 12:33 am EST

    Hi , Mohit . Thanks for reply. Does your code is created by .net core ? If so , you code maybe correct . And i said my project was create by Visual studio 2019 , asp.net core mvc application . and within my first post , what is the View code .
  • Marked as Answer

    Replied 29 March 2020, 5:11 pm EST

    Hello,

    Yes, I have created the .Net core application. Could you please share your own application so that I can look into the issue and help you accordingly. It will save time for both of us.

    Thanks,
    Mohit
  • Replied 31 March 2020, 10:39 am EST

    I'm on a business trip now。 i will post my code when i back to office.
  • Replied 31 March 2020, 3:26 pm EST

    Hello,

    Thanks for the information and take your time.

    Stay safe ;)

    Thanks,
    Mohit
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels