現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます!

  1. フロントエンド
  2. 1864 view

HTMLをPDFに変換する 【Angularでjspdfを使用】

最終更新日:2019/03/07

今回はAngular7でhtmlをpdfに変換して、ダウンロードします。

使用するライブラリ
jdpdf
html2canvas

できるようになること

綺麗なHTMLを用意したらそれをpdfにして、ダウンロードできるようになる

作業内容

アプリケーションの構築・移動

ng new pdf-example
cd pdf-example
ng serve -o

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

 npm install jspdf --save
 npm install html2canvas --save
 npm install @types/jspdf --save
 npm install @types/html2canvas --save

npmでTypeScriptの型定義を管理できるtypesパッケージについて

app.component.tsでjspdfとhtml2canvasをインポート

import * as jspdf from 'jspdf';
import * as html2canvas from 'html2canvas';

htmlを書く/app.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〜2018</p>
  <p>○○○○○○○○○○○○○○○○○○○○○○</p>
  <h3>【自己アピール】</h3>
  <p>○○○○○○○○○○○○○○○○○○○○○○</p>
</div>
<button (click)="captureScreen()">PDFをダウンロード</button>

id=”contentToConvert”に内包される場所のスクリーンショットをbuttonのクリックでとります。

cssを書く/app.component.scss

button{
  position: absolute!important;
  bottom: 30px;
  right: 30px;
  border-radius:3px;
  background-color:blue;
  color:#fff;
  height:36px;
  padding:0 16px;
}
#contentToConvert{
  padding: 24px;
  width: 794px;
  height: 1123px;
}

a4サイズにしているのと、ボタンを下部に固定しています。

クリック時の処理を書く/app.component.ts

public captureScreen()
  {
    const data = document.getElementById('contentToConvert');
    html2canvas(data).then(canvas => {
      // Few necessary setting options
      const imgWidth = 208;
      const pageHeight = 295;
      const imgHeight = canvas.height * imgWidth / canvas.width;
      const heightLeft = imgHeight;

      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
    });
  }

contentToConvert内のコンテンツを画像化して、jspdfでそのデータをPDF化しています。

code引用
Convert HTML To PDF Using Angular 6

以下の記事ではvueで自分でpdfを作成する方法を紹介しています。
フレームワークは違いますが、参考になれば幸いです。

The following two tabs change content below.
WINDII

WINDII

WINDII(ウィンディ)は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします! また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

フロントエンドの最近記事

  1. IOSアプリをAppStoreに公開する手順書(Ionic)

  2. IonicAcademyでIonic&Angularでのアプリ開発を学ぶ

  3. Ionic4+firebaseで認証をする方法【ログイン、ログアウト機能の実装】

  4. ハイブリッドアプリ開発チュートリアル【Ionic4+OnsenUI】

  5. Ionic4+Angular Materialの始め方【Ionic事前調査兵団】

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP