フロントエンド js JavaScript で PDF を生成し、html2Canvas+jspdf.js でページネーションなしの長い画像を実現 (PDF のエクスポート、ダウンロード)

 フロントエンド js が pdf を生成する

この記事では主に jspdf+html2Canvasを使用して html を pdf に変換します。 jspdf は中国語をサポートしていない ため、html2Canvas と連携して最初に画像を生成してから PDF に変換する必要があるため、中国語と英語の問題を考慮する必要はありませんが、ページネーションと不親切なスタイルの問題が 発生 し ます 。

1. 事前準備

        1. jspdf をインストールします:  npm install jspdf --save

        2. html2Canvas をインストールします:  npm install --save html2canvas

2. ファイルにインポートする

   'html2canvas' から html2Canvas をインポートします。
   「jspdf」から JsPDF をインポートします。

3. コード関数本体

// 保存 PDF
  const convertCanvasToImage = () => {
    // 分页
    // html2Canvas(document.querySelector('#chart_table'), {
    //   allowTaint: true,
    // }).then(function (canvas) {
    //   let contentWidth = canvas.width;
    //   let contentHeight = canvas.height;
    //   let pageHeight = (contentWidth / 592.28) * 841.89;
    //   let leftHeight = contentHeight;
    //   let position = 0;
    //   let imgWidth = 595.28;
    //   let imgHeight = (592.28 / contentWidth) * contentHeight;
    //   let pageData = canvas.toDataURL('image/jpeg', 1.0);
    //   let PDF = new JsPDF('', 'pt', 'a4');
    //   if (leftHeight < pageHeight) {
    //     PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
    //   } else {
    //     while (leftHeight > 0) {
    //       PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
    //       leftHeight -= pageHeight;
    //       position -= 841.89;
    //       if (leftHeight > 0) {
    //         PDF.addPage();
    //       }
    //     }
    //   }
    //   PDF.save('DataAnalysisResults.pdf');
    // });
    // 不分页
    let element = document.getElementById('chart_table');
    if (element) {
      let width = element.offsetWidth / 4;
      let height = element.offsetHeight / 4;
      let limit = 14400;
      if (height > limit) {
        let contentScale = limit / height;
        height = limit;
        width *= contentScale;
      }
      html2Canvas(element, {
        scale: 2,
        useCORS: true,
        allowTaint: false,
        ignoreElements: (element) => {
          if (element.id === 'ignoreBtnElement') return true;
          return false;
        }
      }).then(canvas => {
        let context = canvas.getContext('2d');
        let orientation;
        if (context) {
          context.mozImageSmoothingEnabled = false;
          context.webkitImageSmoothingEnabled = false;
          context.msImageSmoothingEnabled = false;
          context.imageSmoothingEnabled = false;
        }
        let pageData = canvas.toDataURL('image/jpg', 1.0);
        let img = new Image();
        img.src = pageData;
        img.onload = function () {
          img.width /= 2;
          img.height /= 2;
          img.style.transform = 'scale(0.5)';
          let pdf;
          orientation = width > height ? 'l' : 'p'
          // eslint-disable-next-line
          pdf = new JsPDF(orientation , 'mm', [
            width,
            height
          ]);
          pdf.addImage(
            pageData,
            'jpeg',
            0,
            0,
            width,
            height
          );
          pdf.save('DataAnalysisResults.pdf');
        };
      });
    }
  };

 4.理解できない場合は質問し、注意していただきありがとうございます、ご指導いただきありがとうございます、苦情を言っていただきありがとうございます