Hướng dẫn chi tiết cài đặt và sử dụng thư viện html2pdf cho nuxtjs

html2pdf chuyển đổi bất kỳ trang web hoặc thành phần nào thành PDF có thể in hoàn toàn ở phía máy khách bằng cách sử dụng html2canvas và jsPDF .

Bước 1: Tạo Dự Án Nuxt.js Mới

Nếu bạn chưa có dự án Nuxt.js, bạn có thể tạo một dự án mới :

Chú ý: Có 2 cách để tạo dự án Nuxtjs đó là:

• npm
• yarn

Đối với yarn chạy lệnh sau :

yarn create nuxt-app <project-name>

Còn đối với npm thì  tạo dự án bằng cách sử dụng npx:

npx create-nuxt-app servbay-nuxt-app

Bước 2: Cài Đặt Thư Viện html2pdf

Chuyển đến thư mục dự án của bạn và cài đặt html2pdf.js:

npm i html2pdf.js@0.9.0

Bước 3: Tạo file trong Plugins plugins/html2pdf.js

Tạo một file js mới (ví dụ: plugins/html2pdf.) trong thư mục plugins

import Vue from 'vue'
import VueHtml2pdf from 'vue-html2pdf'
Vue.use(VueHtml2pdf)

Bước 4: Sử dụng trong file nuxt.config.js

plugins: [
    { src: '@/plugins/vue-html2pdf', mode: 'client' }
],

Bước 5: Tạo Component Xuất PDF

Tạo một component mới (ví dụ: PdfExport.vue) trong thư mục components:

<template>
   <div>
     <vue-html2pdf
        :show-layout="false"
        :float-layout="true"
        :enable-download="true"
        :preview-modal="true"
        :paginate-elements-by-height="1400"
        filename="hee hee"
        :pdf-quality="2"
        :manual-pagination="false"
        pdf-format="a4"
        pdf-orientation="landscape"
        pdf-content-width="800px"
 
        @progress="onProgress($event)"
        @hasStartedGeneration="hasStartedGeneration()"
        @hasGenerated="hasGenerated($event)"
        ref="html2Pdf"
    >
        <section slot="pdf-content">
            <!-- PDF Content Here -->
        </section>
    </vue-html2pdf>
   </div>
</template>

Bước 6: Sử Dụng Component Trong Trang

Mở tệp pages/index.vue và thêm component PdfExport mà bạn vừa tạo:

<template>
  <div>
    <h1>Chào mừng đến với Nuxt.js</h1>
    <PdfExport />
  </div>
</template>

<script>
import PdfExport from '~/components/PdfExport.vue';

export default {
  components: {
    PdfExport
  }
}
</script>

Bước 7: Chạy Dự Án

Bây giờ, bạn có thể chạy dự án của mình để xem chức năng xuất PDF:

Nếu bạn dùng npm thì chạy lệnh: 

npm run dev

Còn nếu bạn dùng Yarn thì chạy lệnh:

Yarn dev

Mở trình duyệt và truy cập http://localhost:3000. Nội dung trong phần pdf-content sẽ được xuất thành file PDF.

Lưu Ý

• Đảm bảo rằng các yếu tố mà bạn muốn xuất thành PDF đã được định dạng đúng để chúng có thể hiển thị tốt trong file PDF.
• Bạn có thể tùy chỉnh các tùy chọn trong đối tượng options để thay đổi cách xuất PDF (kích thước trang, định dạng, v.v.).

Hy vọng hướng dẫn này hữu ích cho bạn! Good luck <3