修改

zhouwx

9 天以前 7aa71a93fd5d97506077ea0f894d98a777ccd7aa

修改

 package.json

@@ -35,6 +35,7 @@
    "js-base64": "^3.7.5",
    "js-cookie": "3.0.1",
    "jsencrypt": "3.3.1",
    "jspdf": "^3.0.1",
    "jszip-utils": "^0.1.0",
    "moment": "^2.30.1",
    "nprogress": "0.2.0",

 src/assets/images/certBg.jpg

 src/components/Tinymce/Tinymce.vue

@@ -12,7 +12,7 @@
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import { upload } from "@/api/backManage/notice";
// import 'tinymce-paragraphspacing'
import 'tinymce-paragraphspacing'
import "tinymce/themes/silver";
import "tinymce/themes/silver/theme";
import "tinymce/icons/default/icons";
@@ -51,7 +51,7 @@
        },
        toolbar: {
            type: [String, Array],
            default: " fontsizeselect | undo redo "
            default: " styleselect fontsizeselect paragraphspacing | upfile image bold italic | fontselect |alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | undo redo | lists insertfile table | removeformat fullscreen  "
        }
    },
    data() {

 src/router/index.js

@@ -53,6 +53,11 @@
    hidden: true
  },
  {
    path: '/certPdf',
    component: () => import('@/views/certificatePdf'),
    hidden: true
  },
  {
    path: '/courseManage',
    component: Layout,
    redirect: '/onlineEducation/courseManage',

 src/utils/htmlToPdf.js

对比新文件
@@ -0,0 +1,50 @@
// 导出页面为PDF格式
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';

export default function htmlToPdf(title=new Date().getTime()) {
    return html2Canvas(document.body, {
        // useCORS:true, //保证跨域图片的显示
        // width:window.screen.availWidth, //显示canvas窗口的宽度
        // height:window.screen.availHeight, //显示canvas窗口的高度
        // windowHeight: document.body.scrollHeight, //获取y方向滚动条中的内容
        // windowWidth: document.body.scrollWidth,//获取x方向滚动条中的内容
        // x:0, //页面在水平方向上没有滚动，故设置为0
        // y: window.pageXOffset  //页面在垂直方向的滚动距离
    }).then(function (canvas) {
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
        let pageHeight = contentWidth / 592.28 * 841.89;
        let leftHeight = contentHeight;
        let position = 0;
        // let imgWidth = 595.28;
        // let imgHeight = 592.28 / contentWidth * contentHeight;
        let imgWidth = 838.89;
        let imgHeight = 835.89 / contentWidth * contentHeight;

        // 将图片转化为dataUrl
        let pageData = canvas.toDataURL('image/jpeg', 1.0);

        // 三个参数，第一个方向（landscape横向？），第二个尺寸，第三个尺寸格式
        let PDF = new JsPDF('landscape', 'pt', 'a4');

        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度      (841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
            // 0, 0, 控制文字距离左边，与上边的距离，后两个参数控制添加图片的尺寸，此处将页面高度按照     a4纸宽高比列进行压缩
            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(title + '.pdf');
    });

}

 src/views/build/conpanyFunctionConsult/companyInfo/overview/components/overviewDialog.vue

@@ -19,7 +19,7 @@
                </el-select>
              </el-form-item>
                <el-form-item label="企业概括:" v-if="showEditor"  required>
                    <t-editor style="width: 800px" ref="myEditor" :value="state.noticeForm.companySummary" ></t-editor>
                    <t-editor style="width: 800px" ref="myEditor" :toolbar="toolbar" :value="state.noticeForm.companySummary" ></t-editor>
                </el-form-item>
                <el-form-item label="企业概括:" v-else>
                    <div class="ql-container ql-snow" style="height: 500px;width: 100%;margin-top: 10px;" >
@@ -57,6 +57,7 @@

const dialogVisible = ref(false);
const title = ref("");
const toolbar = ref('fontsizeselect | undo redo')
const noticeRef = ref();
const fileList = ref([]);
const myEditor = ref();

 src/views/build/conpanyFunctionConsult/companyInfo/policy/components/policyDialog.vue

@@ -18,7 +18,7 @@
          </el-select>
        </el-form-item>
        <el-form-item label="质量方针:" v-if="showEditor"  required>
          <t-editor style="width: 800px" ref="myEditor" :value="state.noticeForm.policy" ></t-editor>
          <t-editor style="width: 800px" ref="myEditor" :toolbar="toolbar" :value="state.noticeForm.policy" ></t-editor>
        </el-form-item>
        <el-form-item label="质量方针:" v-else>
          <div class="ql-container ql-snow" style="height: 500px;width: 100%;margin-top: 10px;" >
@@ -56,6 +56,7 @@
const emit = defineEmits(["getList"]);

const dialogVisible = ref(false);
const toolbar = ref('fontsizeselect | undo redo')
const title = ref("");
const noticeRef = ref();
const fileList = ref([]);

 src/views/build/conpanyFunctionConsult/digitalFileDep/manageType/qualityManual/components/exportDoc.js

@@ -369,4 +369,4 @@
            throw error;
        }
    });
}
}

 src/views/certificatePdf.vue

对比新文件
@@ -0,0 +1,119 @@
<template>
  <div class="form-container">
      <div class="certContent" @click="getPdf()">
        <div class="certNo">{{info.companyName}}</div>
        <div class="main-content">
          {{info.name}}
        </div>
        <div class="name-content">
          {{info.stuName}}
        </div>
        <div class="num-content">
          {{info.number}}
        </div>
        <div class="dep-content">
          {{info.companyName}}
        </div>
      </div>
  </div>
</template>
<script setup>
import {reactive, ref, toRefs, onMounted, nextTick} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus"
import htmlToPdf from '@/utils/htmlToPdf';
import { useRoute } from 'vue-router'
const { proxy } = getCurrentInstance();
const route = useRoute();
const data = reactive({
  info: {}
})
const {info} = toRefs(data)
onMounted(()=>{
  data.info = route.query
  console.log(' data.info', data.info)
  nextTick(()=>{
    getPdf()
  })
})

function getPdf() {
  let title = data.info.name + '证书'
  htmlToPdf(title);
}

onMounted(()=>{

})
</script>

<style scoped lang="scss">
@font-face {
  font-family: "fangzhengKT";
  src: url("@/assets/styles/font/fangzhengKT.ttf");
  font-style: normal;
  font-weight: normal;
}
.form-container{
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .certContent{
    width: calc(1920px * 0.8);
    height: calc(1280px * 0.8);
    background: url("@/assets/images/certBg.jpg") no-repeat center;
    background-size: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 420px 300px 120px;
    color: #333;
    position: relative;

    .certNo{
      position: absolute;
      top: 230px;
      font-size: 1.3rem;
      font-weight: 600;
      color: rgb(10,38,140);
      font-family: 'fangzhengKT';
    }

    .main-content{
      position: absolute;
      top: 365px;
      font-size: 1.3rem;
      font-weight: 600;
      color: rgb(10,38,140);
      font-family: 'fangzhengKT';
    }
    .name-content{
      position: absolute;
      top: 566px;
      font-size: 1.0rem;
      font-weight: 600;
      font-family: 'fangzhengKT';
      left: 715px;
    }
    .num-content{
      position: absolute;
      top: 628px;
      font-size: 1.0rem;
      font-weight: 600;
      font-family: 'fangzhengKT';
      left: 715px;
    }
    .dep-content{
      position: absolute;
      top: 688px;
      font-size: 1.0rem;
      font-weight: 600;
      font-family: 'fangzhengKT';
      left: 715px;
    }

  }
}
</style>

 src/views/work/onlineEducation/people/components/trainRecord.vue

@@ -22,6 +22,11 @@
          </template>
        </el-table-column>
        <el-table-column label="所在公司" prop="companyName" align="center"/>
        <el-table-column label="证书"  align="center" >
          <template #default="scope">
            <el-button v-if="scope.row.passed == 1" type="primary" @click="downloadCert(scope.row)" link>下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
@@ -39,7 +44,8 @@
import Cookies from "js-cookie";
import {addQuestionBank, checkQuestionBankName, editQuestionBank} from "@/api/onlineEducation/questionBank";
import {getStudent, getStuTrainRecord} from "@/api/onlineEducation/student";

import {useRouter} from "vue-router";
const router = useRouter();
const dialogVisible = ref(false);
const title = ref("");
const busRef = ref();
@@ -77,6 +83,14 @@
  emit("getList")

}
const downloadCert = (info) => {
  const routePath = '/certPdf'
  const resolvedRoute = router.resolve(routePath)
  const queryString = new URLSearchParams(info).toString()
  const fullPath = `${resolvedRoute.href}?${queryString}`
  window.open(fullPath, '_blank')

}

defineExpose({
  openDialog