<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="請選擇知識(shí)點(diǎn)"
>
<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>
<!-- 查詢結(jié)果 -->
<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="所屬崗級(jí)" prop="levelId" />
<el-table-column align="center" label="試卷總分" prop="score" />
<el-table-column align="center" label="試卷描述" prop="describe" />
<el-table-column align="center" label="使用次數(shù)" prop="employ" />
<el-table-column align="center" label="下載次數(shù)" 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)"
>預(yù)覽</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"
/>
<!-- 添加或修改對(duì)話框 -->
<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="預(yù)覽試卷" />
</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="試題崗級(jí)" prop="levelId">
<el-select
v-model="dataForm.levelId"
placeholder="請選擇試題崗級(jí)"
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>選題數(shù)目（{{ 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>分?jǐn)?shù)（{{ 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"
>導(dǎo)出</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: [""],
// 多選存放數(shù)組
ids: [],
// 非多個(gè)禁用
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: ["崗級(jí)01", "崗級(jí)02", "崗級(jí)03", "崗級(jí)04", "崗級(jí)05"],
typeDic: [
"單選",
"多選",
"判斷",
"填空",
// "完形填空",
// "一問一答",
// "一問多答",
// "圖片題",
// "多媒體試題",
],
topicType: [],
subjects: [
{
itemType: "單選",
item: ["違規(guī)制度", "基礎(chǔ)理論"],
},
{
itemType: "多選",
item: ["違規(guī)制度", "基礎(chǔ)理論"],
},
{
itemType: "判斷",
item: ["違規(guī)制度", "基礎(chǔ)理論"],
},
{
itemType: "填空",
item: ["違規(guī)制度", "基礎(chǔ)理論"],
},
],
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: "請選擇試題崗級(jí)",
trigger: ["blur", "change"],
},
],
},
};
},
created() {
this.getList();
},
methods: {
// 多選框選中數(shù)據(jù)
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;
},
// 改變數(shù)目與分?jǐn)?shù)
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: "崗級(jí)01",
employ: 22,
download: 20,
describe: "無",
score: 100,
radio2: "是",
},
{
name: "試卷二",
topic: "課目二",
itemType: "填空",
postId: "崗位03",
levelId: "崗級(jí)01",
employ: 22,
download: 20,
describe: "無",
score: 120,
radio2: "否",
},
{
name: "試卷三",
topic: "課目三",
itemType: "一問多答",
postId: "崗級(jí)05",
levelId: "崗級(jí)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("確定關(guān)閉彈框帽氓？").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: "違規(guī)制度",
content: "填空題填空題填空題叹阔，填空題填空題填空題______填空題茶行。",
},
{
courseId: 1,
itemCount: 1,
itemScore: 10,
itemType: "填空",
title: "基礎(chǔ)理論",
content: "填空題填空題填空題庭敦，填空題填空題填空題填空題______车摄。",
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判，斷題判斷題判斷題判斷題判簿煌，斷題判斷題判斷題酌摇？（ ）",
},
{
courseId: 3,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "基礎(chǔ)理論",
content: "判斷題判斷題判，斷題題判判斷題判斷題驰坊？（ ）",
},
{
courseId: 4,
itemCount: 3,
itemScore: 5,
itemType: "多選",
title: "違規(guī)制度",
content:
"多選題多選題多選題匾二，多選題多選題多選題多選題多選題多，多選題多選題選題多選題多選題多選題多選題多選題多選題多選題。",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content:
"選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四",
},
{
sign: "E",
content: "選項(xiàng)五",
},
],
},
{
courseId: 5,
itemCount: 3,
itemScore: 5,
itemType: "多選",
title: "基礎(chǔ)理論",
content:
"多選題多選題多選題多選題多選題多選題多選題多選題多察藐，多選題選題借嗽。",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
{
sign: "E",
content: "選項(xiàng)五",
},
{
sign: "F",
content: "選項(xiàng)六",
},
],
},
{
courseId: 6,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "違規(guī)制度",
content:
"單選題單選題單選題單選題單選題題，單選題單選題單選題單選題转培。",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
],
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題恶导，單選題單選題單選題單選題單選題單選題單選題單選題。",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
],
},
{
courseId: 5,
itemCount: 3,
itemScore: 5,
itemType: "多選",
title: "基礎(chǔ)理論",
content:
"多選題多選題多選題多選題多選題多選題多選題多選題多浸须，多選題選題惨寿。",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
{
sign: "E",
content: "選項(xiàng)五",
},
{
sign: "F",
content: "選項(xiàng)六",
},
],
},
{
courseId: 6,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "違規(guī)制度",
content:
"單選題單選題單選題單選題單選題題，單選題單選題單選題單選題删窒。",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
],
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題裂垦，單選題單選題單選題單選題單選題單選題單選題單選題。",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
],
},
{
courseId: 5,
itemCount: 3,
itemScore: 5,
itemType: "多選",
title: "基礎(chǔ)理論",
content:
"多選題多選題多選題多選題多選題多選題多選題多選題多肌索，多選題選題蕉拢。",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
{
sign: "E",
content: "選項(xiàng)五",
},
{
sign: "F",
content: "選項(xiàng)六",
},
],
},
{
courseId: 6,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "違規(guī)制度",
content:
"單選題單選題單選題單選題單選題題，單選題單選題單選題單選題诚亚。",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
],
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題晕换，單選題單選題單選題單選題單選題單選題單選題單選題。",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判站宗，斷題判斷題判斷題判斷題判闸准，斷題判斷題判斷題？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題梢灭，單選題單選題單選題單選題單選題單選題單選題單選題夷家。",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判，斷題判斷題判斷題判斷題判敏释，斷題判斷題判斷題库快？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判，斷題判斷題判斷題判斷題判钥顽，斷題判斷題判斷題义屏？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題，單選題單選題單選題單選題單選題單選題單選題單選題耳鸯。",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判湿蛔，斷題判斷題判斷題判斷題判，斷題判斷題判斷題县爬？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題，單選題單選題單選題單選題單選題單選題單選題單選題添谊。",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判财喳，斷題判斷題判斷題判斷題判，斷題判斷題判斷題？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題耳高，單選題單選題單選題單選題單選題單選題單選題單選題扎瓶。",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判，斷題判斷題判斷題判斷題判泌枪，斷題判斷題判斷題概荷？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題，單選題單選題單選題單選題單選題單選題單選題單選題碌燕。",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判误证，斷題判斷題判斷題判斷題判，斷題判斷題判斷題修壕？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題愈捅，單選題單選題單選題單選題單選題單選題單選題單選題。",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判慈鸠，斷題判斷題判斷題判斷題判蓝谨，斷題判斷題判斷題？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四項(xiàng)四選項(xiàng)四選項(xiàng)四選項(xiàng)四",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判青团，斷題判斷題判斷題判斷題判譬巫，斷題判斷題判斷題？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題督笆，單選題單選題單選題單選題單選題單選題單選題單選題缕题。",
option: [
{
sign: "A",
content: "選項(xiàng)一",
},
{
sign: "B",
content: "選項(xiàng)二",
},
{
sign: "C",
content: "選項(xiàng)三",
},
{
sign: "D",
content: "選項(xiàng)四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
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, // 當(dāng)圖片是鏈接地址時(shí)咸作，需加該屬性锨阿，否組無法顯示圖片
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);
// 圖片導(dǎo)出為pdf
// 第一個(gè)方向,第二個(gè)單位,第三個(gè)尺寸格式
// 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;
}
//有兩個(gè)高度需區(qū)分墅诡，一個(gè)是html頁面的實(shí)際高度，和生成pdf的頁面高度(1189.89)
//當(dāng)內(nèi)容未超過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>
vue導(dǎo)出多頁pdf和（a3\a4）兩種模式
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門舅柜，熙熙樓的掌柜王于貴愁眉苦臉地迎上來梭纹，“玉大人，你說我怎么就攤上這事致份”涑椋” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵氮块，是天一觀的道長绍载。 經(jīng)常有香客問我，道長雇锡，這世上最難降的妖魔是什么逛钻？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮锰提，結(jié)果婚禮上曙痘，老公的妹妹穿的比我還像新娘。我一直安慰自己立肘，他們只是感情好边坤，可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著谅年，像睡著了一般茧痒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上融蹂，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼届良！你這毒婦竟也來了笆凌？” 一聲冷哼從身側(cè)響起，我...
- 序言：老撾萬榮一對(duì)情侶失蹤士葫，失蹤者是張志新（化名）和其女友劉穎乞而，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體为障，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡晦闰，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年放祟，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了鳍怨。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片呻右。...
- 正文 年R本政府宣布落塑，位于F島的核電站，受9級(jí)特大地震影響罐韩，放射性物質(zhì)發(fā)生泄漏憾赁。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一散吵、第九天 我趴在偏房一處隱蔽的房頂上張望龙考。 院中可真熱鬧，春花似錦矾睦、人聲如沸晦款。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽缓溅。三九已至，卻和暖如春赁温，著一層夾襖步出監(jiān)牢的瞬間坛怪，已是汗流浹背。 一陣腳步聲響...
- 正文 我出身青樓毁涉，卻偏偏與公主長得像沉帮，于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子贫堰，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 最近遇到一個(gè)問題：學(xué)校老師發(fā)來打印的學(xué)案是A3尺寸的PDF文件穆壕，可是家用打印機(jī)只能打印A4紙，如果縮印的話其屏，學(xué)案文...
- 有時(shí)我們打開一些PDF文檔時(shí)發(fā)現(xiàn)里面的內(nèi)容是A3紙張大小的雙頁模式偎行，查看起來雖然很方便川背，但是如果需要打印無法直接適...
- 方法1：剪裁可以合并同樣的文件 -- 重新排序 -- 剪裁； 方法2：快速從中間拆分Acrobat 增效工具：用...
- 1蚤告、應(yīng)用場景 學(xué)校老師發(fā)的很多試卷都是A3版本的pdf文件练般。 可是家用打印機(jī)用的是A4紙矗漾，用原本pdf文件打印格式...
