【Angular】pdf出力機能を「jspdf」と「html2canvas」で実装する

作業環境

・Angualr8.0

・Windows10

・Vscode

ライブラリのインストール

# ライブラリのインストール
$ npm install jspdf@1.4.1 --save
$ npm install html2canvas --save
$ npm install @types/jspdf --save
$ npm install @types/html2canvas --save

# コンポ-ネントの作成
$ ng generate component pdf-sample

<>

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
~~~~
import { PdfSampleComponent } from "./pdf-sample/pdf-sample.component";//これを追加!

const routes: Routes = [

  { path: "pdf-generater", component: PdfSampleComponent },//これを追加!
  
];

pdf出力機能の実装

<index.html>

<head>
~~~~ 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1ze/jspdf.min.js"></script>
~~~~
</head>

<pdf-sample.component.ts>

import { Component, OnInit, ElementRef, ViewChild } from "@angular/core";
import * as jspdf from "jspdf";
import html2canvas from "html2canvas";
declare var jsPDF: any;
@Component({
  selector: "app-pdf-sample",
  templateUrl: "./pdf-sample.component.html",
  styleUrls: ["./pdf-sample.component.css"],
})
export class PdfSampleComponent implements OnInit {
  @ViewChild("screen", { static: true }) screen: ElementRef;
  @ViewChild("canvas", { static: true }) canvas: ElementRef;
  @ViewChild("downloadLink", { static: true }) downloadLink: ElementRef;

  captureScreen() {
    const data = document.getElementById("contentToConvert");
    html2canvas(data).then((canvas) => {
      // Few necessary setting options
      const imgWidth = 308;
      const imgHeight = (canvas.height * imgWidth) / canvas.width + 50;
      const contentDataURL = canvas.toDataURL("image/png");
      const pdf = new jspdf("p", "mm", "a4"); // A4 size page of PDF
      const position = 0;
      pdf.addImage(contentDataURL, "PNG", 0, position, imgWidth, imgHeight);
      pdf.save("MYPdf.pdf"); // Generated PDF
    });
  }

  constructor() {}

  ngOnInit() {}

  htmlToPdf() {
    const doc = new jsPDF("letter");
    const ta = document.getElementById("pdfSink");
    doc.fromHTML(
      ta,
      0,
      0,
      {
        // options
      },

      setTimeout(function () {
        doc.save(`fileName`);
      }, 3000)
    );
  }
}

ViewChildの書き方がAngular6.0以降変わっているので注意。

doc.saveはdoc.fromHTMLの中に組み込んで同期的に処理する方法にせずそのまま記述すると非同期処理になっているので、画像など出力に時間が掛かる画面をPDF出力する際にタイムアウトとなり白紙のPDFが出力されてしまうので、このように記述する必要がある。

<pdf-sample.component.html>

<div id="contentToConvert">
  <h2>職務経歴書</h2>
  <h3>【職務概要】</h3>
  <p>○○○○○○○○○○○○○○○○○○○○○○</p>
  <p>○○○○○○○○○○○○○○○○○○○○○○</p>
  <h3>【職務経歴】</h3>
  <p>AngularUniversityに通いながらボディーガードをやっていました</p>
  <p>○○○○○○○○○○○○○○○○○○○○○○</p>
  <p>○○○○○○○○○○○○○○○○○○○○○○</p>
  <h3>【期間】</h3>
  <p>1999〜2020</p>
  <p>○○○○○○○○○○○○○○○○○○○○○○</p>
  <h3>【自己アピール】</h3>
  <p>○○○○○○○○○○○○○○○○○○○○○○</p>
  <br /><br />
</div>
<button (click)="captureScreen()">PDFをダウンロード</button>

参照:https://tech.windii.jp/frontend/angular/html-to-pdf

ブログ運営者

・関連記事







プログラミングの独学はとても難しい


プログラミングは小学校の義務教育にも導入され始めており、これから社会人として生きていく上でプログラミングはもはや出来て当たり前、出来なれば論外というエクセルレベルの必須スキルになりつつあります。そしてそういう話を聞いて参考書なりを購入して独学でプログラミング勉強しようと思っている人も少なくないでしょう。しかしプログラミングを独学で勉強し始めようと思うものの



・「分からない箇所で詰まって挫折してしまった」

・「勉強する時間が足りない」

・「ネットの記事だと情報が断片的でよくわからない」

・「コードのエラーの原因が分からない」



という壁にぶち当たって、プログラミングの勉強を止めてしまう方が少なくありません。独学でプログラミングを勉強してる時間のほとんどはつまづいている時間です。実際僕も最初のころ独学でプログラミングを勉強していた頃はエラーの原因が分からず丸1日を不意にしてしまった・・・そんな苦い経験がありました。それで僕は一度はプログラミングの学習を諦めてしまいましたが、就活で現実を知る中で



「プログラミングを勉強して、いずれフリーランスとして自由な生き方がしたい」

「エンジニアとして若いうちから高収入を得たい」



という強い気持ちから一念発起して「侍エンジニアのwebサービスコース」に申し込み、プロのエンジニアの方に対面でマンツーマンでPythonによるWebサービス作り方とWeb技術の基本を教えてもらい、ようやくプログラミングが理解でき、今ではエンジニアとしてそこそこの暮らしができるようになりました。





侍エンジニアでは、とりあえずプログラミングやインターネットの基本を知っておきたい人から、HTML・cssなどでWebサイトやWebアプリを作ってみたい人やPythonを勉強してデータサイエンティストやAIエンジニアになりたい人まで幅広いニーズに応えた様々なコースが用意されています。



IT業界と言ってもエンジニアの仕事はプログラミング言語次第でサーバーから機械学習・ディープラーニングまで多種多様ですし、侍エンジニアの無料レッスン(カウンセリング)を受けてみて、自分のやりたいITの仕事は何なのか?を見つけるのがエンジニアへの第一歩になります。ちなみに今侍エンジニアの無料レッスンを受けると1000円分のAmazonギフト券がもらえるので、試しに受けてみるだけもお得です。


自分は半端に独学やオンラインスクールで勉強して金と時間を無駄にするくらいなら、リアルのプログラミングスクールに通ってしっかりプログラミングを勉強した方がいいと思います。ちなみに今、侍エンジニアに申し込むと、25歳以下の学生の方であれば、受講料が20%OFFになるので超お得です。


そして、プログラミングは大勢で授業を受けたり漫然とオンライン学習をするよりも自分が分からない箇所をピンポイントでプロの講師に直接質問して、ちゃんと納得するというスタイルの方がお金は確かに少し掛かりますが、独学で学ぶよりも絶対にモノになります。


シェアする

  • このエントリーをはてなブックマークに追加

フォローする