├── .babelrc
├── .editorconfig
├── .eslintrc
├── .github
└── FUNDING.yml
├── .gitignore
├── .travis.yml
├── README.md
├── example
├── README.md
├── package.json
├── public
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.js
│ ├── OctoCatImage.js
│ └── index.js
└── yarn.lock
├── package.json
├── rollup.config.js
├── src
├── .eslintrc
├── AddPage.js
├── ChangePage.js
├── Circle.js
├── Html.js
├── Image.js
├── Line.js
├── PDF.js
├── Rectangle.js
├── Table.js
├── Text.js
├── Triangle.js
└── index.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["@babel/preset-env", {
4 | "modules": false
5 | }],
6 | "@babel/preset-react"
7 | ],
8 | "plugins": ["@babel/plugin-proposal-class-properties"]
9 | }
10 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "extends": [
4 | "standard",
5 | "standard-react"
6 | ],
7 | "env": {
8 | "es6": true
9 | },
10 | "plugins": [
11 | "react"
12 | ],
13 | "parserOptions": {
14 | "sourceType": "module"
15 | },
16 | "rules": {
17 | // don't force es6 functions to include space before paren
18 | "space-before-function-paren": 0,
19 |
20 | // allow specifying true explicitly for boolean props
21 | "react/jsx-boolean-value": 0
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
4 | patreon: # Replace with a single Patreon username
5 | open_collective: # Replace with a single Open Collective username
6 | ko_fi: # Replace with a single Ko-fi username
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
13 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 |
2 | # See https://help.github.com/ignore-files/ for more about ignoring files.
3 |
4 | # dependencies
5 | node_modules
6 |
7 | # builds
8 | build
9 | dist
10 | .rpt2_cache
11 |
12 | # misc
13 | .DS_Store
14 | .env
15 | .env.local
16 | .env.development.local
17 | .env.test.local
18 | .env.production.local
19 |
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - 9
4 | - 8
5 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # jspdf-react
2 |
3 | >
4 |
5 | [](https://www.npmjs.com/package/jspdf-react) [](https://standardjs.com)
6 |
7 | ## Install
8 |
9 | ```bash
10 | npm install --save jspdf-react
11 | ```
12 |
13 | ## ⚠️Note: Use CSS-in-JS, Styled-Component or emotion.
14 |
15 | If you want to convert an html in pdf, I recommend using the library.
16 | [https://github.com/eKoopmans/html2pdf.js](https://github.com/eKoopmans/html2pdf.js)
17 |
18 | ## Usage
19 |
20 | ```jsx
21 | import React, { Component } from 'react'
22 |
23 | import PDF, { Text, AddPage, Line, Image, Table, Html } from 'jspdf-react'
24 |
25 | import OctoCatImage from './OctoCatImage'
26 |
27 | const styleH1 = {
28 | fontSize: '15px',
29 | textAlign: 'center',
30 | color: 'red'
31 | };
32 |
33 | const invisibleStyle = {
34 | display: 'none',
35 | };
36 |
37 | export default class App extends Component {
38 | render () {
39 | const properties = { header: 'Acme' }
40 | const head = [["ID", "Name", "Country"]]
41 | const body = [
42 | [1, "Shaw", "Tanzania"],
43 | [2, "Nelson", "Kazakhstan"],
44 | [3, "Garcia", "Madagascar"],
45 | ]
46 | return (
47 |
68 | lorem ipsumLorem Ipsum is simply dummy text of the printing and
69 | typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
70 | since the 1500s, when an unknown printer took a galley of type and scrambled it to
71 | make a type specimen book. It has survived not only five centuries, but also the
72 | leap into electronic typesetting, remaining essentially unchanged. It was popularised
73 | in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
74 | and more recently with desktop publishing software like Aldus PageMaker including
75 | versions of Lorem Ipsum.
76 |
59 |
Source Html
67 |
4 | You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
5 |
6 | ## Table of Contents
7 |
8 | - [Updating to New Releases](#updating-to-new-releases)
9 | - [Sending Feedback](#sending-feedback)
10 | - [Folder Structure](#folder-structure)
11 | - [Available Scripts](#available-scripts)
12 | - [npm start](#npm-start)
13 | - [npm test](#npm-test)
14 | - [npm run build](#npm-run-build)
15 | - [npm run eject](#npm-run-eject)
16 | - [Supported Language Features and Polyfills](#supported-language-features-and-polyfills)
17 | - [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor)
18 | - [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor)
19 | - [Debugging in the Editor](#debugging-in-the-editor)
20 | - [Formatting Code Automatically](#formatting-code-automatically)
21 | - [Changing the Page `