プログラム 技術

JavaScriptでPDFファイル出力をする<Angular ver.>

前回はReact上でPDFファイルを出力する方法を紹介しましたが、今回はAngularというフレームワークを使用している場合での出力になります。また、Angularプロジェクトの作成方法は今回は省略しています
Angularの場合は専用のモジュールがあるわけではないようで、今回も以前紹介した『jspdf』というモジュールを使用しています

NonFrameworkの記事
JavaScriptでPDFファイル出力をする<NonFramework ver.> - ナストンのまとめ
JavaScriptでPDFファイル出力をする<NonFramework ver.> - ナストンのまとめ

今回はjavascript上でフレームワークに縛られない場合のPDFファイルを出力する方法を紹介しますnodejs上での ...

対象の記事へ
Reactの記事
JavaScriptでPDFファイル出力をする<React ver.> - ナストンのまとめ
JavaScriptでPDFファイル出力をする<React ver.> - ナストンのまとめ

前回はフレームワークに縛られない方法でPDFファイルを出力する方法を紹介しましたが、今回はReactというフレームワーク ...

対象の記事へ
名称バージョン
NodeJS2.5.1
Angular18.2.14
jspdf3.0.0

PDFを出力するボタンを配置する

まずは、PDFファイルを出力するボタンを『app.component.html』に配置します
230行目付近に以下の要素を追加しました

<button (click)="generatePDF()">Generate PDF</button>  <!--追加-->

PDF出力機能を実装する

次に『app.component.ts』に対して先ほど追加した『jspdf』モジュールの要素を追加します

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { jsPDF } from 'jspdf';  // 追加

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'pdfoutput_angular';
  
  // 追加
  generatePDF() {
    const doc = new jsPDF();

    doc.text("Hello world!", 10, 10);
    doc.save("example.pdf");
  }
}

実装後、実行すると画像のようにボタンが追加されてPDFファイルがダウンロードされます

最後に

これでAngularでもPDFファイルが出力できるようになりました。Reactと違いこちらは専用モジュールがないことに少し驚きました

会社紹介

私が所属しているアドバンスド・ソリューション株式会社(以下、ADS)は一緒に働く仲間を募集しています

会社概要
「技術」×「知恵」＝顧客課題の解決・新しい価値の創造

この方程式の実現はADSが大切にしている考えで、技術を磨き続けるgeekさと、顧客を思うloveがあってこそ実現できる世界観だと思っています
この『love & geek』の精神さえあれば、得意不得意はno problem！
技術はピカイチだけど顧客折衝はちょっと苦手。OKです。技術はまだ未熟だけど顧客と知恵を出し合って要件定義するのは大好き。OKです
凸凹な社員の集まり、色んなカラーや柄の個性が集まっているからこそ、常に新しいソリューションが生まれています

ミッション
私たちは、テクノロジーを活用し、業務や事業の生産性向上と企業進化を支援します

ホームページ
アドバンスド・ソリューション株式会社｜ADS Co., Ltd.
アドバンスド・ソリューション株式会社｜ADS Co., Ltd.

Microsoft 365／SharePoint／Power Platform／Azure による DX コンサル・シス ...

サイトへ移動

PR

-プログラム, 技術
-, , ,