快捷導(dǎo)航

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

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

html2pdf.js是基于html2canvas和jsPDF的輕量級(jí)庫(kù),可以在客戶端實(shí)現(xiàn)網(wǎng)頁(yè)到PDF的轉(zhuǎn)換,這篇文章主要介紹了如何使用html2pdf.js生成pdf文件的相關(guān)資料,需要的朋友可以參考下

需求場(chǎng)景

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

需求實(shí)現(xiàn)

1. 技術(shù)棧：通過(guò)html2pdf.js直接轉(zhuǎn)pdf，不需要通過(guò)html2canvas和pdf.js進(jìn)行二次操作
2. mounted里面再進(jìn)行定時(shí)器調(diào)用生成 pdf 方法做到隱式生成

html2pdf.js

html2pdf就是html2canvas和pdf的集成，具體配置項(xiàng)可以看這個(gè)配置項(xiàng)文檔，看不懂英文可以點(diǎn)擊瀏覽器自帶翻譯成中文。

html2pdf.js使用

第一步：下載html2pdf.js

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

第二步：引入項(xiàng)目

import html2pdf from 'html2pdf.js'

部分方法解釋，具體配置項(xiàng)可查看配置項(xiàng)文檔

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

      // 生成PDF
      html2pdf()
        .from(element)
        .set(options)
        .output('blob') // 將輸出設(shè)置為Blob
        .then((blob) => {
          // 創(chuàng)建一個(gè)鏈接元素
          console.log('blob :>> ', blob)
          const url = URL.createObjectURL(blob)
          try {
            let file = this.transBlobFilrToFile(blob)
            console.log('file :>> ', file)
            // 這里可以將文件進(jìn)行處理，上傳pdf到服務(wù)器
          } 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íng)估報(bào)告
      </p>
    <el-divider></el-divider>
  </div>
  <!--都是一些圖表和echarts組件 通過(guò)綁定的 Data 進(jìn)行傳值-->
  <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">頁(yè)腳---------------------</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') // 獲取報(bào)告的DOM元素
      // 設(shè)置打印選項(xiàng)
      const options = {
        margin: 1, // 內(nèi)邊距
        filename: '評(píng)估報(bào)告.pdf', // pdf文件名字
        image: { type: 'jpeg', quality: 0.98 }, // 生成圖片的類型以及清晰度
        pagebreak: { mode: 'avoid-all', before: '#page2el' }, // 處理是否元素分割
       //元素分割：就是分頁(yè)的時(shí)候，會(huì)將圖表、文字等元素分割成倆塊，這里avoid-all是所有元素都不被分割
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'cm', format: 'a4', orientation: 'portrait' }
      }

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

}
</script>