Creating reports and dashboards | Stimulsoft community forum

How can implements a report viewer into template for an existing application with router vue??

Hello,

Please check the following samples:
https://github.com/stimulsoft/Samples-J ... ter/Vue.js

Thank you.

thanks, but throw me error:

[Vue warn]: Error in created hook: "TypeError: Cannot read property 'viewer' of undefined"

found in

---> <FrmEmbarqueGuia> at src/views/Reportes/FrmEmbarqueGuia.vue
<Main> at src/layouts/main/Main.vue
<App> at src/App.vue
<Root>



TypeError: Cannot read property 'viewer' of undefined
stack:"TypeError: Cannot read property 'viewer' of undefined\n at VueComponent.created (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Reportes/FrmEmbarqueGuia.vue?vue&type=script&lang=js&:33:41)\n at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1853:57)\n at callHook (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4207:7)\n at VueComponent.Vue._init (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4992:5)\n at new VueComponent (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5138:12)\n at createComponentInstanceForVnode (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3280:10)\n at init (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3111:45)\n at merged (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3298:5)\n at cre..


__proto__:Object {constructor: , __defineGetter__: , __defineSetter__: , …}

Hello,

Please check that scripts are loaded.

If the issue still present, please send us your sample for analysis.

Thank you.

<template>
<vx-card title="Aqui debería ir el reporte" id='viewerContent'>
<div>El Id es:{{elparametro}} </div>
{{elHTML}}
<v-container>
<v-layout wrap></v-layout>
</v-container>
</vx-card>
</template>

<script>

import { Report, Viewer } from '@/../node_modules/stimulsoft-reports-js/stimulsoft.reports.js';
import fileSystem from 'browserify-fs'

export default {
props: ['id'],
data () {
return {
//viewer:'',
singleMovie: '',
elparametro:'',
elHTML:''
}
},
created: function() {
var report = new Report.StiReport();

report.loadFile('./reports/SimpleList.mrt');
report.render(); //Prefect report render

this.elparametro = report.renderedPages.count;
this.elHTML = report.exportDocument(Report.StiExportFormat.Html); //i obtain HTML with no problems, but if try use viewer

// var viewer = new Viewer.StiViewer(null, 'StiViewer', false); //This line generate next error --> [Vue warn]: Error in created hook: "TypeError: Cannot read property 'StiViewer' of undefined"
//** Whyreport object is correctbut viewer not????
// fileSystem.writeFile("./archivo.html", 'texto', null, null);
}

}
</script>

<style>
</style>

Hi, good morning, just apply a little change, VUE can see Viewer.StiViewer, buuuut, now i get error: "TypeError: Cannot read property 'Enum' of undefined"

The innerError

[vue-router] Failed to resolve async component default: TypeError: Cannot read property 'Enum' of undefined
[vue-router] uncaught error during route navigation:
null: TypeError: Cannot read property 'Enum' of undefined
message: "Cannot read property 'Enum' of undefined"
stack: "TypeError: Cannot read property 'Enum' of undefined
at eval (webpack-internal:///./node_modules/stimulsoft-reports-js/stimulsoft.viewer.js:10:742)
at eval (webpack-internal:///./node_modules/stimulsoft-reports-js/stimulsoft.viewer.js:10:2858)
at eval (webpack-internal:///./node_modules/stimulsoft-reports-js/stimulsoft.viewer.js:10:2894)
at eval (webpack-internal:///./node_modules/stimulsoft-reports-js/stimulsoft.viewer.js:10:2924)
at Object.eval (webpack-internal:///./node_modules/stimulsoft-reports-js/stimulsoft.viewer.js:10:2952)
at eval (webpack-internal:///./node_modules/stimulsoft-reports-js/stimulsoft.viewer.js:11:30)
at Object../node_modules/stimulsoft-reports-js/stimulsoft.viewer.js (http://localhost:8080/3.js:4266:1)
at __webpack_require__ (http://localhost:8080/app.js:767:30)
at fn (http://localhost:8080/app.js:130:20)
at eval (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Reportes/FrmEmbarqueGuia.vue?vue&type=script&lang=js&:8:114)"
__proto__: Error {constructor: , name: "TypeError", message: "", …}



This is my code

<script>
//import axios from "axios";
import { Report } from '@/../node_modules/stimulsoft-reports-js/stimulsoft.reports.js';
import "@/../node_modules/stimulsoft-reports-js/stimulsoft.viewer.office2013.whiteblue.css";
import Viewer from '@/../node_modules/stimulsoft-reports-js/stimulsoft.viewer.js';

//import fileSystem from 'browserify-fs'
/*Para poder obtener los parámetros de la URL*/
import * as url from "url";
url.URLSearchParams = URLSearchParams;

export default {
/* components:
{
Viewer
}, */
props: ['id'],
data () {
return {
singleMovie: '',
elparametro:'',
elHTML:''
}
},
created: function() {
var url2 = new URL(window.location);
var params = new URLSearchParams(url2.search);
this.elparametro = '';
this.elparametro = params.get('id');



var report = new Report.StiReport();

report.loadFile('./reports/PDFEMbarquesAereosMaster.mrt');
report.setVariable('Id', this.elparametro);// this.id);
report.render(false);
this.elparametro = report.renderedPages.count;
this.elHTML = report.exportDocument(Report.StiExportFormat.HtmlTable) ;
}

}
</script>

Hello,

Please send us your sample project for analysis.

Thank you.

I using Vuesax but I can't add stimulsoft , please give me an example for run stimulsoft designer with Vuesax

Hello,

Unfortunately, we do not tested our JS components with Vuesax.

Thank you.