fix: 解决pdf下载问题

248f7746 · lihuihui · 88eaadc9 · 248f7746 · 248f7746 · 248f7746
--- a/.eslintrc
+++ b/.eslintrc
@@ -22,6 +22,7 @@
    "webConf": false,
    "Blob": false,
    "Image": false,
-    "MouseEvent": false
+    "MouseEvent": false,
+    "XMLHttpRequest": false
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
        "element-ui": "^2.13.2",
        "html2canvas": "*",
        "js-cookie": "^2.2.1",
+        "js-file-download": "^0.4.12",
        "jspdf": "^2.3.1",
        "lodash": "^4.17.20",
        "vue": "^2.6.12",
@@ -7532,6 +7533,11 @@
      "resolved": "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz",
      "integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg="
    },
+    "node_modules/js-file-download": {
+      "version": "0.4.12",
+      "resolved": "https://registry.npmjs.org/js-file-download/-/js-file-download-0.4.12.tgz",
+      "integrity": "sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg=="
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npm.taobao.org/js-tokens/download/js-tokens-4.0.0.tgz?cache=0&sync_timestamp=1586796305651&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-tokens%2Fdownload%2Fjs-tokens-4.0.0.tgz",
@@ -20279,6 +20285,11 @@
      "resolved": "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz",
      "integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg="
    },
+    "js-file-download": {
+      "version": "0.4.12",
+      "resolved": "https://registry.npmjs.org/js-file-download/-/js-file-download-0.4.12.tgz",
+      "integrity": "sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg=="
+    },
    "js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npm.taobao.org/js-tokens/download/js-tokens-4.0.0.tgz?cache=0&sync_timestamp=1586796305651&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-tokens%2Fdownload%2Fjs-tokens-4.0.0.tgz",

--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
    "element-ui": "^2.13.2",
    "html2canvas": "*",
    "js-cookie": "^2.2.1",
+    "js-file-download": "^0.4.12",
    "jspdf": "^2.3.1",
    "lodash": "^4.17.20",
    "vue": "^2.6.12",

--- a/src/pages/shms/certs/index.vue
+++ b/src/pages/shms/certs/index.vue
@@ -7,81 +7,9 @@
      <div class="down-btn" @click="downPdf">{{ $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"
-        pdf-orientation="landscape"
-        :paginate-elements-by-height="1500"
-        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 ideaimprove 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 improveimprove
-              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 improves 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</span
-            >
+      <div class="certs-img">
+        <img :src="setUrl(imgUrl)" />
      </div>
-        </section>
-      </vue-html2pdf>
    </template>
    <template v-else>
      <div class="null">
@@ -92,10 +20,10 @@
  </div>
 </template>
 <script>
-import VueHtml2pdf from 'vue-html2pdf'
 import * as api from '@/api/account.js'
+import httpRequest from '@/utils/axios'
+import fileDownload from 'js-file-download'
 export default {
-  components: { VueHtml2pdf },
  data() {
    return {
      options: [],
@@ -121,7 +49,7 @@ export default {
    },
    downPdf() {
      if (this.pdfUrl) {
-        this.$refs.html2Pdf.generatePdf()
+        this.download()
      } else {
        this.$message({
          message: 'No certificate, unable to download',
@@ -129,14 +57,26 @@ export default {
        })
      }
    },
+    download() {
+      const requestUrl = this.pdfUrl.substring(this.pdfUrl.indexOf('/files/'), this.pdfUrl.length)
+      httpRequest
+        .get(`/api/certs${requestUrl}`, {
+          responseType: 'blob'
+        })
+        .then(res => {
+          fileDownload(res, 'filename.pdf')
+          console.log(res)
+        })
+    },
    changes() {
      this.imgUrl = ''
      this.pdfUrl = ''
      api
        .getCerts({ project_id: this.value })
        .then(response => {
-          this.imgUrl = response.data.image_url
-          this.pdfUrl = response.data.pdf_url
+          const data = response.data
+          this.imgUrl = data.image_url
+          this.pdfUrl = data.pdf_url
        })
        .finally(() => {})
    },
@@ -144,8 +84,9 @@ export default {
      api
        .getCondition()
        .then(response => {
-          this.options = response.data.get_certificate_info.project_map
-          this.value = response.data.get_certificate_info.project_map[0].id
+          const data = response.data.get_certificate_info
+          this.options = data.project_map
+          this.value = data.project_map[0].id
          this.changes()
        })
        .finally(() => {})
@@ -184,9 +125,10 @@ export default {
    margin: 0 auto;
    background: #fff;
    img {
-      position: absolute;
-      top: 0;
-      left: 0;
+      // position: absolute;
+      // top: 0;
+      // left: 0;
+      width: 100%;
      display: block;
      margin-top: 20px;
    }