月报下载问题修复

src/api/qualityMonthlyReport/index.js

@@ -194,3 +194,14 @@ export function getMonthlyReportVersion(id) {
   })
 }
 /* E 月报v2 */
+
+// 下载月报pdf
+export function downloadMonthlyReport(params) {
+  return request({
+    url: TeamManagement + `/monthlyReport/downloadMonthlyReport`,
+    timeout: '100000',
+    method: 'get',
+    responseType: 'blob',
+    params
+  })
+}

src/views/monthlyReport/index.vue

@@ -22,10 +22,11 @@
     <div v-loading="contentLoading" class="content-wrapper">
       <div class="content-reportName">
         {{ reportName }}
-        <el-button v-if="tagData.status === 20" type="text" @click="jump('report_home_Publication', '/monthlyReport/edit', { pageType: 'readAll', reportId: reportStatus.id })"> 月报发布</el-button>
+        <el-button v-if="tagData.status === 20" type="text" @click="jump('report_home_Publication', '/monthlyReport/edit', { pageType: 'readAll', reportId: reportStatus.id })">月报发布</el-button>
         <el-button v-if="tagData.status === 30" type="text" @click="jump('report_home_viewReport', '/monthlyReport/edit', { pageType: 'readAll', reportId: reportStatus.id })"> 查看完整报告</el-button>
         <!--    @click="downloadMonthlyReportFn"    -->
-        <a target="blank" :href="`${projectManagementUrl}/monthlyReport/downloadMonthlyReport?id=${reportValue}&refrash=true`" :download="`${reportName}.pdf`" style="margin-left: 10px;display: inline-block"><svg-icon icon-class="monthlyReport下载" class="icon" /></a>
+        <!-- <a target="blank" :href="`${projectManagementUrl}/monthlyReport/downloadMonthlyReport?id=${reportValue}&refrash=true`" :download="`${reportName}.pdf`" style="margin-left: 10px;display: inline-block"><svg-icon icon-class="monthlyReport下载" class="icon" /></a> -->
+        <a v-if="isShowPdfPushDow() && tagData.status === 20" @click="downloadFile" style="margin-left: 10px;display: inline-block"><svg-icon icon-class="monthlyReport下载" class="icon" /></a>
         <a v-if="isShowPdfDow()" target="blank" :href="`${projectManagementUrl}/monthlyReport/downloadMonthlyReport?id=${reportValue}`" :download="`${reportName}.pdf`" style="margin-left: 10px;display: inline-block"><svg-icon icon-class="monthlyReport下载" class="icon" /></a>
         <el-button v-if="tagData.status === 0" type="text" @click="sendConfirm(reportData)"> 发送确认</el-button>
       </div>
@@ -94,9 +95,10 @@
 import normalDialog from '@/components/dialog/normalDialog'
 import headerCom from './components/header'
 import monthlyEards from './components/monthlyEards'
-import { getAvaliableInfo, monthlyReportIndex, getReportBizInfo, createMonthlyReport } from '@/api/qualityMonthlyReport'
-import { downloadMonthlyReport } from '@/api/qualityMonthlyReport/edit'
+import { getAvaliableInfo, monthlyReportIndex, getReportBizInfo, createMonthlyReport, downloadMonthlyReport } from '@/api/qualityMonthlyReport'
+// import { downloadMonthlyReport } from '@/api/qualityMonthlyReport/edit'
 import { projectManagementUrl } from '@/apiConfig/api'
+import { Encrypt } from '@/utils/crypto-js.js'
 
 export default {
   name: '',
@@ -223,6 +225,61 @@ export default {
       this.reportName = e.reportName
       this.reportValue = e.id
       this.reportStatus = e
+    },
+    downloadFile () {
+      console.log(this.projectManagementUrl)
+      // fetch(`${this.projectManagementUrl}/monthlyReport/downloadMonthlyReport?id=${this.reportValue}&refrash=true`, {
+      //   method: 'POST',
+      //   header: {
+      //      'Content-Type': 'application/json;charset=UTF-8',
+      //      'secret': Encrypt()
+      //   }
+      // })
+      downloadMonthlyReport({
+        id: this.reportValue,
+        refrash: true
+      }).then((res) => {
+        this.convertRes2Blob(res)
+       // console.log(blob)
+       //  const link = document.createElement('a')
+       //  link.style.display = 'none'
+       //  link.setAttribute('target', 'blank')
+       //  link.href = URL.createObjectURL(blob)
+       //  document.body.appendChild(link)
+       //  link.click()
+       //  // 释放的 URL 对象以及移除 a 标签
+       //  URL.revokeObjectURL(link.href)
+       //  document.body.removeChild(link)
+      })
+    },
+    convertRes2Blob(response) {
+      // 提取文件名
+      const fileName = `${this.reportName}.pdf`
+      console.log(fileName)
+      // 将二进制流转为blob
+      const blob = new Blob([response], { type: 'application/pdf' })
+      if (typeof window.navigator.msSaveBlob !== 'undefined') {
+        // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
+        window.navigator.msSaveBlob(blob, decodeURI(`${this.reportName}.pdf`))
+      } else {
+        // 创建新的URL并指向File对象或者Blob对象的地址
+        const blobURL = window.URL.createObjectURL(blob)
+        // 创建a标签，用于跳转至下载链接
+        const tempLink = document.createElement('a')
+        tempLink.style.display = 'none'
+        tempLink.href = blobURL
+        tempLink.setAttribute('download', decodeURI(`${this.reportName}.pdf`))
+        // 兼容：某些浏览器不支持HTML5的download属性
+        if (typeof tempLink.download === 'undefined') {
+          tempLink.setAttribute('target', '_blank')
+        }
+        // 挂载a标签
+        document.body.appendChild(tempLink)
+        tempLink.click()
+        document.body.removeChild(tempLink)
+        // 释放blob URL地址
+        window.URL.revokeObjectURL(blobURL)
+      }
     }
   }
 }