JS Export HTML to PDF

Dependency packages

Based on two packages, jsPDF and html2canvas.

npm install jspdf –save-dev
npm install html2canvas –save-dev

• jspdf github address: https://github.com/MrRio/jsPDF
• html2canvas github address: https://github.com/niklasvh/html2canvas

The basic idea

1. calculate the number of pages and the width and height of each page
2. Create a jsPDF instance. Loop, call html2canvas method, render each page page as canvas, and get the image data to insert into the pdf. After insertion, call jsPDF.addPage() method, add a page. Then, change the dom’s css attribute top, so that it moves up a page distance to the next page.
3. When the last page, get the last page of the picture data after calling jsPDF.save () method, save the pdf file.

import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'

/**
 * @Author seminelee
 * @DateTime 2017-09-01
 * @param    {object}   dom dom
 * @param    {number}   domWidth dom宽度
 * @param    {number}   domHeight dom高度
 * @param    {number}   windowWidth window.innerWidth
 * @param    {number}   windowHeight window.innerHeight
 * @param    {string}   fileName 导出文件名
 * @return   {function}              [description]
 */

const html2pdf = function(dom, domWidth, domHeight, windowWidth, windowHeight, fileName){

    const pageNum = Math.ceil(domHeight / windowHeight);

    const a4Width = 592.28;
    const a4Height = 841.89;
    const imgWidth = domWidth / windowWidth * a4Width;
    const imgHeight = domHeight / windowHeight * a4Height;

    let pdf = new jsPDF('', 'pt', 'a4');

    for ( let i= 0; i < pageNum; i++) {
        dom.style.top = (- i * windowHeight) + 'px';
        html2canvas(dom, {
            onrendered: (canvas) => {
                let pageData = canvas.toDataURL('image/jpeg', 1.0);

                pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );

                if (i == pageNum -1) {
                    pdf.save(fileName)
                } else {
                    pdf.addPage();
                }
            }
        })
    }
    dom.style.top = 0;
}

export default html2pdf;