การใช้งาน jsreport ขั้นพื้นฐาน
อ้างอิง https://jsreport.net/
ขั้นตอนการใช้งาน jsreport ขั้นพื้นฐาน
1. สร้าง jsreport server
2. กำหนดโครงสร้างข้อมูลขาเข้า
3. สร้าง Report
4. ทดสอบและดูตัวอย่าง Report
5. ส่งข้อมูลจริงเข้าไปใน API และรับ Report กลับ
§ สร้าง jsreport server
jsreport สามารถทำงานได้ทั้งบน Windows, Linux และ Mac โดยขั้นตอนแรก บนเครื่องเป้าหมายจะต้องทำ การติดตั้ง node.js สะก่อนเพื่อใช้งาน NPM ในการติดตั้ง jsreport-cli ซึ่งเป็นตัวสร้างโปรเจ็ค jsreport โดยใช้คำสั่ง
npm install jsreport-cli -g
npm install jsreport-cli -g : เป็นคำสั่ง ทำการติดตั้ง jsreport-cli (npm install jsreport-cli) ลงบนเครื่องเป้าหมาย และทำการติดตั้งในระดับ globe (-g)
ติดตั้ง jsreport-cli เสร็จแล้ว ก็มาทำการสร้างโปรเจ็ค jsreport กัน โดยใช้คำสั่ง
jsreport init
jsreport init : จะเป็นคำสั่งในการสร้างโปรเจ็ค jsreport โดยจะทำการสร้าง service solution และ เครื่องมือในการพัฒนา Report
สร้างโปรเจ็ค jsreport เสร็จ ก็มาเริ่มพัฒนา Report กัน โดยใช้คำสั่ง
jsreport start
jsreport start : ทำการ run service jsreport และเครื่องมือในการพัฒนา Report ขึ้นมาโดย Port ตั้งต้นจะอยู่ที่ Port:5488 ซึ้งเราสามารถสั่งให้ run ใน Port ที่ต้องการได้โดยใช้คำสั่ง jsreport start — httpPort=’ Port ที่ต้องการให้run’ เช่น
jsreport start — httpPort=6000
เมื่อทำการ run jsreport ขึ้นมาแล้ว ก็เข้าไปยัง URL ที่สั่ง run ได้เลย
โดย URL ดังกล่าวจะเป็น เครื่องมือในการพัฒนา Report และเมื่อเปิดขึ้นมาแล้ว ก็ไปขั้นตอนต่อไปเลย
§ กำหนดโครงสร้างข้อมูลขาเข้า
ในขั้นตอนนี้จะทำการสร้างโครงสร้างของข้อมูลให้กับ Report ที่จะทำการพัฒนาขึ้น จะอยู่ในรูปแบบ json โดยทำการสร้างใน Directory data
จากรูปจะทำการสร้าง File ชื่อว่า test-report
§ สร้าง Report
ทำการสร้าง File Report ใน Directory templates
จากรูปจะทำการสร้าง File Report ชื่อ test-report และเมื่อทำการสร้าง File เสร็จ ให้ทำการตั้งค่าโดย กดที่ File แล้ว Properties จะแสดงขึ้นมา ของ Report นั้นๆที่เราเลือก
โดยหลักๆ จะมีการตั้งค่าในส่วน Engine, Recipe และ Sample Data
ใน Engine จะมีให้เลือกใช้ 2 Engine คือ jsrender และ handlebars
แล้วในส่วนของ Recipe ประกอบไปด้วย fop-pdf, phantom-pdf, text, html-with-browser-client, html-to-xlsx, xlsx, html
และส่วน Sample Data เราจะทำการเลือก File Data ที่เราสร้างใว้ใน Directory data เพื่อใช้โครงสร้างของ data ในการพัฒนา Report
จากรูปเราได้เลือก File Data ที่ได้สร้างไว้ก่อนหน้านี้คือ test-report
§ ทดสอบ และดูตัวอย่าง Report
เมื่อเราทำการพัฒนา Report เสร็จเราสามารถทำการ ทดสอบหรือดูตัวอย่าง Report ได้โดยกด ปุ่มRun ซึ้ง รายงานจะขึ้นอยู่กับ Sample Data ที่เราได้สร้างขึ้น
จากรูปเราได้สร้าง Report โดยใช้ handlebars ในการพัฒนา Report
§ ส่งข้อมูลจริงเข้าไปใน API และ Report กลับ
การเรียกใช้แม่แบบรายงาน จะทำการเรียกโดย POST ไปยัง service jsreport (API) ที่ได้สร้างขึ้น ไปยัง https://jsreport-host/api/report
Headers: Content-Type:application/json
Data format ในส่วนของ BODY หลักๆอยู่ 3 ส่วนคือ template, data, options
template : ในส่วนนี้จะเป็นการระบุถึงรายงานแม่แบบที่ต้องการใช้ สามารถระบุโดย name, shorted เป็นต้น
data : เป็นส่วงของข้อมูลที่อยู่ในโครงสร้าง แบบเดียวกับ Sample Data ที่ได้ระบุให้กับแม่แบบรายงานนั้นๆ
options : เป็นส่วนของการตั้งค่าแม่แบบรายงาน ให้ทำงานเป็นพิเศษเช่น Content-Disposition, filename เป็นต้น
o Handlebars Templating Engine
§ Data binding
ข้อมูลจะอยู่ใรรูปแบบ {{…}}
ตัวอย่าง
{
“title”: “Hello world”
}
สามารถเรียกใช้ title โดย
<h1>{{title}}</h1>
§ Conditions
อยู่ในรูปแบบ
{{#if … Conditions…}}
…then…
{{/if}} >
ตัวอย่าง
{
“shouldPrint” : true,
“name” : “Jan Blaha”
}
เรียกใช้
{{#if shouldPring}}
<h1>{{name}}</h1>
{{/if}}
§ Loops
อยู่ในรูปแบบ
{{#each …data in loop…}}
……then……
{{/each}}
ตัวอย่าง
{
“comments”: [ {“title”: “New job”, “body”: “js developers wanted at… “ }]
}
เรียกใช้
{{#each comments}}
<h2>{{title}}</h2>
<div>{{body}}</div>
{{/each}}
§ Helpers
จะแบ่งเป็น 2 ส่วน คือ
Function : เป็น Code ในการทำงานซึ้งจะประกาศอยู่ในส่วนของ global
function toUpperCase(str) {
return str.toUpperCase();
}
Call Function : จะอยู่ในรูปแบบ {{…name function… …data method…}}
{{toUpperCase “hello world”}}
o ขั้นตอนการ Import — Export
File gif ขั้นตอนการ Import — Export https://jsreport.net/img/export.gif
>
