HTMLからPDFへの変換のための純粋なクライアント側と純粋なサーバー側の実装ソリューション

// html2pdf.js

'puppeteer' という定数が必要です。
(非同期関数(){
    // サービスを開始します const browser = await puppeteer.launch();
    // タブを開く const page = await browser.newPage();
    // このアドレスに移動します await page.goto('https://koa.bootcss.com/#context');
    // HTML ページを PDF に変換し、パスに保存します
    page.pdf({path:"test.pdf",format:'A4'}) を待ちます
    // ブラウザを閉じる await browser.close();
})();

   // DOMは変換されるDOMノードです html2canvas(DOM,{
        背景色:"#ffffff",
        幅:幅、
        高さ:高さ、
        スケール:2,
        汚染を許可する:true、
    }).then((キャンバス)=>{
        // キャンバスは変換が成功した後のキャンバスです})

   // インスタンスを作成します。let pdf = new jsPDF('','pt','a4');
    // 画像を PDF ファイルに追加します // 最初のパラメーターは挿入するファイル形式 (base64)、2 番目はファイル形式です // 3 番目と 4 番目は画像の左上隅の座標、最後の 2 つは挿入後の画像の幅と高さです pdf.addImage(image,'JPEG',10,10,height,width);
    // 新しいページを追加する pdf.addPage()
    // PDFファイルを保存する pdf.save()

  // canvas は切り取る画像です // sx、sy は切り取りを開始する座標です // swidth、sHeight は切り取りの幅と高さです // dx、dy は切り取った画像を canvas に挿入する座標です // sWidth、sHeight は切り取った画像の canvas 内での幅と高さです cxt.drawImage(canvas, sx, sy, sWidth, sHeight, dx, dy, sWidth, sHeight);

/**
 * @description: フォームを PDF ファイルに変換します* @return: pdf
 */
送信(){
    // これは変換したいフォームです。このフォームには同一のフォームが多数あります。let form = this.$refs.form;
    // 要素の幅と高さを取得します。let width = form.getBoundingClientRect().width;
    高さを form.getBoundingClientRect().height に設定します。
    html2canvas(フォーム,{
        背景色:"#ffffff",
        幅:幅、
        高さ:高さ、
        スケール:2,
        汚染を許可する:true、
    }).then((キャンバス)=>{
        pdf = new jsPDF('','pt','a4');
        // 画像を切り取ります let canvasList = this.splitCanvas(canvas,this.forms.length);

        // キャンバスリストを走査し、各ページに画像を追加します canvasList.forEach((item,index)=>{
            // 画像フォーマットをbase64に変換する
            itemImage を item.toDataURL('image/jpeg',1.0); とします。
            // 10px の余白を確保します。A4 用紙の幅は 72 解像度のモニターでは 595px です。
            pdf.addImage(itemImage,'JPEG',10,10,575.28,575.28/item.width*item.height);
            // 最後のページでない場合は、ページ区切り index == this.forms.length-1 ? '' : pdf.addPage();
        })
        // ファイルを保存します。let blob = pdf.output('blob');
        
        pdf.save('test.pdf');
    })
},
/**
 * @description: キャンバスをカット * @param {number} num スライスの数 * @param {canvas} キャンバス 
 * @return {array} キャンバスリスト*/
splitCanvas(キャンバス,数値){
    高さを canvas.height、幅を canvas.width とします。
    let chunkHeight = height/num; // 各スライスの高さ let chunkList = []; // 結果のキャンバスを保存
    for(let i=0; i<height; i+=chunkHeight){
        // 切り抜き四角形の位置を初期化します。let sx = 0,sy = i,sWidth = width,sHeight = chunkHeight,dx = 0, dy = 0;
        // キャンバス ノードを作成します。let canvasItem = document.createElement("canvas");
        // キャンバス サイズを初期化します。canvasItem.height = chunkHeight;
        キャンバスアイテムの幅 = 幅;
        cxt = canvasItem.getContext("2d"); とします。
        // 切り取った画像を新しいキャンバス ノードに配置します。cxt.drawImage(canvas,sx,sy,sWidth,sHeight,dx,dy,sWidth,sHeight);
        chunkList.push(キャンバスアイテム); 
    }
    chunkList を返します。
},