解决Html报告解析及下载

src/views/spectrumAnalysis/components/Modals/ArrRrrModal.vue

@@ -2,7 +2,13 @@
   <custom-modal v-model="visible" :width="1200" :title="type == 1 || type == 3 ? 'ARR' : 'RRR'">
     <a-spin :spinning="isLoading">
       <a-textarea v-if="type == 1 || type == 3" style="font-family: 仿宋" v-model="content" :readonly="type == 1 || type == 3"></a-textarea>
-      <div v-else style="font-family: 仿宋; max-height: 680px; overflow-y: auto;" v-html="content" ></div>
+      <!-- type 2/4 为完整 HTML 报告（含 <script> 图表渲染），必须用 iframe srcdoc 才能执行脚本，v-html 无法执行 script -->
+      <iframe
+        v-else
+        :srcdoc="content"
+        frameborder="0"
+        style="width: 100%; height: 680px; border: none; background: #fff"
+      ></iframe>
     </a-spin>
     <div slot="custom-footer" style="text-align: center">
       <a-space :size="20">
@@ -17,8 +23,7 @@
 import ModalMixin from '@/mixins/ModalMixin'
 import { getAction, postAction } from '../../../../api/manage'
 import { saveAs } from 'file-saver'
-import SampleDataMixin from '../../SampleDataMixin' 
-import * as echarts from 'echarts'
+import SampleDataMixin from '../../SampleDataMixin'
 
 export default {
   mixins: [ModalMixin, SampleDataMixin],
@@ -108,40 +113,36 @@ export default {
     beforeModalOpen() {
       this.getContent()
     },
-    handleOk() {
+    // 将报告中的 echarts 外链替换为内联脚本，使导出的 HTML 为自包含文件，可离线/file:// 直接打开渲染图表
+    async inlineEcharts(html) {
+      const scriptReg = /<script[^>]*src=["'][^"']*echarts(?:\.min)?\.js["'][^>]*>\s*<\/script>/i
+      if (!scriptReg.test(html)) return html
+      try {
+        const res = await fetch('/js/echarts.min.js')
+        if (!res.ok) throw new Error('load echarts failed')
+        const source = await res.text()
+        return html.replace(scriptReg, `<script>${source}<\/script>`)
+      } catch (error) {
+        // 内联失败时回退为本地脚本引用（无外网）
+        console.error('内联 echarts 失败，回退为本地脚本引用', error)
+        return html.replace(scriptReg, '<script src="/js/echarts.min.js"><\/script>')
+      }
+    },
+    async handleOk() {
       this.fileName = ''
-      if (this.content) {
-        let name = this.newSampleData.inputFileName.split('.')[0]
-        let strData = new Blob([this.content], { type: 'text/plain;charset=utf-8' })
-        // if (this.type == 1 || this.type == 3) {
-        //   saveAs(strData, `${this.type == 1 ?'Gamma-':'Beta-'} ARR.txt`)
-        // } else {
-        //   saveAs(strData, `${this.type == 2 ?'Gamma-':'Beta-'} RRR.txt`)
-        // }
-        if (this.type == 1 || this.type == 3) {
-          saveAs(strData, `ARR_${name}.txt`)
-        } else {
-          saveAs(strData, `RRR_${name}.html`)
-        }
-        // let _this = this
-        // this.$confirm({
-        //   title: 'Please enter file name',
-        //   content: (h) => <a-input v-model={_this.fileName} />,
-        //   okText: 'Cancle',
-        //   cancelText: 'Save',
-        //   okButtonProps: { style: { backgroundColor: '#b98326', color: '#fff', borderColor: 'transparent' } },
-        //   cancelButtonProps: { style: { color: '#fff', backgroundColor: '#31aab0', borderColor: 'transparent' } },
-        //   onOk() {
-        //     console.log('Cancel')
-        //   },
-        //   onCancel() {
-        //     if (_this.fileName) {
-        //       saveAs(strData, `${_this.fileName}.txt`)
-        //     }
-        //   },
-        // })
-      } else {
+      if (!this.content) {
         this.$message.warning('No data can be saved!')
+        return
+      }
+      let name = this.newSampleData.inputFileName.split('.')[0]
+      if (this.type == 1 || this.type == 3) {
+        let strData = new Blob([this.content], { type: 'text/plain;charset=utf-8' })
+        saveAs(strData, `ARR_${name}.txt`)
+      } else {
+        // type 2/4：先内联 echarts，再以 text/html 保存为自包含报告
+        let html = await this.inlineEcharts(this.content)
+        let strData = new Blob([html], { type: 'text/html;charset=utf-8' })
+        saveAs(strData, `RRR_${name}.html`)
       }
     },
   },