修改bug

.eslintrc

@@ -19,6 +19,9 @@
     "md5": false,
     "$": false,
     "window": false,
-    "webConf": false
+    "webConf": false,
+    "Blob": false,
+    "Image": false,
+    "MouseEvent": false
   }
 }

src/pages/shms/certs/index.vue

@@ -4,21 +4,92 @@
       <el-select @change="changes" v-model="value" size="small" clearable>
         <el-option v-for="item in options" :key="item.id" :label="item.english_name" :value="item.id"> </el-option>
       </el-select>
-      <div class="down-btn" @click="openPdf"><a></a>{{ $t('shmsLang.downloadBtn') }}</div>
-    </div>
-    <div class="certs-img" v-if="imgUrl">
-      <img :src="imgUrl" />
-      {{ pdfUrl }}
-    </div>
-    <div class="null" v-else>
-      <img src="https://webapp-pub.ezijing.com/certificate/certs-null.png" alt="" id="img" />
-      <div class="text">No certificate information currently available</div>
+      <div class="down-btn" @click="$refs.html2Pdf.generatePdf()">{{ $t('shmsLang.downloadBtn') }}</div>
     </div>
+    <template v-if="imgUrl">
+      <vue-html2pdf
+        :show-layout="false"
+        :float-layout="false"
+        :enable-download="true"
+        :preview-modal="false"
+        :manual-pagination="true"
+        :paginate-elements-by-height="500"
+        filename="file"
+        pdf-content-width="100%"
+        ref="html2Pdf"
+      >
+        <section slot="pdf-content">
+          <div class="certs-img" style="position: relative">
+            <img :src="setUrl(imgUrl)" width="100%" />
+            <span style="opacity: 0;">
+            Have ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
+            ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
+            improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
+            npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
+            ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
+            improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
+            npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
+            ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
+            improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
+            npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
+            ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
+            improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
+            npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
+            ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
+            improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
+            npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
+            ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
+            improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
+            npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
+            ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
+            improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
+            npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
+            ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
+            improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
+            npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
+            ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
+            improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
+            npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
+            ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
+            improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
+            npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
+            ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
+            improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
+            npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
+            ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
+            improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
+            npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
+            ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
+            improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
+            npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
+            ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
+            improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
+            npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
+            ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
+            improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
+            npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
+            ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
+            improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
+            npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
+            ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
+            improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve</span>
+          </div>
+        </section>
+      </vue-html2pdf>
+    </template>
+    <template v-else>
+      <div class="null">
+        <img src="https://webapp-pub.ezijing.com/certificate/certs-null.png" alt="" id="img" />
+        <div class="text">No certificate information currently available</div>
+      </div>
+    </template>
   </div>
 </template>
 <script>
+import VueHtml2pdf from 'vue-html2pdf'
 import * as api from '@/api/account.js'
 export default {
+  components: { VueHtml2pdf },
   data() {
     return {
       options: [],
@@ -33,22 +104,9 @@ export default {
     this.getCondition()
   },
   methods: {
-    downLoadImg(name, url) {
-      const image = document.getElementById('img')
-      image.setAttribute('crossOrigin', 'anonymous')
-      image.onload = function () {
-        var canvas = document.createElement('canvas')
-        canvas.width = image.width
-        canvas.height = image.height
-        var ctx = canvas.getContext('2d')
-        ctx.drawImage(image, 0, 0, image.width, image.height)
-        var url = canvas.toDataURL('image/png')
-        var a = document.createElement('a')
-        a.download = name
-        a.href = url
-        a.click()
-      }
-      image.src = url
+    setUrl(url) {
+      const newUrl = url.slice(url.indexOf('/files'), url.length)
+      return `/api/certs${newUrl}`
     },
     openPdf() {
       if (this.pdfUrl) {
@@ -85,6 +143,9 @@ export default {
   margin: 30px auto;
   background: #fff;
   padding: 30px;
+  position: fixed;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
   .form-box {
     display: flex;
     justify-content: flex-end;
@@ -105,8 +166,13 @@ export default {
   .certs-img {
     width: 670px;
     margin: 0 auto;
+    background: #fff;
     img {
-      width: 100%;
+      // position: absolute;
+      // top: 0;
+      // left: 0;
+      width: 670px;
+      display: block;
       margin-top: 20px;
     }
   }