Shulou(Shulou.com)06/02 Report--

How vue-cli uses stimulsoft.reports.js process, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

Vue-cli uses stimulsoft.reports.js part 1: data source preparation

The following is a tutorial for JSON data

Json data structure

{data Source name: [/ /. Data list]}

Your own test JSON data

{"data": [{"a": "I am A", "b": "I am B", "c": "I am C"}, {"a": "I am A", "b": "I am B", "c": "I am C"} {"a": "I am A", "b": "I am B", "c": "I am C"}]}

Attach official data (I have deleted some data so that readers can better understand the structure)

{"Customers": [{"CustomerID": "ALFKI", "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57 "," City ":" Berlin "," Region ": null," PostalCode ":" 12209 "," Country ":" Germany "," Phone ":" 030-0074321 "," Fax ":" 030-0076545 "}, {" CustomerID ":" ANATR " "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. De la Constituci ó n 2222 "," City ":" M é xico D.F. "," Region ": null," PostalCode ":" 05021 "," Country ":" Mexico "," Phone ":" (5) 555-4729 " "Fax": "(5) 555-3745"}] part II: vue-cli introduces stimulsoft.reports.js

Attach App.vue code

There are functional tests for displaying data, printing data, saving data, and importing json data.

Stimulsoft Reports.JS Viewer print Save Settings JSON export default {name: "app", data () {return {};}, / / load the official sample template code mounted: function () {console.log ("load Viewer View"); / / Toolbar console.log ("create a report Viewer with default options") Var viewer = new window.Stimulsoft.Viewer.StiViewer (null, "StiViewer", false); / / report console.log ("create a new report instance"); var report = new window.Stimulsoft.Report.StiReport (); / / load file console.log ("load report from url"); report.loadFile ("/ reports/SimpleList.mrt") / / create a report console.log ("assign the report to the viewer and the report will be automatically generated after rendering the viewer"); viewer.report = report; / / inject the tag console.log ("render the viewer to the selected element"); viewer.renderHtml ("viewer"); console.log ("load completed successfully!") }, methods: {/ / call printer print data print () {var report = new window.Stimulsoft.Report.StiReport (); report.loadFile ("/ reports/SimpleList.mrt"); report.print ();}, / / Export save data save () {var report = new window.Stimulsoft.Report.StiReport (); report.loadFile ("/ reports/SimpleList.mrt") / / Save the rendered report as the JSON string var json = report.saveDocumentToJsonString (); console.log ("json", json); / / get the report file name var fileName = report.reportAlias? Report.reportAlias: report.reportName; console.log ("report.reportName", report.reportName); console.log ("report.reportAlias", report.reportAlias); console.log ("fileName", fileName); / / Save data to file window.Stimulsoft.System.StiObject.saveAs (json, fileName + ".mdc", "application/json;charset=utf-8") }, / / get json data and write to the page setJson () {var report = new window.Stimulsoft.Report.StiReport (); / / report.loadFile ("/ reports/SimpleList.mrt"); / / official data template report.loadFile ("/ reports/Test.mrt") / / your own data template / / create a new DataSet object var dataSet = new window.Stimulsoft.System.Data.DataSet ("JSON"); / / load the JSON data file from the specified URL into the DataSet object / / dataSet.readJsonFile ("/ reports/Demo.json"); / / official data dataSet.readJsonFile ("/ reports/Test.json") / / your own json data / / file is imported using the above readJsonFile method, and the API network request is imported in the following way / / let json=/* omits the data acquisition request * / dataSet.readJson (JSON.stringify (json)); / / clears the data report.dictionary.databases.clear () in the report template / register the dataset object report.regData ("JSON", "JSON", dataSet); / / render the report with registration data / / report.render (); / / toolbar var viewer = new window.Stimulsoft.Viewer.StiViewer (null, "StiViewer", false) / / create a report viewer.report = report; / / inject the tag viewer.renderHtml ("viewer");},},}; is it helpful for you to read the above? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.