导出pdf基本完成

src/utils/print.js

@@ -28,6 +28,9 @@ function getStyle() {
       #print-container {
           display: block;
       }
+      div{
+        -webkit-print-color-adjust: exact;
+      }
   }`;
   let style = document.createElement("style");
   style.innerHTML = styleContent;

src/views/anscard/Index.vue

@@ -1,256 +1,284 @@
-<style lang="scss">
-	.content{
-		background-color: #f5eedb !important;
-	}
-	.content_div{
-		display: flex;
-		overflow: auto;
-		min-width: 1200px;
-		height: calc(100vh - 170px);
-		overflow: auto;
-		.left_div{
-			width: 820px;
-			background-color: gray;
-			overflow: auto;
-			height: 100%;
-			position: relative;
-			.page_div{
-				height: 1140px;
-			}
-			.page_cell{
-				// top: 10px;
-				left: 2.5mm;
-				width: 210mm;
-				height: 297mm;
-				position: absolute;
-				background-color: #fff;
-				border: 1px solid #000;
-				*{
-					box-sizing: content-box;
-					font-family: 宋体, SimSun, 'STSong';
-				}
-				
-				.obj{
-					 position:relative;border:solid 1px black;
-					 width: 100%;
-					 height: 100%;
-					 // overflow: hidden;
-				}
-				.item{
-					position: absolute;
-				}
-				.tm_id{
-					width: 8mm;
-					text-align: center;
-					font-size: 3mm;
-					height: 2.5mm;
-					position: absolute;
-				}
-				.opLabel{
-					padding:0mm 2mm;font-weight:bold; font-size:3mm;line-height:5mm;width:178mm;
-				}
-				.del{
-					position: absolute;
-					width: 20px;
-					right: 5px;
-					display: none;
-					cursor: pointer;
-					z-index: 999;
-				}
-			}
-			.sub:hover .del{
-				display: block !important;
-			}
-			.act{
-				background-color: #000;
-			}
-			.tk{
-				div{
-					background-color: #666;
-					position: absolute;
-				}
-			}
-			.words{
-				display: flex;
-				flex-wrap: wrap;
-				margin: 8mm auto;
-				width: 170mm;
-				border: 1px solid #333;
-				border-right-width: 2px;
-				border-bottom-width: 2px;
-				li{
-					box-sizing: border-box;
-					list-style: none;
-					width: 8.5mm;
-					height: 8mm;
-					border: 1px solid #333;
-					margin-bottom: 1.5mm;
-					border-right: none;
-					position: relative;
-					span{
-						position: absolute;
-						font-size: 2mm;
-						top: 100%;
-						left: 40%;
-					}
-				}
-			}
-			.english{
-				padding: 0 5mm;
-				li{
-					list-style: none;
-					height: 10mm;
-					border-bottom: 1px solid #333;
-				}
-			}
-		}
-		.right_div{
-			margin-left: 10px;
-			width: 300px;
-			height: 100%;
-			overflow: auto;
-			background-color: #fff;
-			border-left: 1px solid #dadada;
-			border-right: 1px solid #dadada;
-			h3{
-				background-color: #f3f3f3;
-				border-top: 1px solid #dadada;
-				border-bottom: 1px solid #dadada;
-				font-size: 16px;
-				font-weight: normal;
-				padding: 10px;
-			}
-			.dtk_bs_list{
-				padding: 10px;
-				li{
-					display: inline-block;
-					width: 37px;
-					height: 37px;
-					margin: 0 7px;
-					position: relative;
-					cursor: pointer;
-					img{
-						width: 100%;
-						height: 100%;
-					}
-					b{
-						position: absolute;
-						width: 100%;
-						font-size: 12px;
-						top: 100%;
-						text-align: center;
-						left: 0;
-						padding: 5px 0;
-					}
-					&:hover{
-						border: 2px solid #18a368;
-						&::after{
-							content: '';
-							width: 18px;
-							height: 18px;
-							background-image: url(../../assets/correct_on.png);
-							position: absolute;
-							top: 0;
-							bottom: 0;
-							left: 0;
-							right: 0;
-							margin: auto;
-						}
-					}
-				}
-				.te_active{
-					border: 2px solid #18a368;
-					&::after{
-						content: '';
-						width: 18px;
-						height: 18px;
-						background-image: url(../../assets/correct_on.png);
-						position: absolute;
-						top: 0;
-						bottom: 0;
-						left: 0;
-						right: 0;
-						margin: auto;
-					}
-				}
-			}
-			.tips{
-				font-size: 12px;
-				color: #999;
-				padding: 10px;
-			}
-			.btns{
-				button{
-					margin: 5px 5px 5px 0;
-					width: 84px;
-					text-align: center;
-				}
-			}
-		}
-	}
-	.tm_list{
-		height: 200px;
-		overflow: auto;
-		border: 1px solid #d9d9d9;
-		margin-bottom: 10px; 
-		li{
-			list-style: none;
-			border-bottom: 1px solid #d9d9d9;
-			padding: 5px 10px;
-			min-height: 40px;
-			
-			span{
-				display: inline-block;
-				line-height: 30px;
-				font-size: 18px;
-			}
-			div{
-				float: right;
-				font-weight: 600;
-				input{
-					width: 50px;
-					height: 30px;
-					margin-right: 5px;
-					text-align: center;
-					outline: none;
-					font-size: 18px;
-				}
-			}
-		}
-	}
-	.options{
-			position: absolute;
-		    font-size: 2.5mm;
-		    border: 1px solid rgb(0, 0, 0);
-		    text-align: center;
-		    line-height: 1;
-	}
-	.stdPoints{
-		position:absolute;background-color:black;
-		z-index: 99;
-	}
-	.content_box{
-		// border: 1px solid red;
-		width:180mm;height:257mm;position:absolute;
-	}
-	.w-e-text{
-		min-height: auto !important;
-	}
-	#paperNameTextAreaTem{
-		resize:none;width:177mm;color:#000;font-size:20px;
-		font-weight:600;height: 15mm;max-height:21mm;
-		text-align: center;word-wrap: normal;line-height:15mm;overflow:hidden;
-		margin-left: 9mm;
-		margin-top: 9mm;
-	}
-	.breadcrumb{
-		position:relative;
-	}
-	.exportPdf{
-		position:absolute;
-		right:20px;
-		top:10px;
-	}
+<style>
+.content {
+  background-color: #f5eedb !important;
+}
+
+.content_div {
+  display: flex;
+  overflow: auto;
+  min-width: 1200px;
+  height: calc(100vh - 170px);
+  overflow: auto;
+}
+.content_div .left_div {
+  width: 820px;
+  background-color: gray;
+  overflow: auto;
+  height: 100%;
+  position: relative;
+}
+.content_div .left_div .page_div {
+  height: 1140px;
+}
+.page_cell {
+  left: 2.5mm;
+  width: 210mm;
+  height: 297mm;
+  position: absolute;
+  background-color: #fff;
+  border: 1px solid #000;
+}
+.content_div .left_div .page_cell * {
+  box-sizing: content-box;
+  font-family: 宋体, SimSun, "STSong";
+}
+/* .content_div .left_div .page_cell .obj { */
+.page_cell_obj {
+  position: relative;
+  border: solid 1px black;
+  width: 100%;
+  height: 100%;
+}
+.content_div .left_div .page_cell .item {
+  position: absolute;
+}
+/* .content_div .left_div .page_cell .tm_id { */
+.page_cell_tm_id {
+  width: 8mm;
+  text-align: center;
+  font-size: 3mm;
+  height: 2.5mm;
+  position: absolute;
+}
+/* .content_div .left_div .page_cell .opLabel { */
+.page_cell_opLabel {
+  padding: 0mm 2mm;
+  font-weight: bold;
+  font-size: 3mm;
+  line-height: 5mm;
+  width: 178mm;
+}
+/* .content_div .left_div .page_cell .del { */
+.page_cell_del {
+  position: absolute;
+  width: 20px;
+  right: 5px;
+  display: none;
+  cursor: pointer;
+  z-index: 999;
+}
+.page_cell_sub:hover .page_cell_del {
+  display: block !important;
+}
+.content_div .left_div .act {
+  background-color: #000;
+}
+/* .content_div .left_div .tk div { */
+.page_cell_tk_div {
+  background-color: #666;
+  position: absolute;
+  background: #666;
+}
+
+/* .content_div .left_div .words { */
+/* .left_div_words {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 8mm auto;
+  width: 170mm;
+  border: 1px solid #333;
+  border-right-width: 2px;
+  border-bottom-width: 2px;
+} */
+/* .content_div .left_div .words li { */
+/* .left_div_words li {
+  box-sizing: border-box;
+  list-style: none;
+  width: 8.5mm;
+  height: 8mm;
+  border: 1px solid #333;
+  margin-bottom: 1.5mm;
+  border-right: none;
+  position: relative;
+} */
+/* .content_div .left_div .words li span { */
+.left_div_words_li_span {
+  position: absolute;
+  font-size: 2mm;
+  top: 100%;
+  left: 40%;
+}
+
+.content_div .left_div .english {
+  padding: 0 5mm;
+}
+.content_div .left_div .english li {
+  list-style: none;
+  height: 10mm;
+  border-bottom: 1px solid #333;
+}
+
+.content_div .right_div {
+  margin-left: 10px;
+  width: 300px;
+  height: 100%;
+  overflow: auto;
+  background-color: #fff;
+  border-left: 1px solid #dadada;
+  border-right: 1px solid #dadada;
+}
+.content_div .right_div h3 {
+  background-color: #f3f3f3;
+  border-top: 1px solid #dadada;
+  border-bottom: 1px solid #dadada;
+  font-size: 16px;
+  font-weight: normal;
+  padding: 10px;
+}
+.content_div .right_div .dtk_bs_list {
+  padding: 10px;
+}
+.content_div .right_div .dtk_bs_list li {
+  display: inline-block;
+  width: 37px;
+  height: 37px;
+  margin: 0 7px;
+  position: relative;
+  cursor: pointer;
+}
+.content_div .right_div .dtk_bs_list li img {
+  width: 100%;
+  height: 100%;
+}
+.content_div .right_div .dtk_bs_list li b {
+  position: absolute;
+  width: 100%;
+  font-size: 12px;
+  top: 100%;
+  text-align: center;
+  left: 0;
+  padding: 5px 0;
+}
+.content_div .right_div .dtk_bs_list li:hover {
+  border: 2px solid #18a368;
+}
+.content_div .right_div .dtk_bs_list li:hover::after {
+  content: "";
+  width: 18px;
+  height: 18px;
+  background-image: url(../../assets/correct_on.png);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+.content_div .right_div .dtk_bs_list .te_active {
+  border: 2px solid #18a368;
+}
+.content_div .right_div .dtk_bs_list .te_active::after {
+  content: "";
+  width: 18px;
+  height: 18px;
+  background-image: url(../../assets/correct_on.png);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+.content_div .right_div .tips {
+  font-size: 12px;
+  color: #999;
+  padding: 10px;
+}
+.content_div .right_div .btns button {
+  margin: 5px 5px 5px 0;
+  width: 84px;
+  text-align: center;
+}
+
+.tm_list {
+  height: 200px;
+  overflow: auto;
+  border: 1px solid #d9d9d9;
+  margin-bottom: 10px;
+}
+.tm_list li {
+  list-style: none;
+  border-bottom: 1px solid #d9d9d9;
+  padding: 5px 10px;
+  min-height: 40px;
+}
+.tm_list li span {
+  display: inline-block;
+  line-height: 30px;
+  font-size: 18px;
+}
+.tm_list li div {
+  float: right;
+  font-weight: 600;
+}
+.tm_list li div input {
+  width: 50px;
+  height: 30px;
+  margin-right: 5px;
+  text-align: center;
+  outline: none;
+  font-size: 18px;
+}
+
+.page_cell_options {
+  position: absolute;
+  font-size: 2.5mm;
+  border: 1px solid rgb(0, 0, 0);
+  text-align: center;
+  line-height: 1;
+}
+
+.stdPoints {
+  position: absolute;
+  background-color: black;
+  z-index: 99;
+}
+
+.content_box {
+  width: 180mm;
+  height: 257mm;
+  position: absolute;
+}
+
+.w-e-text {
+  min-height: auto !important;
+}
+
+#paperNameTextAreaTem {
+  resize: none;
+  width: 177mm;
+  color: #000;
+  font-size: 20px;
+  font-weight: 600;
+  height: 15mm;
+  max-height: 21mm;
+  text-align: center;
+  word-wrap: normal;
+  line-height: 15mm;
+  overflow: hidden;
+  margin-left: 9mm;
+  margin-top: 9mm;
+}
+
+.breadcrumb {
+  position: relative;
+}
+
+.exportPdf {
+  position: absolute;
+  right: 20px;
+  top: 10px;
+}
 </style>
 <template>
   <section class="content">
@@ -349,16 +377,16 @@
 						</template>
 						<!-- 选择题 -->
 						<template v-if='paper.obj.list.length>0 && page.pno == 1'>	
-							<div class="sub">
-								<div class="opLabel" :style="{
+							<div class="page_cell_sub">
+								<div class="page_cell_opLabel" :style="{
 										left: paper.objAnsPoints[0].x+'mm',
 										top: (paper.objAnsPoints[0].y-5)+'mm',
 										position:'absolute'
 									}">
 									{{paper.obj.title}}
-									<img @click="delTm(0,1)" class="del" src="../../assets/delete.png" alt="">
+									<img @click="delTm(0,1)" class="page_cell_del" src="../../assets/delete.png" alt="">
 								</div>
-								<div class="obj" :style="{
+								<div class="page_cell_obj" :style="{
 										width: paper.objAnsPoints[0].w+'mm',
 										height: paper.objAnsPoints[0].h+'mm',
 										left: paper.objAnsPoints[0].x+'mm',
@@ -366,11 +394,11 @@
 										position:'absolute'
 									}">
 									<div  v-for='(item,index) in paper.obj.list'>
-										<span class="tm_id" :style="{
+										<span class="page_cell_tm_id" :style="{
 											left:(item.points[0].x-8)+'mm',
 											top:(item.points[0].y)+'mm'
 										}">{{item.id}}</span>
-										<span v-for='(opt,i) in item.points' class="options" :style="{
+										<span v-for='(opt,i) in item.points' class="page_cell_options" :style="{
 											width: opt.w+'mm',
 											height: opt.h+'mm',
 											left: opt.x+'mm',
@@ -390,9 +418,9 @@
 						</template>
 						<!-- 填空题 -->
 						<template v-if='paper.sub.length>0'>
-							<div class="sub" v-for='(item,i) in paper.stdSujQnoPoints' v-if='item.pno == page.pno'>
+							<div class="page_cell_sub" v-for='(item,i) in paper.stdSujQnoPoints' v-if='item.pno == page.pno'>
 								<!-- 标题 -->
-								<div class="opLabel" :style="{
+								<div class="page_cell_opLabel" :style="{
 									left: item.x+'mm',
 									top: (item.y-5)+'mm',
 									position:'absolute'
@@ -401,7 +429,7 @@
 									
 								</div>
 								
-								<div class="obj" :style="{
+								<div class="page_cell_obj" :style="{
 									width: item.w+'mm',
 									height: item.h+'mm',
 									left: item.x+'mm',
@@ -409,19 +437,19 @@
 									position:'absolute'
 									}"
 								>
-									<img @click="delTm(i)" class="del" src="../../assets/delete.png" alt="">
+									<img @click="delTm(i)" class="page_cell_del" src="../../assets/delete.png" alt="">
 									<!-- 填空 -->
 									<template v-if='paper.sub[i].type==2'>
-										<div v-for='sub in paper.sub[i].list' class="tk">
-											<span class="tm_id" :style="{
+										<div v-for='sub in paper.sub[i].list' class="page_cell_tk">
+											<span class="page_cell_tm_id" :style="{
 												left:(sub.x-6)+'mm',
 												top:(sub.y-3)+'mm'
 											}">{{sub.id}}.</span>
-											<div :style="{
+											<div class="page_cell_tk_div" :style="{
 												width:sub.w+'mm',
 												height:sub.h+'mm',
 												left: sub.x+'mm',
-												top: sub.y+'mm',
+												top: sub.y+'mm'
 											}"></div>
 										</div>
 									</template>
@@ -446,18 +474,18 @@
 									</template>
 									<!-- 语文作文 -->
 									<template v-else-if='paper.sub[i].type==5'>
-										<span class="tm_id" v-if='paper.sub[i].title' style="top: 2.5mm;left:3mm">{{paper.sub[i].id}}.</span>
-										<ul class="words">
-											<li v-for='num in paper.sub[i].end' v-if='num>=paper.sub[i].start'>
-												<span v-if='num%100 == 0'>{{num}}</span>
+										<span class="page_cell_tm_id" v-if='paper.sub[i].title' style="top: 2.5mm;left:3mm">{{paper.sub[i].id}}.</span>
+										<ul class="left_div_words words" style="display: flex;flex-wrap: wrap;margin: 8mm auto;width: 170mm;border: 1px solid #333;border-right-width: 2px;border-bottom-width: 2px;">
+											<li style="box-sizing: border-box;list-style: none;width: 8.5mm;height: 8mm;border: 1px solid #333;margin-bottom: 1.5mm;border-right: none;position: relative;" class="left_div_words_li" v-for='num in paper.sub[i].end' v-if='num>=paper.sub[i].start'>
+												<span style="position: absolute;font-size: 2mm;top: 100%;left: 40%;" class="left_div_words_li_span" v-if='num%100 == 0'>{{num}}</span>
 											</li>
 										</ul>
 									</template>
 									<!-- 英语作文 -->
 									<template v-else-if='paper.sub[i].type==6'>
-										<span class="tm_id" v-if='paper.sub[i].title' style="top: 2.5mm;left:3mm">{{paper.sub[i].id}}.</span>
-										<ul class="english">
-											<li v-for='num in paper.sub[i].rows'>
+										<span class="page_cell_tm_id" v-if='paper.sub[i].title' style="top: 2.5mm;left:3mm">{{paper.sub[i].id}}.</span>
+										<ul class="english" style="padding: 0 5mm;">
+											<li v-for='num in paper.sub[i].rows' style="list-style: none;height: 10mm;border-bottom: 1px solid #333;">
 												
 											</li>
 										</ul>