Vueで作成した画面をPuppeteerでPDFダウンロードしてみた

参考：How to Generate a PDF with JavaScript | PDFTron

この投稿は、↑のReactのサンプルをvueでやってみたという投稿になります。

間違いなどありましたら、教えていただけるとありがちあです。

---

@vue/cliを使って簡単にvueのアプリを立ち上げます。

npx -p @vue/cli vue create sample # 途中のプリセットの選択はそのままEnter
cd sample
yarn serve

PDFの範囲にスタイリングします

src/App.vue

<template>
  <div class='pdf'>
    
  </div>
</template>

<script>
</script>

<style>
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #d1d1d1
}

.pdf {
  width: 612px;
  height: 792px;
  background-color: white;
  margin: 0 auto;
}
</style>

---

画面に文字を表示します。

src/App.vue

<template>
  <div class='pdf'>
    <user v-for="({ lastName, firstName }, i) in users" :key="i">
      {{ lastName }} {{ firstName }}
    </user>
  </div>
</template>

<script>
import User from "./components/User"

export default {
  name: 'app',
  components: {
        User
  },
  data: () => ({
    users: [
      { lastName: "カクタ", firstName: "ヒロキ" },
      { lastName: "イナガキ", firstName: "ヤスヒコ" },
      { lastName: "オオツキ", firstName: "イワミ" },
      { lastName: "カタオカ", firstName: "イチオ" },
      { lastName: "ダイサキ", firstName: "サトル" },
    ],
  }),
}
</script>

<style>
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #d1d1d1
}

.pdf {
  width: 612px;
  height: 792px;
  background-color: white;
  margin: 0 auto;
}
</style>

src/components/User.vue

<template>
    <div><p><slot /></p></div>
</template>

<style scoped>
div {
    display: flex;
    justify-content: center;
}
</style>

---

vueで画面ができたので、puppeteerでPDFとしてダウンロードしてみます。

scripts/generate-pdf.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:8080/');
  await page.emulateMedia('screen');
  await page.pdf({
    path: './vue.pdf', // path (relative to CWD) to save the PDF to.
    printBackground: true,// print background colors
    width: '612px', // match the css width and height we set for our PDF
    height: '792px',
  });
  await browser.close();
})()

yarn add -D puppeteer
node scripts/generate-pdf.js 
# ※ ↑ yarn serve でアプリが立ち上がっている状態で、 generate-pdf.js を実行

PDFのダウンロードができました。

見ていただいてありがとうございました。m(_ _)m