diff --git a/src/views/spectrumAnalysis/components/Modals/ArrRrrModal.vue b/src/views/spectrumAnalysis/components/Modals/ArrRrrModal.vue
index faa0b62..bf9cf12 100644
--- a/src/views/spectrumAnalysis/components/Modals/ArrRrrModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/ArrRrrModal.vue
@@ -1,7 +1,7 @@
 <template>
   <custom-modal v-model="visible" :width="1200" :title="type == 1 || type == 3 ? 'ARR' : 'RRR'">
     <a-spin :spinning="isLoading">
-      <pre>{{ content }}</pre>
+      <a-textarea v-model="content" :readonly="type == 1 || type == 2"></a-textarea>
     </a-spin>
     <div slot="custom-footer" style="text-align: center">
       <a-space :size="20">
@@ -145,7 +145,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-pre {
+textarea {
   height: calc(100vh - 350px);
   padding: 5px;
   overflow: auto;
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BGLogViewer.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BGLogViewer.vue
index 6c4be6f..ef71172 100644
--- a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BGLogViewer.vue
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BGLogViewer.vue
@@ -1,7 +1,7 @@
 <template>
-  <custom-modal v-model="visible" title="BetaGamma Analyser Log" :width="800">
+  <custom-modal v-model="visible" title="BetaGamma Analyser Log" :width="1200">
     <a-spin :spinning="isLoading">
-      <a-textarea :rows="20" v-model="content"></a-textarea>
+      <a-textarea v-model="content"></a-textarea>
     </a-spin>
     <div slot="custom-footer">
       <a-button type="primary" @click="handleClick">Save As</a-button>
@@ -72,4 +72,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
+textarea {
+  height: calc(100vh - 350px);
+  padding: 5px;
+  overflow: auto;
+  background-color: #285367;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSampleInfomationModal.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSampleInfomationModal.vue
index 9c588b1..425f174 100644
--- a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSampleInfomationModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSampleInfomationModal.vue
@@ -1,7 +1,7 @@
 <template>
   <custom-modal v-model="visible" :width="1000" title="View Sample Infomation">
     <a-spin :spinning="isLoading">
-      <pre>{{ content }}</pre>
+      <a-textarea v-model="content"></a-textarea>
     </a-spin>
 
     <div slot="custom-footer">
@@ -144,8 +144,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-pre {
-  height: 450px;
+textarea {
+  height: calc(100vh - 350px);
   padding: 5px;
   overflow: auto;
   background-color: #285367;
diff --git a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSpectrumModal.vue b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSpectrumModal.vue
index 7851439..d8c967f 100644
--- a/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSpectrumModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaSpectrumModal.vue
@@ -3,16 +3,16 @@
     <a-spin :spinning="isLoading">
       <a-tabs :animated="false" @change="handleTabChange">
         <a-tab-pane tab="Sample Spectrum" :key="1">
-          <pre>{{ content.sample && content.sample.join('\n') }}</pre>
+          <a-textarea v-model="content.sample"></a-textarea>
         </a-tab-pane>
         <a-tab-pane tab="GasBg Spectrum" :key="2">
-          <pre>{{ content.gasBg && content.gasBg.join('\n') }}</pre>
+          <a-textarea v-model="content.gasBg"></a-textarea>
         </a-tab-pane>
         <a-tab-pane tab="DetBg Spectrum" :key="3">
-          <pre>{{ content.detBg && content.detBg.join('\n') }}</pre>
+          <a-textarea v-model="content.detBg"></a-textarea>
         </a-tab-pane>
         <a-tab-pane tab="QC Spectrum" :key="4">
-          <pre>{{ content.qc && content.qc.join('\n') }}</pre>
+          <a-textarea v-model="content.qc"></a-textarea>
         </a-tab-pane>
       </a-tabs>
     </a-spin>
@@ -34,10 +34,10 @@ export default {
   data() {
     return {
       content: {
-        detBg: [],
-        gasBg: [],
-        qc: [],
-        sample: [],
+        detBg: '',
+        gasBg: '',
+        qc: '',
+        sample: '',
       },
       isLoading: true,
       fileName: '',
@@ -66,6 +66,10 @@ export default {
         })
         if (success) {
           if (result) {
+            const keys = ['sample', 'gasBg', 'detBg', 'qc']
+            keys.forEach(key => {
+              result[key] = result[key].join('\n')
+            })
             this.content = result
           }
         } else {
@@ -89,13 +93,13 @@ export default {
       this.fileName = ''
       let text = ''
       if (this.currTab == 1) {
-        text = this.content.sample.join('\n')
+        text = this.content.sample
       } else if (this.currTab == 2) {
-        text = this.content.gasBg.join('\n')
+        text = this.content.gasBg
       } else if (this.currTab == 3) {
-        text = this.content.detBg.join('\n')
+        text = this.content.detBg
       } else if (this.currTab == 4) {
-        text = this.content.qc.join('\n')
+        text = this.content.qc
       }
       if (text) {
         let name = this.newSampleData.inputFileName.split('.')[0]
@@ -136,8 +140,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-pre {
-  height: 450px;
+textarea {
+  height: calc(100vh - 350px);
   padding: 5px;
   overflow: auto;
   background-color: #285367;