// html2pdf.js

const puppeteer = require('puppeteer');
(async function(){
    // 啟動(dòng)服務(wù)
    const browser = await puppeteer.launch();
    // 打開標(biāo)簽頁(yè)
    const page = await browser.newPage();
    // 轉(zhuǎn)到該地址
    await page.goto('https://koa.bootcss.com/#context');
    // html頁(yè)面轉(zhuǎn)pdf并保存至path
    await page.pdf({path:"test.pdf",format:'A4'})
    // 關(guān)閉瀏覽器
    await browser.close();
})();

   // DOM是要轉(zhuǎn)換的DOM節(jié)點(diǎn)
    html2canvas(DOM,{
        backgroundColor:"#ffffff",
        width:width,
        height:height,
        scale:2,
        allowTaint:true,
    }).then((canvas)=>{
        // canvas 是轉(zhuǎn)換成功后的畫布
    })

   // 創(chuàng)建實(shí)例
    let pdf = new jsPDF('','pt','a4');
    // 將圖片添加到pdf文件里
    // 第一個(gè)參數(shù)是待插入的文件（base64）格式，第二個(gè)是文件格式
    // 第三第四是圖片左上角的坐標(biāo)，最后兩個(gè)是圖片插入后的寬高
    pdf.addImage(image,'JPEG',10,10,height,width);
    // 添加新的一頁(yè)
    pdf.addPage()
    // 保存pdf文件
    pdf.save()

  // canvas是待剪切的圖片
    // sx，sy是開始裁剪的坐標(biāo)
    // swidth、sHeight是裁剪的寬高
    // dx、dy是裁剪后圖像在canvas中插入的坐標(biāo)
    // sWidth,sHeight是裁剪后圖像在canvas中的寬高
    cxt.drawImage(canvas,sx,sy,sWidth,sHeight,dx,dy,sWidth,sHeight);

/**
 * @description: 表單轉(zhuǎn)pdf文件
 * @return: pdf
 */
onSubmit(){
    // 這是我要轉(zhuǎn)換的表單，里面有很多一樣的表格
    let form = this.$refs.form;
    // 獲取元素的寬高
    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');
        // 進(jìn)行圖片切割
        let canvasList = this.splitCanvas(canvas,this.forms.length);

        // 遍歷canvas列表，每頁(yè)添加一張圖片
        canvasList.forEach((item,index)=>{
            // 轉(zhuǎn)換圖片格式為base64
            let itemImage = item.toDataURL('image/jpeg',1.0);
            // 預(yù)留10px邊距，A4紙的寬在72分辨率的顯示器上是595px
            pdf.addImage(itemImage,'JPEG',10,10,575.28,575.28/item.width*item.height);
            // 如果不是最后一頁(yè)，則分頁(yè)
            index == this.forms.length-1 ? '' : pdf.addPage();
        })
        // 文件保存
        let blob = pdf.output('blob');
        
        pdf.save('test.pdf');
    })
},
/**
 * @description: 對(duì)canvas進(jìn)行切割
 * @param {number} num 切片數(shù)量 
 * @param {canvas} canvas 
 * @return {array} canvas列表
 */
splitCanvas(canvas,num){
    let height = canvas.height,width = canvas.width;
    let chunkHeight = height/num;// 每個(gè)切片的高度
    let chunkList = [];// 存放結(jié)果canvas
    for(let i=0; i<height ; i+=chunkHeight){
        // 初始化裁剪矩形框位置
        let sx = 0,sy = i,sWidth = width,sHeight = chunkHeight,dx = 0, dy = 0;
        // 創(chuàng)建一個(gè)canvas節(jié)點(diǎn)
        let canvasItem =document.createElement("canvas");
        // 初始化畫布大小
        canvasItem.height = chunkHeight;
        canvasItem.width = width;
        let cxt = canvasItem.getContext("2d");
        // 將裁剪的圖片放到新的canvas節(jié)點(diǎn)
        cxt.drawImage(canvas,sx,sy,sWidth,sHeight,dx,dy,sWidth,sHeight);
        chunkList.push(canvasItem); 
    }
    return chunkList;
},