前端将table表格转化为PDF文件并且导出

pdf.js

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
export const downloadPDF = (page) => {
  html2canvas(page).then(function (canvas) {
    canvas2PDF(canvas, { scale: 2, dpi:300 })
  })
}
 
const canvas2PDF = (canvas) => {
  let contentWidth = canvas.width;
  let contentHeight = canvas.height;
// 一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
// 未生成pdf的html页面高度
var leftHeight = contentHeight;
// 页面偏移
var position = 0;
//   //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"）
    const pdf = new jsPDF('p', 'pt', 'a4');
    const margin = 20;
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = pdf.internal.pageSize.getHeight();
    const imgWidth = pdfWidth - 2 * margin;
    const imgHeight = (imgWidth / contentWidth) * contentHeight;
    const xPos = margin;
    const yPos = margin;
    if (leftHeight < pageHeight) {
        pdf.addImage(canvas.toDataURL('image/jpeg', 1.0), 'JPEG', 20, 20, imgWidth, imgHeight);
      } else {
        if (leftHeight > pageHeight) {
          let position = 28; // 调整初始位置来提供上边距
          while (leftHeight > 0) {
            pdf.addImage(canvas.toDataURL('image/jpeg', 1.0), 'JPEG', 20, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            // 避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage();
            }
          }
        }
      }
  pdf.save('外包需求申请单.pdf')
}

界面使用方法：

<template>
  <div>
    <el-dialog title="详细信息"  width="60%" :visible.sync="isShow" :destroy-on-close="false" :close-on-click-modal="false" :close-on-press-escape="false"  @close="cancelDialog">
      <div ref="targetElement" class="dailogConent">
        <div class="chidrenContent">
          <div class="container" style="padding: 16px 16px;background-color:#fff;">
            <table ref="table" style="font-family:'宋体';color:#000;width:100%;border-collapse: collapse;word-break: break-all;word-wrap: break-word;backgroundColor:#fff;">
              <thead> 
                <tr><td colspan="24" align="center" style="font-size: 28px;font-weight: 100;">外包需求申请单</td></tr>
                <tr colspan="24" style="height:30px"></tr>
              </thead>
              <tbody id="tbody">
                  <tr style="line-height: 36px;">
                      <td colspan="3" align="center" style="width:13%;" class="delete_br">需求编号</td>
                      <td colspan="5" align="center" style="width:17%;" class="delete_br">{{formData.demandCode}}</td>
                      <td colspan="3" align="center" style="width:13%;" class="delete_br">申请人</td>
                      <td colspan="5" align="center" style="width:17%;" class="delete_br">{{formData.creator}}</td>
                      <td colspan="3" align="center" style="width:13%;" class="delete_br">申请日期</td>
                      <td colspan="5" align="center" style="width:17%;" class="delete_bottom">{{formData.startTime}}</td>
                  </tr>
              </tbody> 
            </table>
        </div>  
        </div>
     </div> 
      <span slot="footer" class="footer-btn">
          <el-button size="small" icon="el-icon-close" @click="cancelDialog">取 消</el-button>
          <el-button size="small" icon="el-icon-download" type="primary" :loading="loading" @click="saveBtn">导 出</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import httpClient from '@/utils/httpClient'  
const request = httpClient.instance.request
import { downloadPDF } from '@workspace/utils/pdf.js'
import { Loading } from 'element-ui';
import {
  getApproveInfo
} from "../api/api"
export default {
  name: "demandApplyOrder",
  components: {},
  props: {
    dialogShow: {
      type:Boolean,
      default: false,
    },
    wiid: {
      type: String,
      default:''
    },
    orderData: {
      type:Object,
      default:function(){
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      isShow: false,
      aproveList:[],//审批信息
      formData:{}
    }; 
  },
  watch: {
    dialogShow: {
      handler(val) {
        this.isShow = val; 
      },
      immediate: true,
      deep: true,
    },
    orderData: {
      handler(val) {
        this.formData = val; 
      },
      immediate: true,
      deep: true,
    },
    wiid: {
      handler(val) {
        if(val != '' && val != null) {
          this.getApproveInfo(val)
        }
      },
      immediate: true,
      deep: true,
    }
  },
  created() {
  },
  methods: { 
    //导出
    saveBtn() {
      this.loading = true;
      const loading = Loading.service({
        lock: true,
        text: '正在导出......',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      setTimeout(() => {
        downloadPDF(this.$refs.table);//导出PDF
        loading.close();
        this.loading = false;
      }, 300);
    },
  }
};
</script>
<style lang="scss" scoped>
</style>