nuxt2 에서 pdf 생성 후 다운로드 하는 방법

nuxt2 에서 pdf 생성 후 다운로드 하는 방법이 필요해서 찾아 보았다.

vue-html2pdf 를 사용하면 된다.

 

nuxt 플러그인 설정법

https://github.com/kempsteven/vue-html2pdf#using-in-nuxtjs

GitHub - kempsteven/vue-html2pdf: vue-html2pdf converts any vue component or element into PDF, vue-html2pdf is basically a vue w

 

사용법

https://medium.com/@toakshay.official/vue-js-generate-pdf-from-html-f095cf72bff4

Vue JS | Generate PDF from HTML

 

 

 

<template>
   <div>
     <VueHtml2pdf
        :show-layout="false"
        :float-layout="true"
        :enable-download="true"
        :preview-modal="true"
        :paginate-elements-by-height="1400"
        filename="myPDF"
        :pdf-quality="2"
        :manual-pagination="false"
        pdf-format="a4"
        pdf-orientation="landscape"
        pdf-content-width="800px"
        ref="html2Pdf"
    >
        <section slot="pdf-content">
            <!-- PDF Content Here -->
        </section>
    </VueHtml2pdf>
   </div>
</template>

<script>
import VueHtml2pdf from 'vue-html2pdf'
 
export default { 
    components: {
        VueHtml2pdf
    },
    methods: { 
        generateReport () {
            this.$refs.html2Pdf.generatePdf()
        }
    },
}
</script>