vue form表单生成PDF

安装依赖：
npm install --save html2canvas //将页面html转换成图片
npm install jspdf --save　 //将图片生成pdf

yarn add html2canvas

yarn add jspdf

新建一个js文件 (pdf.js)

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

export const downloadPDF = (page) => {
  html2canvas(page).then(function (canvas) {
    canvas2PDF(canvas)
  })
}

const canvas2PDF = (canvas) => {
  let contentWidth = canvas.width
  let contentHeight = canvas.height

  //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
  let imgWidth = 595.28
  let imgHeight = (592.28 / contentWidth) * contentHeight

  // 第一个参数： l：横向  p：纵向
  // 第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）
  let pdf = new jsPDF('p', 'pt')

  pdf.addImage(
    canvas.toDataURL('image/jpeg', 1.0),
    'JPEG',
    0,
    0,
    imgWidth,
    imgHeight
  )

  // pdf.save('导出.pdf')  //直接保存到本地
  const pdfBlob=pdf.output('blob')  // 用浏览器打开三步骤
  let pdfUrl = URL.createObjectURL(pdfBlob);// 用浏览器打开三步骤
  window.open(pdfUrl)// 用浏览器打开三步骤
}

 在要使用的页面引入js ，然后调用即可。

import {downloadPDF} from "@/utils/pdf.js"  //工具方法，导出操作

引了直接调用
downloadPDF(this.$refs.form)

 源码：

<template>
 <el-dialog ref="pdfREF"
      v-model="formPdfVisible"
      :close-on-click-modal="false"
      width="25%">
      <div ref="form" style="padding:5%" class="aa">
        <h1 style="text-align: center;padding-bottom: 4%;">文档借阅交接汇总表</h1>
        <el-form :model="form" label-width="auto" style="max-width: 600px" >
    <el-form-item label="交接人:">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="归还情况:">
      <el-select v-model="form.region" placeholder="请选择归还情况">
        <el-option label="未归还" value="1" />
        <el-option label="已归还" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="使用情况：">
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item>
    <el-form-item label="最终去向：">
      <el-radio-group v-model="form.resource">
        <el-radio value="1">销毁</el-radio>
        <el-radio value="2">归档</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
   <el-row :gutter="20" style="margin-top:24%">
    <el-col :span="12"><div class="grid-content ep-bg-purple">交接人签字：</div></el-col>
    <el-col :span="12"><div class="grid-content ep-bg-purple">接收人签字：</div></el-col>
  </el-row>
  </div>
   <el-button type="primary" @click="submitForm">生成PDF</el-button>
  
 </el-dialog>
</template>

<script>

import {downloadPDF} from "@/utils/pdf.js"  //工具方法，导出操作
export default {
  //组件名称
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  data () {
    return {
      formPdfVisible: false,
      applytitle: "分发",
      radio: "1",
      options: [
        {
          value: '1',
          label: "管理员",
          password: "1",
          zuzhi: "审计机构A",
          juese: "管理员"
        },
        {
          value: '2',
          label: "审计员A",
          password: "1",
          zuzhi: "审计机构B",
          juese: "审计员"
        },
        {
          value: '3',
          label: "审计员B",
          password: "1",
          zuzhi: "审计机构B",
          juese: "审计员"
        },
        {
          value: '4',
          label: "审计组组长",
          password: "1",
          zuzhi: "审计机构C",
          juese: "审计组组长"
        },
        {
          value: '5',
          label: "主审",
          password: "1",
          zuzhi: "审计机构D",
          juese: "主审"
        },
        {
          value: '6',
          label: "领导",
          password: "1",
          zuzhi: "组织SSS",
          juese: "领导"
        },

      ],
      value1: [],
      form:{
        name: '张三',
        region: '1',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '2',
        desc: '文件1正在借阅中',
      },
    }
  },
  //方法集合
  methods: {
    //同意
    submitForm () {
        downloadPDF(this.$refs.form)
    },
    //关闭模态框
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    },
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
}
</script>

<style scoped lang="scss">
:deep(.el-form-item__content){
          margin-top: 0%;
}
</style>