<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>
<!-- 查詢結(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="所屬崗級" 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)"
>預覽</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>選題數(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>分數(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"
>導出</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: [],
// 非多個禁用
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: ["違規(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: "請選擇試題崗級",
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ù)目與分數(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: "崗級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("確定關(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: "選項一",
},
{
sign: "B",
content: "選項二",
},
{
sign: "C",
content: "選項三",
},
{
sign: "D",
content:
"選項四選項四選項四選項四選項四選項四選項四選項四選項四選項四選選項四選項四選項四選項四選項四選項四選項四項四選項四選項四選項四",
},
{
sign: "E",
content: "選項五",
},
],
},
{
courseId: 5,
itemCount: 3,
itemScore: 5,
itemType: "多選",
title: "基礎(chǔ)理論",
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: "違規(guī)制度",
content:
"單選題單選題單選題單選題單選題題，單選題單選題單選題單選題。",
option: [
{
sign: "A",
content: "選項一",
},
{
sign: "B",
content: "選項二",
},
{
sign: "C",
content: "選項三",
},
{
sign: "D",
content: "選項四",
},
],
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題，單選題單選題單選題單選題單選題單選題單選題單選題。",
option: [
{
sign: "A",
content: "選項一",
},
{
sign: "B",
content: "選項二",
},
{
sign: "C",
content: "選項三",
},
{
sign: "D",
content: "選項四",
},
],
},
{
courseId: 5,
itemCount: 3,
itemScore: 5,
itemType: "多選",
title: "基礎(chǔ)理論",
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: "違規(guī)制度",
content:
"單選題單選題單選題單選題單選題題，單選題單選題單選題單選題。",
option: [
{
sign: "A",
content: "選項一",
},
{
sign: "B",
content: "選項二",
},
{
sign: "C",
content: "選項三",
},
{
sign: "D",
content: "選項四",
},
],
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題，單選題單選題單選題單選題單選題單選題單選題單選題。",
option: [
{
sign: "A",
content: "選項一",
},
{
sign: "B",
content: "選項二",
},
{
sign: "C",
content: "選項三",
},
{
sign: "D",
content: "選項四",
},
],
},
{
courseId: 5,
itemCount: 3,
itemScore: 5,
itemType: "多選",
title: "基礎(chǔ)理論",
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: "違規(guī)制度",
content:
"單選題單選題單選題單選題單選題題，單選題單選題單選題單選題。",
option: [
{
sign: "A",
content: "選項一",
},
{
sign: "B",
content: "選項二",
},
{
sign: "C",
content: "選項三",
},
{
sign: "D",
content: "選項四",
},
],
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題，單選題單選題單選題單選題單選題單選題單選題單選題。",
option: [
{
sign: "A",
content: "選項一",
},
{
sign: "B",
content: "選項二",
},
{
sign: "C",
content: "選項三",
},
{
sign: "D",
content: "選項四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判，斷題判斷題判斷題判斷題判，斷題判斷題判斷題？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題，單選題單選題單選題單選題單選題單選題單選題單選題。",
option: [
{
sign: "A",
content: "選項一",
},
{
sign: "B",
content: "選項二",
},
{
sign: "C",
content: "選項三",
},
{
sign: "D",
content: "選項四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判，斷題判斷題判斷題判斷題判，斷題判斷題判斷題？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"選項四選項四選項四選項四選項四選項四選項四選項四選項四選項四選選項四選項四選項四選項四選項四選項四選項四項四選項四選項四選項四",
option: [
{
sign: "A",
content: "選項一",
},
{
sign: "B",
content: "選項二",
},
{
sign: "C",
content: "選項三",
},
{
sign: "D",
content: "選項四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判，斷題判斷題判斷題判斷題判，斷題判斷題判斷題？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題，單選題單選題單選題單選題單選題單選題單選題單選題。",
option: [
{
sign: "A",
content: "選項一",
},
{
sign: "B",
content: "選項二",
},
{
sign: "C",
content: "選項三",
},
{
sign: "D",
content: "選項四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判，斷題判斷題判斷題判斷題判，斷題判斷題判斷題？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題，單選題單選題單選題單選題單選題單選題單選題單選題。",
option: [
{
sign: "A",
content: "選項一",
},
{
sign: "B",
content: "選項二",
},
{
sign: "C",
content: "選項三",
},
{
sign: "D",
content: "選項四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判，斷題判斷題判斷題判斷題判，斷題判斷題判斷題？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題，單選題單選題單選題單選題單選題單選題單選題單選題。",
option: [
{
sign: "A",
content: "選項一",
},
{
sign: "B",
content: "選項二",
},
{
sign: "C",
content: "選項三",
},
{
sign: "D",
content: "選項四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判，斷題判斷題判斷題判斷題判，斷題判斷題判斷題？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題，單選題單選題單選題單選題單選題單選題單選題單選題。",
option: [
{
sign: "A",
content: "選項一",
},
{
sign: "B",
content: "選項二",
},
{
sign: "C",
content: "選項三",
},
{
sign: "D",
content: "選項四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判，斷題判斷題判斷題判斷題判，斷題判斷題判斷題？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題，單選題單選題單選題單選題單選題單選題單選題單選題。",
option: [
{
sign: "A",
content: "選項一",
},
{
sign: "B",
content: "選項二",
},
{
sign: "C",
content: "選項三",
},
{
sign: "D",
content: "選項四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判，斷題判斷題判斷題判斷題判，斷題判斷題判斷題？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"選項四選項四選項四選項四選項四選項四選項四選項四選項四選項四選選項四選項四選項四選項四選項四選項四選項四項四選項四選項四選項四",
option: [
{
sign: "A",
content: "選項一",
},
{
sign: "B",
content: "選項二",
},
{
sign: "C",
content: "選項三",
},
{
sign: "D",
content: "選項四",
},
],
},
{
courseId: 2,
itemCount: 5,
itemScore: 1,
itemType: "判斷",
title: "違規(guī)制度",
content:
"判斷題判斷題判，斷題判斷題判斷題判斷題判，斷題判斷題判斷題？（ ）",
},
{
courseId: 7,
itemCount: 10,
itemScore: 2,
itemType: "單選",
title: "基礎(chǔ)理論",
content:
"單選題單選題單選題，單選題單選題單選題單選題單選題單選題單選題單選題。",
option: [
{
sign: "A",
content: "選項一",
},
{
sign: "B",
content: "選項二",
},
{
sign: "C",
content: "選項三",
},
{
sign: "D",
content: "選項四",
},
],
},
{
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, // 當圖片是鏈接地址時，需加該屬性，否組無法顯示圖片
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;
}
//有兩個高度需區(qū)分，一個是html頁面的實際高度，和生成pdf的頁面高度(1189.89)
//當內(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導出多頁pdf和（a3\a4）兩種模式
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 最近遇到一個問題：學校老師發(fā)來打印的學案是A3尺寸的PDF文件，可是家用打印機只能打印A4紙，如果縮印的話，學案文...
- 有時我們打開一些PDF文檔時發(fā)現(xiàn)里面的內(nèi)容是A3紙張大小的雙頁模式，查看起來雖然很方便，但是如果需要打印無法直接適...
- 1、應(yīng)用場景 學校老師發(fā)的很多試卷都是A3版本的pdf文件。 可是家用打印機用的是A4紙，用原本pdf文件打印格式...
