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

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

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

最終更新日:2018/11/29

クライアントサイドでPDFを生成したい人にオススメのライブラリがあります!

週間ダウンロード43,191を誇るPDF生成ライブラリ、jspdfです!

今回は、jspdfを用いて、自分でpdfを生成する方法を紹介します。

この記事を読むことで、ボタンクリックでアプリケーションを利用している人にpdfをダウンロードして貰うことが可能になります。

作業!アプリケーションの構築

vueCLIのインストール

npm install @vue/cli -g

アプリケーションの作成、移動、起動

vue create pdf-app
cd pdf-app
npm run serve

jspdfの追加

npm install jspdf --save

## PDFを生成する。

src/App.vueにてjspdfをインポートしてください。

import * as jsPDF from 'jspdf'

次に、テンプレートを削除して、差し替えます。
@click=”createPDF”で、メソッドを呼び出します。

<template>
      <button class="btn btn-primary pl-5 pr-5" @click="createPDF">Download PDF</button>
</template>

メソッドを用意する

export default {
  methods: {
  createPDF () {
    let pdfName = 'test'; 
    var doc = new jsPDF();
    doc.text("Hello World", 10, 10);
    doc.save('sample' + '.pdf');
  }
}

doc.text(“Hello World”, 10, 10);
でpdfとして出力するコンテンツを挿入しています。

10,10はx、y軸からのptだそうです!
このような物を追加していく事でpdfを用意します。

jspdfではこれ以外にも、基本図形や、画像も追加にも対応しています。

doc.saveでボタンがクリックされた時にpdfが保存できるようになります。

現在のApp.vue

<template>
      <button class="btn btn-primary pl-5 pr-5" @click="createPDF">Download PDF</button>
</template>

<script>
import * as jsPDF from 'jspdf'

export default {
  methods: {
  createPDF () {
    let pdfName = 'test'; 
    var doc = new jsPDF();
    doc.text("Hello World", 10, 10);
    doc.save('sample' + '.pdf');
  }
}

}
</script>
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