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

今回は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を作成する方法を紹介しています。
フレームワークは違いますが、参考になれば幸いです。

Vue.jsでjspdfを用いて、HTMLからPDFを生成する。

クライアントサイドでPDFを生成したい人にオススメのライブラリがあります！週間ダウンロード43,191を誇るPDF生成ライブラリ、jspdfです！今回は、jspdfを用いて、自分でpdfを生成する方法を紹介します。この記事を読むことで、ボタンクリックでアプリケーションを利...

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

WINDII

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

最新記事 by WINDII (全て見る)

• Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
• IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
• IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日