<template>
<div class="app-container">
<!-- 查询和其他操作 -->
<div class="filter-container">
<el-select
v-model="listQuery.topic"
clearable
size="mini"
class="filter-item"
style="width: 200px"
placeholder="请选择知识点"
>
<el-option
v-for="item in categoryOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select
v-model="listQuery.itemType"
clearable
size="mini"
class="filter-item"
style="width: 200px"
placeholder="请选择题型"
>
<el-option
v-for="(item, index) in typeDic"
:key="index"
:label="item"
:value="item"
/>
</el-select>
<el-button
size="mini"
class="filter-item"
type="primary"
icon="el-icon-search"
@click="handleFilter"
>搜索</el-button
>
<el-button
size="mini"
class="filter-item"
type="primary"
icon="el-icon-edit"
@click="handleCreate"
>添加</el-button
>
<input
type="file"
ref="clearFile"
multiple="multiplt"
class="filter-item"
style="display: none"
accept=".xlsx"
/>
</div>
<!-- 查询结果 -->
<el-table :data="list" size="small" border fit highlight-current-row>
<el-table-column align="center" label="试卷名称" prop="name" />
<el-table-column align="center" label="所属课目" prop="topic" />
<el-table-column align="center" label="所属岗位" prop="postId" />
<el-table-column align="center" label="所属岗级" prop="levelId" />
<el-table-column align="center" label="试卷总分" prop="score" />
<el-table-column align="center" label="试卷描述" prop="describe" />
<el-table-column align="center" label="使用次数" prop="employ" />
<el-table-column align="center" label="下载次数" prop="download" />
<el-table-column
align="center"
label="操作"
width="220"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="handlePreview(scope.row)"
>预览</el-button
>
<el-button type="danger" size="mini" @click="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="listQuery.page"
:limit.sync="listQuery.limit"
@pagination="getList"
/>
<!-- 添加或修改对话框 -->
<el-dialog
title="新建试卷"
:visible.sync="open"
:close-on-click-modal="false"
width="900px"
:before-close="handleClose"
>
<el-steps :active="active" simple finish-status="success">
<el-step title="题库主题" />
<el-step title="题库组成" />
<el-step title="预览试卷" />
</el-steps>
<div v-show="active == 0" style="padding: 40px 0">
<el-form
ref="dataForm"
:rules="rules"
:model="dataForm"
label-position="right"
label-width="100px"
>
<el-row>
<el-col :span="12">
<el-form-item label="试卷年份" prop="year">
<el-date-picker
v-model="dataForm.year"
type="year"
placeholder="选择年"
style="width: 100%"
align="center"
/>
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="所属课目" prop="topic">
<el-select
v-model="dataForm.topic"
placeholder="请选择所属课目"
style="width: 100%"
>
<el-option
v-for="item in categoryOptions"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col> -->
<el-col :span="12">
<el-form-item label="所属岗位" prop="postId">
<el-select
v-model="dataForm.postId"
placeholder="请选择试题所属岗位"
style="width: 100%"
>
<el-option
v-for="item in stations"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="试题岗级" prop="levelId">
<el-select
v-model="dataForm.levelId"
placeholder="请选择试题岗级"
style="width: 100%"
>
<el-option
v-for="item in ranks"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div v-show="active == 1" style="padding: 30px 0">
<div style="display: flex; align-items: center; padding-bottom: 20px">
<span>题目类型：</span>
<div>
<el-checkbox-group v-model="topicType" @change="topicTypeChange">
<el-checkbox
v-for="(item, index) in typeDic"
:key="index"
:label="item"
/>
</el-checkbox-group>
</div>
</div>
<div>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
height="40vh"
empty-text="请选择题目类型"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column
prop="itemType"
label="类型"
align="center"
width="120"
/>
<el-table-column prop="title" label="题目课目" align="center" />
<el-table-column align="center">
<template slot="header" slot-scope="scope">
<span>选题数目（{{ numbers }}）</span>
</template>
<template slot-scope="scope">
<el-input-number
v-model="scope.row.itemCount"
:min="1"
:step="1"
style="width: 100%"
size="small"
@change="totalChange"
controls-position="right"
/>
</template>
</el-table-column>
<el-table-column align="center">
<template slot="header" slot-scope="scope">
<span>分数（{{ scores }}）</span>
</template>
<template slot-scope="scope">
<el-input-number
v-model="scope.row.itemScore"
:min="1"
:step="1"
style="width: 100%"
size="small"
@change="totalChange"
controls-position="right"
/>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div v-show="active == 2" style="padding-top: 30px" class="test_paper">
<el-radio-group v-model="examinationPaper">
<el-radio label="a4" border>A4纸</el-radio>
<el-radio label="a3" border>A3纸</el-radio>
</el-radio-group>
<div
class="test_paper_div"
v-loading="loading"
element-loading-text="生成试卷中"
>
<div ref="pdf" :class="examinationPaper">
<ul v-for="(item, index) in pdfPages" :key="index" v-html="item" />
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button
v-show="active == 1"
style="float: left"
type="primary"
@click="active = 0"
>上一步</el-button
>
<el-button v-show="active == 0" type="primary" @click="createNext"
>下一步</el-button
>
<el-button
v-show="active == 1"
:disabled="multiple"
type="success"
@click="createAffirm"
>生成题库</el-button
>
<el-button v-show="active == 2" type="success" @click="downloadPdf"
>导出</el-button
>
<el-button v-show="active == 2" type="primary" @click="handleOver"
>完成</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
import Pagination from "@/components/Pagination";
import { autoCreate } from "@/api/practice/testpaper";
import html2canvas from "html2canvas";
import jspdf from "jspdf";
export default {
name: "testpaper",
components: { Pagination },
data() {
return {
loading: false,
pdfPages: [""],
// 多选存放数组
ids: [],
// 非多个禁用
multiple: true,
active: 0,
numbers: 0,
scores: 0,
examinationPaper: "a4",
list: undefined,
total: 0,
listLoading: true,
listQuery: {
page: 1,
limit: 20,
id: undefined,
name: undefined,
},
categoryOptions: ["课目一", "课目二", "课目三"],
stations: ["岗位01", "岗位02", "岗位03", "岗位04", "岗位05"],
ranks: ["岗级01", "岗级02", "岗级03", "岗级04", "岗级05"],
typeDic: [
"单选",
"多选",
"判断",
"填空",
// "完形填空",
// "一问一答",
// "一问多答",
// "图片题",
// "多媒体试题",
],
topicType: [],
subjects: [
{
itemType: "单选",
item: ["违规制度", "基础理论"],
},
{
itemType: "多选",
item: ["违规制度", "基础理论"],
},
{
itemType: "判断",
item: ["违规制度", "基础理论"],
},
{
itemType: "填空",
item: ["违规制度", "基础理论"],
},
],
dataForm: {},
tableData: [],
open: false,
rules: {
year: [{ required: true, message: "请选择试卷年份", trigger: "blur" }],
// topic: [{ required: true, message: "请选择所属课目", trigger: "blur" }],
postId: [
{
required: true,
message: "请选择试题所属岗位",
trigger: ["blur", "change"],
},
],
levelId: [
{
required: true,
message: "请选择试题岗级",
trigger: ["blur", "change"],
},
],
},
};
},
created() {
this.getList();
},
methods: {
// 多选框选中数据
handleSelectionChange(selection) {
this.dataForm.courses = selection;
this.numbers = 0;
this.scores = 0;
selection.forEach((item) => {
this.numbers += item.itemCount;
this.scores += item.itemScore * item.itemCount;
});
this.multiple = !this.dataForm.courses.length;
},
// 改变数目与分数
totalChange() {
this.numbers = 0;
this.scores = 0;
this.dataForm.courses.forEach((item) => {
this.numbers += item.itemCount;
this.scores += item.itemScore * item.itemCount;
});
},
topicTypeChange(rows) {
let arr = [];
let num = 0;
rows.forEach((item, index) => {
let row = this.subjects.filter((item2) => {
return item === item2.itemType;
})[0].item;
if (row && row.length) {
row.forEach((item2) => {
arr.push({
courseId: num++,
title: item2,
itemType: item,
itemCount: 0,
itemScore: 0,
});
});
this.tableData = arr;
}
});
this.$forceUpdate();
},
getList() {
this.listLoading = true;
this.list = [
{
name: "试卷一",
topic: "课目一",
itemType: "单选",
postId: "岗位01",
levelId: "岗级01",
employ: 22,
download: 20,
describe: "无",
score: 100,
radio2: "是",
},
{
name: "试卷二",
topic: "课目二",
itemType: "填空",
postId: "岗位03",
levelId: "岗级01",
employ: 22,
download: 20,
describe: "无",
score: 120,
radio2: "否",
},
{
name: "试卷三",
topic: "课目三",
itemType: "一问多答",
postId: "岗级05",
levelId: "岗级01",
employ: 22,
download: 20,
describe: "无",
score: 100,
radio2: "",
},
];
this.total = 3;
this.listLoading = false;
},
handleFilter() {
this.listQuery.page = 1;
this.getList();
},
resetForm() {
this.dataForm = {};
this.tableData = [];
this.topicType = [];
this.active = 0;
this.$nextTick(() => {
this.$refs["dataForm"].clearValidate();
});
},
handleCreate() {
// this.createAffirm();
this.resetForm();
this.open = true;
},
liStyle(name) {
if (name == "test_paper_head")
return "text-align: center;margin: 0;padding-bottom: 20px;height:44px;";
if (name == "test_paper_topic")
return "padding-top:30px;padding-bottom:10px;font-size: 14px;";
if (name == "test_paper_content")
return "font-size: 12px;line-height: 20px;padding: 5px 0;";
return "";
},
handleClose(done) {
let that = this;
this.$confirm("确定关闭弹框？").then((_) => {
done();
that.resetForm();
});
},
createNext() {
this.$refs["dataForm"].validate((valid) => {
if (valid) {
this.active = 1;
this.multiple =
!this.dataForm.courses || !this.dataForm.courses.length;
}
});
},
createAffirm() {
this.active = 2;
this.loading = true;
this.dataForm.courses = [
{
courseId: 0,
itemCount: 1,
itemScore: 10,
itemType: "填空",
title: "违规制度",
content: "填空题填空题填空题，填空题填空题填空题______填空题。",
},
{
courseId: 1,
itemCount: 1,
itemScore: 10,
itemType: "填空",
title: "基础理论",
content: "填空题填空题填空题，填空题填空题填空题填空题______。",
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判断",
title: "违规制度",
content:
"判断题判断题判，断题判断题判断题判断题判，断题判断题判断题？（ ）",
},
{
courseId: 3,
itemCount: 5,
itemScore: 1,
itemType: "判断",
title: "基础理论",
content: "判断题判断题判，断题题判判断题判断题？（ ）",
},
{
courseId: 4,
itemCount: 3,
itemScore: 5,
itemType: "多选",
title: "违规制度",
content:
"多选题多选题多选题，多选题多选题多选题多选题多选题多，多选题多选题选题多选题多选题多选题多选题多选题多选题多选题。",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content:
"选项四选项四选项四选项四选项四选项四选项四选项四选项四选项四选选项四选项四选项四选项四选项四选项四选项四项四选项四选项四选项四",
},
{
sign: "E",
content: "选项五",
},
],
},
{
courseId: 5,
itemCount: 3,
itemScore: 5,
itemType: "多选",
title: "基础理论",
content:
"多选题多选题多选题多选题多选题多选题多选题多选题多，多选题选题。",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
{
sign: "E",
content: "选项五",
},
{
sign: "F",
content: "选项六",
},
],
},
{
courseId: 6,
itemCount: 10,
itemScore: 2,
itemType: "单选",
title: "违规制度",
content:
"单选题单选题单选题单选题单选题题，单选题单选题单选题单选题。",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
],
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "单选",
title: "基础理论",
content:
"单选题单选题单选题，单选题单选题单选题单选题单选题单选题单选题单选题。",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
],
},
{
courseId: 5,
itemCount: 3,
itemScore: 5,
itemType: "多选",
title: "基础理论",
content:
"多选题多选题多选题多选题多选题多选题多选题多选题多，多选题选题。",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
{
sign: "E",
content: "选项五",
},
{
sign: "F",
content: "选项六",
},
],
},
{
courseId: 6,
itemCount: 10,
itemScore: 2,
itemType: "单选",
title: "违规制度",
content:
"单选题单选题单选题单选题单选题题，单选题单选题单选题单选题。",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
],
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "单选",
title: "基础理论",
content:
"单选题单选题单选题，单选题单选题单选题单选题单选题单选题单选题单选题。",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
],
},
{
courseId: 5,
itemCount: 3,
itemScore: 5,
itemType: "多选",
title: "基础理论",
content:
"多选题多选题多选题多选题多选题多选题多选题多选题多，多选题选题。",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
{
sign: "E",
content: "选项五",
},
{
sign: "F",
content: "选项六",
},
],
},
{
courseId: 6,
itemCount: 10,
itemScore: 2,
itemType: "单选",
title: "违规制度",
content:
"单选题单选题单选题单选题单选题题，单选题单选题单选题单选题。",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
],
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "单选",
title: "基础理论",
content:
"单选题单选题单选题，单选题单选题单选题单选题单选题单选题单选题单选题。",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判断",
title: "违规制度",
content:
"判断题判断题判，断题判断题判断题判断题判，断题判断题判断题？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "单选",
title: "基础理论",
content:
"单选题单选题单选题，单选题单选题单选题单选题单选题单选题单选题单选题。",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判断",
title: "违规制度",
content:
"判断题判断题判，断题判断题判断题判断题判，断题判断题判断题？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "单选",
title: "基础理论",
content:
"选项四选项四选项四选项四选项四选项四选项四选项四选项四选项四选选项四选项四选项四选项四选项四选项四选项四项四选项四选项四选项四",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判断",
title: "违规制度",
content:
"判断题判断题判，断题判断题判断题判断题判，断题判断题判断题？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "单选",
title: "基础理论",
content:
"单选题单选题单选题，单选题单选题单选题单选题单选题单选题单选题单选题。",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判断",
title: "违规制度",
content:
"判断题判断题判，断题判断题判断题判断题判，断题判断题判断题？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "单选",
title: "基础理论",
content:
"单选题单选题单选题，单选题单选题单选题单选题单选题单选题单选题单选题。",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判断",
title: "违规制度",
content:
"判断题判断题判，断题判断题判断题判断题判，断题判断题判断题？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "单选",
title: "基础理论",
content:
"单选题单选题单选题，单选题单选题单选题单选题单选题单选题单选题单选题。",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判断",
title: "违规制度",
content:
"判断题判断题判，断题判断题判断题判断题判，断题判断题判断题？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "单选",
title: "基础理论",
content:
"单选题单选题单选题，单选题单选题单选题单选题单选题单选题单选题单选题。",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判断",
title: "违规制度",
content:
"判断题判断题判，断题判断题判断题判断题判，断题判断题判断题？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "单选",
title: "基础理论",
content:
"单选题单选题单选题，单选题单选题单选题单选题单选题单选题单选题单选题。",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判断",
title: "违规制度",
content:
"判断题判断题判，断题判断题判断题判断题判，断题判断题判断题？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "单选",
title: "基础理论",
content:
"选项四选项四选项四选项四选项四选项四选项四选项四选项四选项四选选项四选项四选项四选项四选项四选项四选项四项四选项四选项四选项四",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判断",
title: "违规制度",
content:
"判断题判断题判，断题判断题判断题判断题判，断题判断题判断题？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "单选",
title: "基础理论",
content:
"单选题单选题单选题，单选题单选题单选题单选题单选题单选题单选题单选题。",
option: [
{
sign: "A",
content: "选项一",
},
{
sign: "B",
content: "选项二",
},
{
sign: "C",
content: "选项三",
},
{
sign: "D",
content: "选项四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判断",
title: "违规制度",
content:
"判断题判断题判，断题判断题判断题判断题判，断题判断题判断题？（ ）",
},
];
let arr = [
{
el: `<li class='test_paper_li' style='${this.liStyle(
"test_paper_head"
)}'>
<h2 style='margin: 0;'>2022上半年考核测试</h2>
</li>`,
},
];
this.dataForm.courses.forEach((item, index) => {
arr.push({
el: `<li class='test_paper_li' style='${this.liStyle(
"test_paper_topic"
)}'>${index + 1 + "、" + item.content}</li>`,
});
if (item.itemType == "单选" || item.itemType == "多选") {
item.option.forEach((item2, index2) => {
arr.push({
el: `<li class='test_paper_li' style='${this.liStyle(
"test_paper_content"
)}'>${item2.sign + "：" + item2.content}</li>`,
});
});
}
});
let arr2 = [];
arr.forEach((item, index) => {
this.pdfPages[0] += item.el;
this.$nextTick(() => {
let el = document.getElementsByClassName("test_paper_li")[index];
arr2.push({
el: item.el,
height: el.offsetHeight,
});
});
});
setTimeout(() => {
let i = 0;
let h = 0;
let arr3 = [""];
arr2.forEach((item, index) => {
h += item.height;
if (h > 1189 - 100) {
h = 50;
i++;
arr3.push("");
}
arr3[i] += item.el;
});
for (let n = 0; n < arr3.length; n++) {
arr3[
n
] += `<li style='position:absolute;bottom:0;left:0;width:100%;height:40px;line-height:40px;text-align:center;color:#000;font-size:13px;'>第 ${
n + 1 + " / " + arr3.length
} 页</li>`;
}
this.pdfPages = arr3;
this.loading = false;
}, 1000);
// autoCreate(this.dataForm).then((res) => {});
},
handlePreview(row) {},
handleDelete(row) {
this.$confirm("确定废弃该题?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
this.$notify.success({
title: "成功",
message: "已废弃",
});
});
},
handleOver() {
this.open = false;
this.resetForm();
},
downloadPdf() {
let that = this;
let target = this.$refs.pdf;
html2canvas(target, {
useCORS: true, // 当图片是链接地址时，需加该属性，否组无法显示图片
imageTimeout: 0,
scale: 3,
// width: 841,
// height: 1189,
}).then((canvas) => {
let contentWidth = canvas.width;
let contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
let pageHeight = (contentWidth / 595.28) * 841.89;
if (this.examinationPaper === "a3")
pageHeight = (contentWidth / 1682) * 1189;
//未生成pdf的html页面高度
let leftHeight = contentHeight;
let pageData = canvas.toDataURL("image/jpeg", 1.0);
// 图片导出为pdf
// 第一个方向,第二个单位,第三个尺寸格式
// landscape横向
// let pdf = new jspdf('landscape', 'pt', 'a4');
let pdf = new jspdf("", "pt", "a4");
if (this.examinationPaper === "a3") pdf = new jspdf("l", "pt", "a3");
//a4纸的尺寸[595.28,841.89]，a3*2，html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28;
let imgHeight = (592.28 / contentWidth) * contentHeight;
if (this.examinationPaper === "a3") {
imgWidth = imgWidth * 2;
imgHeight = imgHeight * 2;
}
//有两个高度需区分，一个是html页面的实际高度，和生成pdf的页面高度(1189.89)
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
} else {
let offsetY = 0;
while (leftHeight > 0) {
pdf.addImage(pageData, "JPEG", 0, offsetY, imgWidth, imgHeight);
leftHeight -= pageHeight;
offsetY -= 841.28;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save("考卷.pdf");
});
},
},
};
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #20a0ff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
}
.avatar {
width: 145px;
height: 145px;
display: block;
}
.success {
color: aquamarine;
}
.test_paper {
.test_paper_div {
overflow: auto;
max-height: 50vh;
margin-top: 20px;
border: solid 1px #ccc;
& > div {
&.a3 {
width: 1682px;
display: flex;
flex-wrap: wrap;
}
&.a4 {
width: 841px;
}
}
ul {
color: #000;
background: #ffffff;
padding: 50px;
width: 841px;
height: 1189px;
position: relative;
}
}
}
</style>
网友评论