HTML to PDFのピュアクライアントサイドおよびピュアサーバーサイドの実装プログラム

// html2pdf.js

const puppeteer = require('puppeteer');
(async function(){
    // Start the service
    const browser = await puppeteer.launch();
    // open the tabs
    const page = await browser.newPage();
    // Go to this address
    await page.goto('https://koa.bootcss.com/#context');
    // html page to pdf and save to path
    await page.pdf({path:"test.pdf",format:'A4'})
    // close the browser
    await browser.close();
})();

   // DOM is the DOM node to transform
    html2canvas(DOM,{
        backgroundColor:"#ffffff",
        width:width,
        height:height,
        scale:2,
        allowTaint:true,
    }).then((canvas)=>{
        // canvas is the canvas after a successful conversion
    })

   // Create an instance
    let pdf = new jsPDF('','pt','a4');
    // add the image to the pdf file
    // the first parameter is the file to be inserted (base64) format, the second is the file format
    // the third fourth is the coordinates of the upper left corner of the picture, the last two are the width and height of the picture after insertion
    pdf.addImage(image,'JPEG',10,10,height,width);
    // add a new page
    pdf.addPage()
    // save pdf file
    pdf.save()

  // canvas is the image to be cropped
    // sx, sy are the coordinates to start cropping
    // swidth, sHeight is the width and height of the crop
    // dx, dy are the coordinates where the cropped image is inserted in the canvas
    // sWidth,sHeight is the width and height of the cropped image in the canvas
    cxt.drawImage(canvas,sx,sy,sWidth,sHeight,dx,dy,sWidth,sHeight);

/**
 * @description: form to pdf file
 * @return: pdf
 */
onSubmit(){
    // This is the form I want to convert, which has many of the same forms
    let form = this.$refs.form;
    // Get the width and height of the element
    let width = form.getBoundingClientRect().width;
    let height = form.getBoundingClientRect().height;
    html2canvas(form,{
        backgroundColor:"#ffffff",
        width:width,
        height:height,
        scale:2,
        allowTaint:true,
    }).then((canvas)=>{
        let pdf = new jsPDF('','pt','a4');
        // for image cutting
        let canvasList = this.splitCanvas(canvas, this.forms.length);

        // iterate through the canvas list, adding one image per page
        canvasList.forEach((item,index)=>{
            // convert the image format to base64
            let itemImage = item.toDataURL('image/jpeg',1.0);
            // leave 10px margins, A4 paper width in 72 resolution monitor is 595px
            pdf.addImage(itemImage,'JPEG',10,10,575.28,575.28/item.width*item.height);
            // If not the last page, then paginate
            index == this.forms.length-1 ? '' : pdf.addPage();
        })
        // file save
        let blob = pdf.output('blob');
        
        pdf.save('test.pdf');
    })
},
/**
 * @description: cut on canvas
 * @param {number} num number of slices 
 * @param {canvas} canvas 
 * @return {array} canvas list
 */
splitCanvas(canvas,num){
    let height = canvas.height,width = canvas.width;
    let chunkHeight = height/num;// the height of each slice
    let chunkList = [];// store the result canvas
    for(let i=0; i<height ; i+=chunkHeight){
        // initialize the crop rectangle box position
        let sx = 0,sy = i,sWidth = width,sHeight = chunkHeight,dx = 0, dy = 0;
        // Create a canvas node
        let canvasItem = document.createElement("canvas");
        // Initialize the canvas size
        canvasItem.height = chunkHeight;
        canvasItem.width = width;
        let cxt = canvasItem.getContext("2d");
        // put the cropped image into the new canvas node
        cxt.drawImage(canvas,sx,sy,sWidth,sHeight,dx,dy,sWidth,sHeight);
        chunkList.push(canvasItem); 
    }
    return chunkList;
},