1 | # we-edit-representation-pagination
|
2 |
|
3 | Pagination representation is used to compose document to pages, and then you can use composed document to output PDF/PCL/....
|
4 | Pagination representation is based on svg, so the composed pages are all svg elements.
|
5 |
|
6 | ## example
|
7 | ```jsx
|
8 | <Representation type="pagination"/>
|
9 | ```
|
10 | or
|
11 |
|
12 | ```js
|
13 | import Pagination from "we-edit-representation-pagination"
|
14 | let representation=<Pagination/>
|
15 | ReactDOM.render(<Editor representation={<Pagination/>}/>)
|
16 | ```
|
17 |
|
18 | ## Components
|
19 |
|
20 | ###Pagination: default, auto registration as representation[type="pagination"]
|
21 | ###Output: inherit Emitter.Format to provide output interface with following functions
|
22 | >onDocument()
|
23 | >onDocumentEnd()
|
24 | >onPage({})
|
25 | >onText({})
|
26 | >onImage({})
|
27 | >on[ElementName of svg]
|
28 | more functions if you know what you are doing
|
29 | >render
|
30 | >output(content stream)
|
31 | >on...
|
32 | >addAsyncJob: push your async promise if you have
|
33 | >.offset: current offset position
|
34 |
|
35 | #### output implementation example
|
36 | ```js
|
37 | import PDFDocument from "pdfkit"
|
38 |
|
39 | class PDF extends Output{
|
40 | onDocument(){
|
41 | this.pdf=new PDFDocument()
|
42 | this.pdf.pipe(this.props.stream)
|
43 | }
|
44 |
|
45 | onDocumentEnd(){
|
46 | this.pdf.end()
|
47 | }
|
48 |
|
49 | onText({text,x,y,fontSize, fontFamily, fontWeight, fill,...props}){
|
50 | this.pdf
|
51 | .fontSize(fontSize)
|
52 | .fontFamily(fontFamily)
|
53 | .fillColor(fill)
|
54 | .text(text, this.offset.x+x, this.offset.y+y)
|
55 | }
|
56 |
|
57 | onImage({xlink:href, width,height,x=0,y=0}){
|
58 | this.addAsyncJob(
|
59 | fetch(xlink:href)
|
60 | .then(res=>res.arrayBuffer())
|
61 | .then(buffer=>{
|
62 | this.pdf
|
63 | .image(buffer,this.offset.x+x, this.offset.y+y,width,height)
|
64 | })
|
65 | )
|
66 | }
|
67 | }
|
68 |
|
69 | ```
|