vue 前端下载pdf

<template>
  <div class="app-box" id="main-charts">
    <el-card class="app-container">
      <el-form ref="phoneRef" :model="user" :rules="rules" label-width="150px">
        <el-row justify="end">
          <el-col :span="12" class="but-style">
            <el-button type="primary" v-if="user.authStatus == '0' "  @click="submit(0)">暂存</el-button>
            <span type="primary" v-if="user.authStatus == '1' ">审核中</span>
            <span type="primary" v-if="user.authStatus == '2' ">认证成功</span>
            <el-button type="primary" v-if="user.authStatus == '3' || user.authStatus == '0'  "  @click="submit(1)">提交审核</el-button>
          </el-col>
        </el-row>
        <el-row justify="center">
          <el-col :span="12">
            <el-form-item label="企业LOGO" prop="companyLogoUr">
              <el-upload :disabled="user.authStatus == '2' || user.authStatus == '1' "
                  class="avatar-uploader logo-img"
                  :action=action
                  :show-file-list="false"
                  :on-success="uploadImgCompanyLogoUr"
              >
                <el-image v-if="imageUrlCompanyLogoUr" :src="imageUrlCompanyLogoUr" class="avatar logo-img"/>
                <el-icon v-else class="avatar-uploader-icon logo-img">
                  <Plus/>
                </el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="center">
          <el-col :span="12">
            <el-form-item label="企业名称" prop="companyName">
              <el-input :disabled="user.authStatus == '2' || user.authStatus == '1'" v-model="user.companyName" placeholder="请输入企业名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="center">
          <el-col :span="12">
            <!--            统一社会信用代码-->
            <el-form-item label="统一社会信用代码" prop="companyCode">
              <el-input  :disabled="user.authStatus == '2' || user.authStatus == '1'" v-model="user.companyCode"  placeholder="请输入统一社会信用代码"/>
            </el-form-item>
          </el-col>
        </el-row>

<!--        <el-row justify="center">
          <el-col :span="12">
            <el-form-item label="应用标识" prop="appFlag" required>
              <el-select style="width: 100%" v-model="user.appFlag" placeholder="请选择应用标识"  :disabled="user.authStatus == '2' || user.authStatus == '1'">
                <el-option v-for="dict in app_flag" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>-->


        <el-row justify="center">
          <el-col :span="12">
            <el-form-item label="法定代表人" prop="legalDeputy">
              <el-input  :disabled="user.authStatus == '2' || user.authStatus == '1'" v-model="user.legalDeputy" placeholder="请输入法定代表人"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row justify="center">
          <el-col :span="12">
            <el-form-item label="营业执照" prop="businessLicenseUrl">

              <el-upload  :disabled="user.authStatus == '2' || user.authStatus == '1'"
                  class="avatar-uploader"
                  :action=action
                  :show-file-list="false"
                  :on-success="uploadImg">
                <el-image v-if="imageUrl" :src="imageUrl" class="avatar business-license"/>
                <el-icon v-else class="avatar-uploader-icon business-license">
                  <Plus/>
                </el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row justify="center">
          <el-col :span="12">
            <el-form-item label="认证提示" prop="authHandleMsg">
              <el-input v-model="user.authHandleMsg" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

 
        <el-row justify="center"  v-if="user.authStatus == '2'">
          <el-col :span="12">
            <el-form-item label="认证授权函" prop="legalDeputy">
              <el-button class="info" @click="exportPDF">下载认证授权函</el-button>
            </el-form-item>
          </el-col>
        </el-row>



      </el-form>
    </el-card>
  </div>
</template>


<script lang="ts" setup name="Profile">
import {addOrEditEnterprise, getEnterpriseInfo} from "@/api/system/enterprise";
import {getToken} from "@/utils/auth";
// 限制图片大小
import {Plus} from '@element-plus/icons-vue'
import {ref} from "vue";
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

// 图片上传的地址
const action = import.meta.env.VITE_APP_BASE_API + "/business/file/upload";
const imageUrl = ref('');
const imageUrlCompanyLogoUr = ref('');
const fielId = ref('');
const {proxy} = getCurrentInstance();

const { app_flag } = proxy.useDict(
    "app_flag"
);

function exportPDF() {
  const ele: HTMLElement | null = document.getElementById('main-charts');
  html2canvas(ele as HTMLElement, {}).then((canvas) => {
    const contentWidth = canvas.width;
    const contentHeight = canvas.height;
    // 一页pdf显示html页面生成的canvas高度;
    const pageHeight = (contentWidth / 592.28) * 841.89;
    // 未生成pdf的html页面高度
    let leftHeight = contentHeight;
    // 页面偏移
    let position = 0;
    // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    const imgWidth = 595.28;
    const imgHeight = (595.28 / contentWidth) * contentHeight;
    const ctx: any = canvas.getContext('2d');
    // 添加水印
    /*ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.rotate((25 * Math.PI) / 180);
    ctx.font = '20px Microsoft Yahei';
    ctx.fillStyle = 'rgba(184, 184, 184, 0.8)';
    for (let i = contentWidth * -1; i < contentWidth; i += 240) {
      for (let j = contentHeight * -1; j < contentHeight; j += 100) {
        // 填充文字，x 间距, y 间距
        ctx.fillText('水印名', i, j);
      }
    }*/
    const pageData = canvas.toDataURL('image/jpeg', 1.0);
    const pdf = new jsPDF('', 'pt', 'a4');
    if (leftHeight < pageHeight) {
      // 在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
      pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
    } else {
      // 分页
      while (leftHeight > 0) {
        pdf.addImage(
            pageData,
            'JPEG',
            0,
            position,
            imgWidth,
            imgHeight
        );
        leftHeight -= pageHeight;
        position -= 841.89;
        // 避免添加空白页
        if (leftHeight > 0) {
          pdf.addPage();
        }
      }
    }
    // 可动态生成
    pdf.save(`认证授权函.pdf`);
  });
}




const user = reactive({
  businessLicenseUrl: undefined,
  legalDeputy: undefined,
  companyCode: undefined,
  companyName: undefined,
  companyLogoUr: undefined,
  authHandleMsg: undefined,
  authStatus: undefined,  // 认证状态
  appFlag: undefined,
});


// 获取企业信息
function getEnterprise() {
  getEnterpriseInfo().then(response => {
    user.businessLicenseUrl = response.data.businessLicenseUrl;
    user.legalDeputy = response.data.legalDeputy;
    user.authHandleMsg = response.data.authHandleMsg;
    user.companyCode = response.data.companyCode;
    user.appFlag = response.data.appFlag;
    user.companyName = response.data.companyName;
    user.companyLogoUr = response.data.companyLogoUr;
    user.authStatus = response.data.authStatus;
    imageUrl.value = downloadFile(response.data.businessLicenseUrl); // 进入页面回显 图片
    imageUrlCompanyLogoUr.value = downloadFile(response.data.companyLogoUr); // 进入页面回显 图片
  });
};

getEnterprise();

// 营业执照 上传返回id
function uploadImg(e) {
  fielId.value = e.data.id;
  user.businessLicenseUrl = e.data.id;
  imageUrl.value = downloadFile(e.data.id); // 上传后展示图片
}

// 企业 logo 上传返回id
function uploadImgCompanyLogoUr(e) {
  fielId.value = e.data.id;
  user.companyLogoUr = e.data.id;
  imageUrlCompanyLogoUr.value = downloadFile(e.data.id);  // 上传后展示图片
}


// 图片下载预览
function downloadFile(fielId = "") {
  if (fielId) {
    return import.meta.env.VITE_APP_BASE_API + "/business/file/downloadFile/" + fielId + "?firmToken=" + getToken();
  }
  return "";
}


const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {}
});


const rules = ref({
  businessLicenseUrl: [{required: true, message: "营业执照不能为空", trigger: "blur"}],
  legalDeputy: [{required: true, message: "法定代表人不能为空", trigger: "blur"}],
  companyCode: [{required: true, message: "统一社会信用代码不能为空", trigger: "blur"}],
  appFlag: [{required: true, message: "应用标识不能为空", trigger: "blur"}],
  companyName: [{required: true, message: "企业名称不能为空", trigger: "blur"}],
  companyLogoUr: [{required: true, message: "企业LOGO不能为空", trigger: "blur"}],
});


function submit(type) {
  //  若没添加就新增，已经添加就修改
  proxy.$refs.phoneRef.validate(valid => {
    if (valid) {
      let parm = {
        businessLicenseUrl: user.businessLicenseUrl,
        companyCode: user.companyCode,
        appFlag: user.appFlag,
        companyName: user.companyName,
        companyLogoUr: user.companyLogoUr,
        legalDeputy: user.legalDeputy,
        authHandleMsg: user.authHandleMsg,
        authStatus: type,
      };
      addOrEditEnterprise(parm).then(response => {
        proxy.$modal.msgSuccess("修改成功");
        getEnterprise();
      });
    }
  });
};


</script>


<style scoped>
.app-box {
  width: 100%;
  padding: 20px;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.app-container {
  width: 50%;
  height: 85vh;
}

.information-img img {
  width: 3rem;
  height: 3rem;
}

.logo-img {
  width: 170px;
  height: 170px;
  border-radius: 50%;
}

.business-license {
  width: 170px;
  height: 170px;
}

.but-style {
  text-align: right;
  margin-bottom: 30px;
}

.el-form-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-uploader-icon{
  border: 1px solid rgba(3, 3, 3, 0.07);
}
</style>