Page 1 of 1
Problems with integration Vue
Posted: Fri Mar 04, 2022 9:15 am
by qwertykqwertov911
Good afternoon. I apologize in advance for my English. Faced a problem when integrating ReportJs in my Vue application. Method of connection via index.html and folder Public does not pierce for me. Installed StimulSoft-Reports-JS via NPM. Import scripts via node_modules. I get the following errors.
[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'Designer')"
I'm not too strong in this, so the error may be rather stupid, but if you specify me on her, I will be very grateful.
##TotalBalance.vue
Code: Select all
mounted: function() {
console.log('Loading Designer view');
console.log('Set full screen mode for the designer');
var options = new window.Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = false;
console.log('Create the report designer with specified options');
var designer = new window.Stimulsoft.Designer.StiDesigner(options, 'StiDesigner', false);
console.log('Create a new report instance');
console.log('Rendering the viewer to selected element');
designer.renderHtml('designerContent');
console.log('Loading completed successfully!');
}
##main.js
Code: Select all
import 'stimulsoft-reports-js/Scripts/stimulsoft.reports.js'
import 'stimulsoft-reports-js/Scripts/stimulsoft.reports.js'
import 'stimulsoft-reports-js/Scripts/stimulsoft.designer.js'
import 'stimulsoft-reports-js/Scripts/stimulsoft.blockly.editor.js'
##index.html
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>budget-app</title>
<link rel="stylesheet" href="stimulsoft/stimulsoft.designer.office2013.whiteblue.css">
<link rel="stylesheet" href="stimulsoft/stimulsoft.viewer.office2013.whiteblue.css">
</head>
<body>
<noscript>
<strong>We're sorry but budget-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Re: Problems with integration Vue
Posted: Fri Mar 04, 2022 1:03 pm
by Max Shamanov
Hello,
Please check the following sample:
https://github.com/stimulsoft/Samples-JS
And attached sample.
Thank you.
Re: Problems with integration Vue
Posted: Wed Mar 09, 2022 6:44 am
by qwertykqwertov911
Thanks for helping me.
Re: Problems with integration Vue
Posted: Wed Mar 09, 2022 7:48 am
by Max Shamanov
Hello,
You are welcome.
Re: Problems with integration Vue
Posted: Thu Mar 10, 2022 2:24 pm
by qwertykqwertov911
Hello, please help me again.
This application was activated with key. ( Stimulsoft.Base.StiLicense.Key = "..." ) Message about trial version missed, but trial watermark stay on page.
Why is this happening?
https://www.dropbox.com/s/9467n4jcqzrrl ... l.PNG?dl=0
Re: Problems with integration Vue
Posted: Fri Mar 11, 2022 7:35 am
by Lech Kulikowski
Hello,
Please send us your request with detailed description on
support@stimulsoft.com.
Thank you.
Re: Problems with integration Vue
Posted: Thu Mar 17, 2022 9:16 am
by qwertykqwertov911
Hello,
I tried using version 2022.1.5 and that solved my problem. Activation problem appears only in the latest version (2022.1.6).
Re: Problems with integration Vue
Posted: Thu Mar 17, 2022 10:31 am
by Lech Kulikowski
Hello,
Please send us your key for analysis on
support@stimulsoft.com.
Thank you.
Re: Problems with integration Vue
Posted: Thu Oct 03, 2024 11:48 am
by fabio.bissolotti
Hello, I'm having the same problem in REACT but with some variations. I've set up a dashboard that works perfectly in the development environment, but when I publish it in the QA environment it gives the following error in the browser console when I try to execute viewer.renderHtml():
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Symbol(stimulsoft)')
The frontend method receives the json structure, loads it into the report and fetches the data, injects it into the report and then renders it in the viewer:
Code: Select all
Stimulsoft.Base.StiLicense.Key = "...";
var report = new Stimulsoft.Report.StiReport();
let json = await getReportStructure("DashBoardSNPeriodo");
report.loadDocument(json.data);
var result = await generateSalesNotificationByPeriod(dtaInicial, dtaFinal);
console.log("Registrando dados")
report.regData("root", "root", result.data.registros);
console.log("Reenderizando relatório")
report.renderAsync(function () {
console.log("Report rendered. Pages count: ", report.renderedPages.count);
console.log("Atribuindo relatório")
var viewer = new Stimulsoft.Viewer.StiViewer(undefined, 'StiViewer', false);
viewer.report = report;
console.log("Renderizando na div")
viewer.renderHtml('invoiceViewer');
});
The error is occurring in the viewer.renderHtml('invoiceViewer') line;
The strangest thing is that when the system is run on the development machine it works without problems, only when it is published to the QA environment does the error appear.
I apologize for any English errors and thank you in advance for your attention.
Re: Problems with integration Vue
Posted: Thu Oct 03, 2024 10:29 pm
by Lech Kulikowski
Hello,
Please send us a sample project that reproduces the issue for analysis.
Thank you.
