Skip to content

Commit

Permalink
Updated README with new changes
Browse files Browse the repository at this point in the history
  • Loading branch information
edisonneza committed Mar 27, 2021
1 parent de77fa2 commit d1b4af1
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 5 deletions.
78 changes: 74 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
# PDF Invoice Template
PDF template created to generate invoices based on props object. Using `jsPDF` library. ( `jsPDF` is exported also, so it can be used without importing jsPDF separately. )

Creating PDF from scratch is a nightmare (at least for me). In some project we need to use js for generating varios PDF, and mostly they are invoices PDF files. This project I've created for personal use but being here why not to share with others?
Creating PDF from scratch is a nightmare (at least for me). In some project we need to use js for generating various PDF, and mostly they are invoices PDF files. This project I've created for personal use but being here why not to share with others?

All this code works by using an object as parameter for the function. Here some properties are optional and you can add them as empty string if you want to display nothing. Also it can be used in different languages because all labels (and all text) can be set in the props object.
All this code works by using an object as parameter for the function. <br/>
From <i><b>v1.2.0</b></i> all properties are optional and you can add them as empty string or just remove them from the prop object, if you want to display nothing. Also it can be used in different languages because all labels (and all text) can be set in the props object.

<h4><b><i>Feel free for any suggestion or improvements.</i></b></h4>

## [Demo site](https://edisonneza.github.io/jspdf-invoice-template) | [Demo images](#demo-images) | [jsPDF Documentation](http://raw.githack.com/MrRio/jsPDF/master/docs/)
<br/>

# Install and usage
<details open>
<summary>How to install or load in my project?</summary>
This small "library" can be imported in any project via `npm` or in browser via CDN by using `jsPDFInvoiceTemplate` variable.

Get it from NPM:
Expand All @@ -20,10 +25,14 @@ npm i jspdf-invoice-template
Alternatively, load latest version from a CDN:<br/>
<i>(Recommended to use a static version (not @latest) to prevent failure when updates are made)</i>
```html
<script src="https://unpkg.com/jspdf-invoice-template@1.1.0/dist/index.js"></script>
<script src="https://unpkg.com/jspdf-invoice-template@1.2.0/dist/index.js"></script>
```
</details>
<hr/>

<details>
<summary>How to use it?</summary>

## Usage

You're ready to start creating your invoice PDF document:
Expand All @@ -45,6 +54,11 @@ const jsPDF = jsPDFInvoiceTemplate.jsPDF();

jsPDFInvoiceTemplate.default( propsObject );
```
</details>
<hr/>

<details>
<summary>What about Parameters Object?</summary>

## Parameters object

Expand All @@ -58,6 +72,7 @@ var pdfObject = jsPDFInvoiceTemplate.default(props); //returns number of pages c

var props = {
outputType: OutputType.Save,
returnJsPDFDocObject: true,
fileName: "Invoice 2021",
orientationLandscape: false,
logo: {
Expand Down Expand Up @@ -130,8 +145,63 @@ var props = {
pageLabel: "Page ",
};
```
</details>
<hr/>

<details>
<summary>What will be returned?</summary>
The return object depends on parameters object. See the code below:

```typescript
{
pagesNumber: number, // (always) - number of pages
jsPDFDocObject: jsPDF, // if (returnJsPDFDocObject: true) - the doc already created. You can use it to add new content, new pages.
blob: Blob, // if (outputType: 'blob') - returns the created pdf file as a Blob object. So you can upload and save it to your server. (Idea from a comment on Twitter)
dataUriString: string, // if (outputType: 'datauristring')
arrayBuffer: ArrayBuffer // if (outputType: 'arraybuffer')
}

//store it to a variable and use it wherever you want
var pdfCreated = jsPDFInvoiceTemplate.default({ ...parameters });
var blob = pdfCreated.blob;
//...
var pagesNum = pdfCreated.pagesNumber;
var pdfObject = pdfCreated.jsPDFDocObject;
```
</details>
<hr/>

<details>
<summary>How to use the returned jsPDFDocObject?</summary>

```typescript
//example: create a PDF using the template
var pdfCreated = jsPDFInvoiceTemplate.default({ ...parameters });

//add new page or new content -> see jsPDF documentation
pdfCreated.jsPDFDocObject.addPage();
pdfCreated.jsPDFDocObject.text("Test text", 10, 50);
//...

pdfCreated.jsPDFDocObject.save(); //or .output('<outputTypeHere>');
```
</details>

<hr/>

<details>
<summary>--- Changelog ---</summary>

* v.1.2.0:

* Added returnJsPDFDocObject prop
* Added support for returning different outputs based on output type prop
* All parameter object properties are now OPTIONAL
* Return jspdf doc object, so now can be added new content or edited the pdf file and output it in all types that jsPDF library supports.
</details>
<hr/>

## Demo images
# Demo images
![portrait version](https://raw.githubusercontent.com/edisonneza/jspdf-invoice-template/demo/images/portrait_mode.PNG)

Landscape:
Expand Down
6 changes: 6 additions & 0 deletions dist/src/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export namespace OutputType {
const DataUri: string;
const DataUrlNewWindow: string;
const Blob: string;
const ArrayBuffer: string;
}
import { jsPDF } from "jspdf";
/**
Expand Down Expand Up @@ -83,6 +84,7 @@ declare function jsPDFInvoiceTemplate(props: {
DataUri: string;
DataUrlNewWindow: string;
Blob: string;
ArrayBuffer: string;
} | string;
returnJsPDFDocObject?: boolean;
fileName: string;
Expand Down Expand Up @@ -150,5 +152,9 @@ declare function jsPDFInvoiceTemplate(props: {
pageLabel?: string;
}): {
pagesNumber: number;
jsPDFDocObject?: jsPDF;
blob?: Blob;
dataUriString?: string;
arrayBuffer?: ArrayBuffer;
};
export { jsPDF };
6 changes: 6 additions & 0 deletions src/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export namespace OutputType {
const DataUri: string;
const DataUrlNewWindow: string;
const Blob: string;
const ArrayBuffer: string;
}
import { jsPDF } from "jspdf";
/**
Expand Down Expand Up @@ -83,6 +84,7 @@ declare function jsPDFInvoiceTemplate(props: {
DataUri: string;
DataUrlNewWindow: string;
Blob: string;
ArrayBuffer: string;
} | string;
returnJsPDFDocObject?: boolean;
fileName: string;
Expand Down Expand Up @@ -150,5 +152,9 @@ declare function jsPDFInvoiceTemplate(props: {
pageLabel?: string;
}): {
pagesNumber: number;
jsPDFDocObject?: jsPDF;
blob?: Blob;
dataUriString?: string;
arrayBuffer?: ArrayBuffer;
};
export { jsPDF };
15 changes: 14 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ const OutputType = {
DataUriString: "datauristring", //returns the data uri string
DataUri: "datauri", //opens the data uri in current window
DataUrlNewWindow: "dataurlnewwindow", //opens the data uri in new window
Blob: "blob", //return blob format of the doc
Blob: "blob", //return blob format of the doc,
ArrayBuffer: "arraybuffer", //return ArrayBuffer format
};

export { OutputType, jsPDF };
Expand Down Expand Up @@ -528,6 +529,18 @@ function jsPDFInvoiceTemplate(props) {
...returnObj,
blob: blobOutput,
};
} else if (param.outputType === "datauristring") {
returnObj = {
...returnObj,
dataUriString: doc.output("datauristring", {
filename: param.fileName,
}),
};
} else if (param.outputType === "arraybuffer") {
returnObj = {
...returnObj,
arrayBuffer: doc.output("arraybuffer"),
};
} else
doc.output(param.outputType, {
filename: param.fileName,
Expand Down

0 comments on commit d1b4af1

Please sign in to comment.