导出pdf

src/utils/print.js

@@ -0,0 +1,76 @@
+export default function printHtml(html) {
+    let style = getStyle();
+    let container = getContainer(html);
+  
+    document.body.appendChild(style);
+    document.body.appendChild(container);
+  
+    getLoadPromise(container).then(() => {
+      window.print();
+      document.body.removeChild(style);
+      document.body.removeChild(container);
+    });
+  }
+  
+  // 设置打印样式
+  function getStyle() {
+  let styleContent = `#print-container {
+      display: none;
+  }
+  @media print {
+      body > :not(.print-container) {
+          display: none;
+      }
+      html,
+      body {
+          display: block !important;
+      }
+      #print-container {
+          display: block;
+      }
+  }`;
+    let style = document.createElement("style");
+    style.innerHTML = styleContent;
+    return style;
+  }
+  
+  // 清空打印内容
+  function cleanPrint() {
+    let div = document.getElementById('print-container')
+    if (!!div) {
+      document.querySelector('body').removeChild(div)
+    }
+  }
+  
+  // 新建DOM，将需要打印的内容填充到DOM
+  function getContainer(html) {
+    cleanPrint()
+    let container = document.createElement("div");
+    container.setAttribute("id", "print-container");
+    container.innerHTML = html;
+    return container;
+  }
+  
+  // 图片完全加载后再调用打印方法
+  function getLoadPromise(dom) {
+    let imgs = dom.querySelectorAll("img");
+    imgs = [].slice.call(imgs);
+  
+    if (imgs.length === 0) {
+      return Promise.resolve();
+    }
+  
+    let finishedCount = 0;
+    return new Promise(resolve => {
+      function check() {
+        finishedCount++;
+        if (finishedCount === imgs.length) {
+          resolve();
+        }
+      }
+      imgs.forEach(img => {
+        img.addEventListener("load", check);
+        img.addEventListener("error", check);
+      })
+    });
+  }

src/views/anscard/Index.vue

@@ -262,7 +262,7 @@
 				<el-button class="exportPdf" type="primary" size="mini" @click="handleExportPdf">导出pdf</el-button>
     </div>
 	<div class="content_div" v-loading="loading">
-		<div class="left_div" ref="contenterPdf">
+		<div class="left_div" ref="contenterPdf" id="contenterPdf">
 			<div class="page_div">
 				<div class="page_cell" v-for='(page,idx) in paper_page' :style="{
 					top: 300*idx+'mm'
@@ -606,6 +606,7 @@
 import Page from "../../components/Page";
 import Editor from "../../components/fuEditor/index1";
 import { downloadPDF } from "@/utils/htmlToPdf.js"
+import printHtml from "@/utils/print.js"
 export default {
   components: {
     Page,Editor
@@ -1263,7 +1264,9 @@ export default {
 
 		handleExportPdf(){
 			this.loading = true
-			downloadPDF(this.$refs.contenterPdf)
+			// downloadPDF(this.$refs.contenterPdf)
+			console.log(this.$refs.contenterPdf)
+			printHtml(document.getElementById("contenterPdf").innerHTML)
 			this.loading = false
 		}
   },