如何使用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) => {
          // 创建一个链接元素
          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) => {
          // 创建一个链接元素
          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>