Vueで作成した画面をPuppeteerでPDFダウンロードしてみた
12659 ワード
参考: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
Author And Source
この問題について(Vueで作成した画面をPuppeteerでPDFダウンロードしてみた), 我々は、より多くの情報をここで見つけました https://qiita.com/okumurakengo/items/bb51b7333c30e1b6e525著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .