├── .github └── workflows │ └── npm-publish.yml ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── content.jpg ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── src ├── config.ts ├── index.ts ├── js-pdf.ts ├── plugins │ ├── index.ts │ └── useWaterMark.ts ├── render-canvas.ts ├── types.ts └── utils │ ├── getPageData.ts │ ├── images.ts │ └── joinObject.ts ├── test.png ├── tsconfig.json ├── webpack.config.js └── yarn.lock /.github/workflows/npm-publish.yml: -------------------------------------------------------------------------------- 1 | name: npm-publish 2 | on: 3 | push: 4 | tags: 5 | - 'v*' 6 | jobs: 7 | build: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: Checkout 11 | uses: actions/checkout@v2 12 | - name: Setup Node 13 | uses: actions/setup-node@v2 14 | with: 15 | node-version: '16.x' 16 | registry-url: 'https://registry.npmjs.org' 17 | - name: Install dependencies and build 🔧 18 | run: yarn ci && yarn build 19 | - name: Publish package on NPM 📦 20 | run: npm publish 21 | # https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages 22 | env: 23 | NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist/ -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | index.html 2 | test.png 3 | content.jpg 4 | webpack.config.js 5 | /src/ 6 | /.github/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Johnny 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
7 | 8 | # jsPDF-html2canvas 9 | A combine usage with jsPDF & html2canvas, which translating html content to PDF file. Written in Typescript. 10 | 11 | > html2PDF function will auto fit the target dom width into PDF size. So no need to worry about the overflow part. And if the content height is over 1 pdf, it'll auto seperate it into another pdf page. 12 | 13 | 14 | ## Install 15 | 16 | ``` 17 | npm i jspdf-html2canvas 18 | ``` 19 | 20 | ```js 21 | import html2PDF from 'jspdf-html2canvas'; 22 | 23 | html2PDF(node, options); 24 | ``` 25 | 26 | since this plugin is an umd module, you can also use by cdn with `/dist/jspdf-html2canvas.min.js`, just remember to include both `jspdf` & `html2canvas` cdn before this plugin. 27 | 28 | ```js 29 | 30 | 31 | 32 | ``` 33 | 34 | 35 | ## html2PDF([Node, NodeList], options) 36 | 37 | convert specific DOM target to print it into PDF file. 38 | 39 | Automatically, it'll save the file, or you can define the `success` callback to do with the jsPDF instance. 40 | 41 | ```html 42 | 43 |Here is some content for testing!!
46 |This is an page for testing 1
99 |This is an page for testing 1
103 |This is an page for testing 1
107 |This is an page for testing 1, This is an page for testing 1, This is an page for testing 1, This is an page for testing 1
62 |
66 |
67 |
This is an page for testing 3
72 |This is an page for testing 3
85 |89 | This is an page for testing 5 90 |
91 |
92 |
Title3 | 99 |Title2 | 100 |Title2 | 101 |
---|---|---|
Content1 | 106 |Content1 | 107 |Content1 | 108 |
Content1 | 111 |Content1 | 112 |Content1 | 113 |
Content1 | 116 |Content1 | 117 |Content1 | 118 |