词汇卡片打印效果实现

src/views/wordcard/cread.vue

@@ -129,25 +129,43 @@
         <div @click="previewEvent">
           <img src="../../assets/teacherdev/word-eyes.png" alt="" /> 预览
         </div>
-        <div @click="download('pdfDom')">
+        <div @click="download2('pdfDom')">
           <img src="../../assets/teacherdev/word-download.png" alt="" /> 下载
         </div>
       </div>
+      <div class="word_main" v-if="writeTableData && writeTableData.result">
+        <div
+          class="word_main_table"
+          v-for="(itemT, indexT) in writeTableData.result"
+          :key="indexT"
+        >
+          <writeTable
+            :type="typeIndex"
+            :dataConfig="writeTableData"
+            :data="itemT"
+            :pageNumber="indexT + 1"
+            :totalNumber="writeTableData.result.length"
+          />
+        </div>
+      </div>
       <div
+        style="display: none"
         class="word_main"
         id="pdfDom"
+        ref="pdfDom"
         v-if="writeTableData && writeTableData.result"
       >
         <div
-          class="word_main_table"
+          class="none_word_main_table"
           v-for="(itemT, indexT) in writeTableData.result"
           :key="indexT"
         >
           <writeTable
-            :type="typeIndex"
+            :none="true"
+            :type="'none' + typeIndex"
             :dataConfig="writeTableData"
             :data="itemT"
-            :pageNumber="indexT + 1"
+            :pageNumber="' ' + (indexT + 1)"
             :totalNumber="writeTableData.result.length"
           />
         </div>
@@ -211,6 +229,9 @@ import writeTable from "./writeTable.vue";
 import html2canvas from "html2canvas";
 import { jsPDF } from "jspdf";
 import canvg from "canvg";
+
+import FileSaver from "file-saver";
+import htmlDocx from "html-docx-js/dist/html-docx";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
@@ -386,17 +407,20 @@ export default {
       });
     },
     download2() {
-      // 1
-      // this.getPdf("#pdfDom")
-      // 2
-      var pdf = new jsPDF("", "pt", "a4");
-      pdf.html(document.getElementById("pdfDom"), {
-        // 只有 addFileToVFS 方法添加的字体才能用于 .html 方法
-        callback: function (pdf) {
-          //pdf.output('datauristring');// 渲染 pdf
-          pdf.save("A4.pdf"); //自动下载
-        },
-      });
+      var printBox = document.getElementById("pdfDom");
+      // var printBox = document.getElementsByClassName("pdfDom")[0];
+      //拿到打印的区域的html内容
+      var newContent = printBox.innerHTML;
+      //将旧的页面储存起来，当打印完成后返给给页面。
+      var oldContent = document.body.innerHTML;
+      //赋值给body
+      document.body.innerHTML = newContent;
+      //执行window.print打印功能
+      window.print();
+      // 重新加载页面，以刷新数据。以防打印完之后，页面不能操作的问题
+      window.location.reload();
+      document.body.innerHTML = oldContent;
+      return false;
     },
     changepreviewIndex(type) {
       if (type == "add") {

src/views/wordcard/writeTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="writeTable" v-if="data">
+  <div :class="[none ? 'none_writeTable' : '', 'writeTable']" v-if="data">
     <div class="writeTop">
       <div
         class="writeTop-row"
@@ -173,7 +173,7 @@ export default {
     Strockred,
     FreewriteLettle,
   },
-  props: ["dataConfig", "data", "pageNumber", "totalNumber", "type"],
+  props: ["dataConfig", "data", "pageNumber", "totalNumber", "type", "none"],
   data() {
     //这里存放数据
     return {
@@ -236,11 +236,23 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.none_writeTable {
+  width: 794px !important;
+  height: 1157px !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  .writeTop {
+    padding-top: 0;
+  }
+}
 .writeTable {
   background: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0.08);
   width: 595px;
   height: 842px;
+
   box-sizing: border-box;
   .writeTop {
     height: 732px;