プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア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>
The following two tabs change content below.

ぞえ

実務未経験から1年でフリーランスエンジニアになって給料が6倍になった男/アル中の記憶ない系/しかも190cmの巨人。今は週3勤務しながら@ryudoi1と当メディア運営中 詳細なプロフ ぞえのプロフィール!! Twitterアカウント Twitter 技術系の雑談や、質問の行える無料サロンもやっています。 windii social

関連記事

コメント

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

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

PAGE TOP