chanthasuon/ lib-invoice-print
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

fixed version and build the import

This commit is contained in:
Sambo Chea 2020-10-16 11:30:59 +07:00
parent 1b66b6eb2a
commit 65489ccf4e
3 changed files with 282 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -1,11 +1,12 @@
{ {
"name": "@cubetiq/invoice-print", "name": "@cubetiq/invoice-print",
"version": "1.0.1", "version": "1.0.2",
"description": "Invoice Print80m", "description": "Invoice Print80m",
"author": "Chantha Suon", "author": "Chantha Suon",
"license": "MIT", "license": "MIT",
"repository": "https://git.cubetiqs.com/chanthasuon/lib-invoice-print.git", "repository": "https://git.cubetiqs.com/chanthasuon/lib-invoice-print.git",
"main": "dist/index.js", "main": "dist/index.js",
"types": "dist/index.d.ts",
"module": "dist/index.modern.js", "module": "dist/index.modern.js",
"source": "src/index.tsx", "source": "src/index.tsx",
"private": false, "private": false,

1
src/index.tsx
View File

@ -11,3 +11,4 @@ export const ExampleComponent = ({ text }: Props) => {
export * from 'pdfmake/interfaces' export * from 'pdfmake/interfaces'
export * from 'pdfmake/build/pdfmake' export * from 'pdfmake/build/pdfmake'
export * from './invoice'

127
src/invoice.ts
View File

@ -1,19 +1,22 @@
import {CanvasElement, Content, TDocumentDefinitions} from "pdfmake/interfaces"; import {
import {useEffect, useState} from "react"; CanvasElement,
import pdfMake from "pdfmake/build/pdfmake"; Content,
TDocumentDefinitions
} from 'pdfmake/interfaces'
import { useEffect, useState } from 'react'
import pdfMake from 'pdfmake/build/pdfmake'
export interface DataToPrint { export interface DataToPrint {
configs: { configs: {
title?: string, title?: string
logoUrl?: string, logoUrl?: string
headline?: string, headline?: string
columnsHeader: Array<Content>, columnsHeader: Array<Content>
} }
data: { data: {
header: any, header: any
items: any[], items: any[]
summary: any, summary: any
footer?: Array<Content> footer?: Array<Content>
} }
} }
@ -22,18 +25,22 @@ const isInvoiceMasterRow = (i: number) => {
return i % 2 === 0 && i === 0 return i % 2 === 0 && i === 0
} }
pdfMake.fonts = { pdfMake.fonts = {
"Khmer": { Khmer: {
normal: 'kh-battambang.ttf', normal: 'kh-battambang.ttf',
bold: 'kh-battambang.ttf', bold: 'kh-battambang.ttf',
italics: 'kh-battambang.ttf', italics: 'kh-battambang.ttf',
bolditalics: 'kh-battambang.ttf', bolditalics: 'kh-battambang.ttf'
}, },
Roboto: { Roboto: {
normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf', normal:
bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf', 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf', bold:
bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf' 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',
}, italics:
'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',
bolditalics:
'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf'
}
} }
pdfMake.tableLayouts = { pdfMake.tableLayouts = {
invoiceMasterReport: { invoiceMasterReport: {
@ -58,7 +65,6 @@ pdfMake.tableLayouts = {
defaultBorder: false defaultBorder: false
}, },
invoiceNestedDetailReport: { invoiceNestedDetailReport: {
paddingLeft: function () { paddingLeft: function () {
return 1 return 1
@ -89,7 +95,7 @@ pdfMake.tableLayouts = {
}, },
vLineWidth: function () { vLineWidth: function () {
return 0 return 0
}, }
}, },
summaryInvoice: { summaryInvoice: {
paddingLeft: function () { paddingLeft: function () {
@ -105,7 +111,7 @@ pdfMake.tableLayouts = {
return 5 return 5
}, },
hLineColor: function (i) { hLineColor: function (i) {
return i === 1 ? 'black' : '#e4e4e4'; return i === 1 ? 'black' : '#e4e4e4'
}, },
vLineWidth: function () { vLineWidth: function () {
return 1 return 1
@ -120,7 +126,7 @@ const drawLine: (length?: number) => CanvasElement = (length = 292.26) => {
y1: 0, y1: 0,
x2: length, x2: length,
y2: 0, y2: 0,
lineWidth: 0.2, lineWidth: 0.2
} }
} }
@ -153,28 +159,26 @@ export const useDoc = (mockData: DataToPrint) => {
setBody([...temp]) setBody([...temp])
}, [columns]) }, [columns])
useEffect(() => { useEffect(() => {
let temp: Array<any> = [] let temp: Array<any> = []
// eslint-disable-next-line array-callback-return // eslint-disable-next-line array-callback-return
Object.keys(mockData.data.header).map(function (key) { Object.keys(mockData.data.header).map(function (key) {
const keyLabel = { const keyLabel = {
text: key + " :", text: key + ' :',
fontSize: 9, fontSize: 9,
alignment: "left" alignment: 'left'
} }
const value = { const value = {
// @ts-ignore // @ts-ignore
text: mockData.data?.header[key], text: mockData.data?.header[key],
fontSize: 9, fontSize: 9,
alignment: "right" alignment: 'right'
} }
temp.push([keyLabel, value]) temp.push([keyLabel, value])
}) })
setTitle([...temp]) setTitle([...temp])
}, []) }, [])
useEffect(() => { useEffect(() => {
const data = mockData.data.items.map((it: any) => { const data = mockData.data.items.map((it: any) => {
return { return {
@ -183,8 +187,8 @@ export const useDoc = (mockData: DataToPrint) => {
return { return {
text: value, text: value,
fontSize: 9, fontSize: 9,
width: "*", width: '*',
alignment: columns[index]?.alignment, alignment: columns[index]?.alignment
} }
}) })
] ]
@ -193,32 +197,29 @@ export const useDoc = (mockData: DataToPrint) => {
setBody([...data]) setBody([...data])
}, []) }, [])
useEffect(() => { useEffect(() => {
let temp: Array<any> = [] let temp: Array<any> = []
// eslint-disable-next-line array-callback-return // eslint-disable-next-line array-callback-return
Object.keys(mockData.data.summary).map(function (key) { Object.keys(mockData.data.summary).map(function (key) {
const keyLabel = { const keyLabel = {
text: key + " :", text: key + ' :',
fontSize: 9, fontSize: 9,
alignment: "right" alignment: 'right'
} }
const value = { const value = {
// @ts-ignore // @ts-ignore
text: mockData.data?.summary[key], text: mockData.data?.summary[key],
fontSize: 9, fontSize: 9,
alignment: "center" alignment: 'center'
} }
temp.push([keyLabel, value]) temp.push([keyLabel, value])
}) })
setSummary([...temp]) setSummary([...temp])
}, []) }, [])
const data: TDocumentDefinitions | any = { const data: TDocumentDefinitions | any = {
'content': [ content: [
mockData.configs.logoUrl && mockData.configs.logoUrl && {
{
alignment: 'center', alignment: 'center',
image: mockData.configs.logoUrl, image: mockData.configs.logoUrl,
width: 100, width: 100,
@ -226,55 +227,43 @@ export const useDoc = (mockData: DataToPrint) => {
style: 'header', style: 'header',
fontSize: 23, fontSize: 23,
bold: true, bold: true,
margin: [0, 10], margin: [0, 10]
}, },
mockData.configs.title && mockData.configs.title && {
{
alignment: 'center', alignment: 'center',
text: mockData.configs.title, text: mockData.configs.title,
style: 'header', style: 'header',
fontSize: 8, fontSize: 8,
bold: true, bold: true,
margin: [0, 10], margin: [0, 10]
}, },
mockData.configs.headline && mockData.configs.headline && {
{
alignment: 'center', alignment: 'center',
text: mockData.configs.headline, text: mockData.configs.headline,
fontSize: 18, fontSize: 18,
bold: true, bold: true
}, },
{ {
layout: "noBorders", layout: 'noBorders',
fontSize: 9, fontSize: 9,
table: { table: {
widths: "*", widths: '*',
body: [ body: [...title]
...title
]
} }
}, },
{ {
layout: "invoiceMasterReport", layout: 'invoiceMasterReport',
table: { table: {
widths: '*', widths: '*',
body: [ body: [mockData.configs.columnsHeader]
mockData.configs.columnsHeader
]
} }
}, },
{ {
layout: "invoiceNestedDetailReport", layout: 'invoiceNestedDetailReport',
table: { table: {
widths: '*', widths: '*',
body: [ body: [...body]
...body,
]
} }
}, },
{ {
columns: [ columns: [
@ -284,14 +273,11 @@ export const useDoc = (mockData: DataToPrint) => {
] ]
}, },
{ {
layout: "summaryInvoice", layout: 'summaryInvoice',
table: { table: {
widths: ['*', '*'], widths: ['*', '*'],
body: [ body: [...summary]
...summary,
]
} }
}, },
{ {
columns: [ columns: [
@ -300,20 +286,19 @@ export const useDoc = (mockData: DataToPrint) => {
} }
] ]
}, },
mockData.data.footer?.map(it => { mockData.data.footer?.map((it) => {
return it return it
}) })
], ],
pageSize: {width: 302.26, height: "auto"}, pageSize: { width: 302.26, height: 'auto' },
pageOrientation: "portrait", pageOrientation: 'portrait',
pageMargins: [5, 5, 5, 5], pageMargins: [5, 5, 5, 5],
styles: { styles: {
header: { header: {
color: "#2ac4e6" color: '#2ac4e6'
} }
} }
} }
return pdfMake.createPdf(data) return pdfMake.createPdf(data)
} }