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

フロントエンド
8277 view

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

最終更新日:2018/11/29

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

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

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

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

作業！アプリケーションの構築
- jspdfの追加
  - WINDII
  - 最新記事 by WINDII (全て見る)

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

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>

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

WINDII

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

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

WINDIIテック