如何使用html2pdf.js生成pdf文件詳解

更新時間：2025年04月02日 11:27:09 作者：xiaoliyo_

html2pdf.js是基于html2canvas和jsPDF的輕量級庫,可以在客戶端實現網頁到PDF的轉換,這篇文章主要介紹了如何使用html2pdf.js生成pdf文件的相關資料,需要的朋友可以參考下

需求場景

1. vue2 + elment ui + echarts
2. 生成pdf需要隱式處理（不需要用戶操作）
3. pdf數據量過多需要分頁，處理頁眉頁腳
4. 頁面由多個組件組成，數據量過大需要全部渲染完再進行pdf生成

需求實現

1. 技術棧：通過html2pdf.js直接轉pdf，不需要通過html2canvas和pdf.js進行二次操作
2. mounted里面再進行定時器調用生成 pdf 方法做到隱式生成

html2pdf.js

html2pdf就是html2canvas和pdf的集成，具體配置項可以看這個配置項文檔，看不懂英文可以點擊瀏覽器自帶翻譯成中文。

html2pdf.js使用

第一步：下載html2pdf.js

npm install --save html2pdf.js 或者 yarn add html2pdf.js

第二步：引入項目

import html2pdf from 'html2pdf.js'

部分方法解釋，具體配置項可查看配置項文檔

 downloadPDF() {
      console.log('生成pdf')
      const element = document.getElementById('report') // 獲取報告的DOM元素
      // 設置打印選項
      const options = {
        margin: 1, // 內邊距
        filename: '評估報告.pdf', // pdf文件名字
        image: { type: 'jpeg', quality: 0.98 }, // 生成圖片的類型以及清晰度
        pagebreak: { mode: 'avoid-all', before: '#page2el' }, // 處理是否元素分割
       //元素分割：就是分頁的時候，會將圖表、文字等元素分割成倆塊，這里avoid-all是所有元素都不被分割
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'cm', format: 'a4', orientation: 'portrait' }
      }

      // 生成PDF
      html2pdf()
        .from(element)
        .set(options)
        .output('blob') // 將輸出設置為Blob
        .then((blob) => {
          // 創(chuàng)建一個鏈接元素
          console.log('blob :>> ', blob)
          const url = URL.createObjectURL(blob)
          try {
            let file = this.transBlobFilrToFile(blob)
            console.log('file :>> ', file)
            // 這里可以將文件進行處理，上傳pdf到服務器
          } catch (e) {
            console.log(e)
          }
        })
    },

全部代碼

<div class="afour" id="report" @load="downloadPDF">
  <div class="afour_header" style="width: 100%;display: flex;flex-direction: column;">
   <div class="afour_header_span" style="display: flex;justify-content: space-between;">
     <p class="afour_header_p" style=" 
     	margin: 5px;
   		display: flex;
   		justify-content: center;
  		text-align: center;
   		font-size: 24px;
   		box-sizing: border-box;
   		flex: 1;">
        評估報告
      </p>
    <el-divider></el-divider>
  </div>
  <!--都是一些圖表和echarts組件 通過綁定的 Data 進行傳值-->
  <basic-vue :basicData='basicData' class="no-break"></basic-vue>
  <now-assessment-vue :nowData='nowData' class="no-break"></now-assessment-vue>
  <health-item-vue :healthData='healthData' class="no-break"></health-item-vue>
  <table-com-vue :tableData="waijianTableData" class="no-break"></table-com-vue>
  <table-com-vue :tableData="yiconxingTableData" class="no-break"></table-com-vue>
  <notice-text-vue :textData='textData' class="no-break"></notice-text-vue>
  <notice-text-vue :textData='noticeTextData' class="no-break"></notice-text-vue>
  <div class="footer">頁腳---------------------</div>
</div>

<script>
import html2pdf from 'html2pdf.js'
import basicVue from './reportCom/basic.vue'
import healthItemVue from './reportCom/health-item.vue'
import nowAssessmentVue from './reportCom/now-assessment.vue'
import tableComVue from './reportCom/table-com.vue'
import noticeTextVue from './reportCom/notice-text.vue'

export default {
	name:"",
	components: { basicVue, nowAssessmentVue, healthItemVue, tableComVue, noticeTextVue },
	data() {
    return {
      basicData: {},
      nowData: {},
      healthData: [],
      waijianTableData: {},
      yiconxingTableData: {},
      textData: {},
      noticeTextData: {},
    },
    methods:{
    -------
    //其他方法
    -------
    downloadPDF() {
      console.log('生成pdf')
      const element = document.getElementById('report') // 獲取報告的DOM元素
      // 設置打印選項
      const options = {
        margin: 1, // 內邊距
        filename: '評估報告.pdf', // pdf文件名字
        image: { type: 'jpeg', quality: 0.98 }, // 生成圖片的類型以及清晰度
        pagebreak: { mode: 'avoid-all', before: '#page2el' }, // 處理是否元素分割
       //元素分割：就是分頁的時候，會將圖表、文字等元素分割成倆塊，這里avoid-all是所有元素都不被分割
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'cm', format: 'a4', orientation: 'portrait' }
      }

      // 生成PDF
      html2pdf()
        .from(element)
        .set(options)
        .output('blob') // 將輸出設置為Blob
        .then((blob) => {
          // 創(chuàng)建一個鏈接元素
          console.log('blob :>> ', blob)
          const url = URL.createObjectURL(blob)
          try {
            let file = this.transBlobFilrToFile(blob)
            console.log('file :>> ', file)
            // 這里可以將文件進行處理，上傳pdf到服務器
          } catch (e) {
            console.log(e)
          }
        })
    },
    }
    mounted() { 
		setTimeout(()=>{
			this.downloadPDF()
		}.500)
	},
  },

}
</script>