プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. フロントエンド

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>

関連記事

コメント

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

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

オススメ記事

  1. 転職・就職サポート付きプログラミングスクール【現役フリーランス3選】
  2. 高収入フリーランスエンジニアになるためのエージェントの選び方
PAGE TOP