1.0.8 • Published 4 years ago

html-pdf-adaptive v1.0.8

Weekly downloads
114
License
ISC
Repository
github
Last release
4 years ago

HTML TO PDF npm.io

Install

npm i html-pdf-adaptive --save

or

<script src="https://unpkg.com/html-pdf-adaptive@[version]/src/html2pdf.min.js"></script>

Usage

import html2PDF from "html-pdf-adaptive"

const el = document.querySelector(".container")
document.querySelector("#renderPdf").addEventListener("click", () => {
  html2PDF(el)
})

or

<script src="https://unpkg.com/html-pdf-adaptive@[version]/src/html2pdf.js"></script>
<script>
window.onload = function () {
    const el = document.querySelector('.container')
    document.querySelector('#renderPdf').addEventListener('click', () => {
        window.html2PDF(el, {
            mode: 'adaptive',
            pagesplit: true,
            offset: {
                x: 20,
                y: 20
            },
            outputType: 'save',
            isToggleStyle: true,
            useCORS: true,
            useDefaultFoot: true,
            onProgress: (percent, pageNum, bloburl) => {
                console.log(`${percent}%, 第${pageNum}页, ${bloburl}`)
            },
            onComplete: (bloburl) => {
                console.log(bloburl)
            }
        })
    })
}

</script>

API

paramstypedefaultdescription
pagesplitBooleanfalseIs splite PDF to multiple pages
orientationStringpOrientation of PDF, p for portrait, l for landscape
unitStringptUnit for PDF
formatStringa4Format for PDF
offsetObject{ x: 0, y: 0 }Reserved offset for PDF, x & y
outputTypeStringsaveOutput type when during rendering. save, bloburl, file and others from jsPDF.API
modeStringadaptiveMode for adaptive or fixed
filenameStringdemoOutput filename
useCORSBooleanfalseWhether to attempt to load images from a server using CORS
isToggleStyleBooleanfalseFix element style to get complete PDF
headerFunction/DOMloopPDF's header
footerFunction/DOM<p>${pageNum}</p>PDF's footer
useDefaultFootBooleantrueIs use default footer
onProgressFunctionnullcallback of rendered one page
onCompleteFunctionnullcallback of rendered all page

Suggestions

  • mode 'adaptive' or 'fixed' will work by pagesplit is true
  • header & footer disabled in a single page PDF
  • header & footer DOM will use cache to improve performance
  • mode adaptive not yet processing the node style sets the height of the column
  • useCORS maybe need server client
  • no processing too long Image node or too long Text node

Callback

onProgress(percent, pageNum, output, outputType) {}
onProgress(output) {}

Return

Promise {\: undefined}

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago