技術記事やフリーランス記事をメインに情報公開をしています。是非見ていってください。

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

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

クライアントサイドで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.

ぞえ

1994年生まれ、1年のアルバイト経験を経てフリーランスエンジニアに。週3で常駐しながら、ブログ事業、受託事業、新規開発を行っています。 フリーランスになるまで Twitterぞえ 雑記はぞえの雑記記事

フロントエンドの最近記事

  1. プログラミング学習環境を整える

  2. HTMLとは?使い方と主要要素を紹介#1【初心者向け】

  3. 【初心者向け】自力ホームページ制作でHTML/CSS/JavaScriptを学ぶ#2

  4. 【初心者向け】自力ホームページ制作でHTML/CSS/JavaScriptを学ぶ#1

  5. Angular7 + Firebaseでパズルゲームをデプロイ

関連記事

コメント

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

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