diff --git a/jero-web/package.json b/jero-web/package.json
index da4e81b29..895530955 100644
--- a/jero-web/package.json
+++ b/jero-web/package.json
@@ -28,6 +28,7 @@
     "jsencrypt": "^3.0.0-rc.1",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
+    "mammoth": "^1.4.21",
     "md5": "^2.2.1",
     "nprogress": "^0.2.0",
     "tinymce": "^5.3.2",
diff --git a/jero-web/src/views/documentTools/documentTranslation/components/documentTranslationResults.vue b/jero-web/src/views/documentTools/documentTranslation/components/documentTranslationResults.vue
index ae67c40a1..a1b5d4d06 100644
--- a/jero-web/src/views/documentTools/documentTranslation/components/documentTranslationResults.vue
+++ b/jero-web/src/views/documentTools/documentTranslation/components/documentTranslationResults.vue
@@ -18,18 +18,22 @@
             <div class="detail-text">
               <iframe :src="detailUrlLeft"
                       ref="iframeLeft"
+                      @load="detailUrlLeftLoad"
                       sandbox="allow-same-origin allow-scripts"
                       id="iframe-left"
                       class="detail-text-iframe" frameborder="0"></iframe>
             </div>
+            <JLoading :loading="loadingLeft">{{$t('dataLoading')}}</JLoading>
           </div>
           <div class="detail-content-right">
             <div class="detail-text-top">
               {{$t('translatedText')}}
             </div>
             <div class="detail-text">
-              <iframe :src="detailUrlRight" class="detail-text-iframe" frameborder="0"></iframe>
+              <iframe :src="detailUrlRight" @load="detailUrlrightLoad" class="detail-text-iframe"
+                      frameborder="0"></iframe>
             </div>
+            <JLoading :loading="loadingRight">{{$t('dataLoading')}}</JLoading>
           </div>
         </div>
       </div>
@@ -39,6 +43,10 @@
 
 <script>
   import { Base64 } from 'js-base64'
+  import mammoth from 'mammoth'
+  import axios from 'axios'
+  import { ACCESS_TOKEN } from '@/store/mutation-types'
+  import Vue from 'vue'
 
   export default {
     name: 'documentTranslationResults',
@@ -46,6 +54,8 @@
       return {
         detailUrlLeft: '',
         detailUrlRight: '',
+        loadingLeft: false,
+        loadingRight: false,
         downLoadFileUrl: window._CONFIG['domianPreviewURL'] + '/sys/common/download',
         fileQuery: {}
       }
@@ -53,13 +63,6 @@
     mounted() {
       this.fileQuery = this.$route.query
       this.onlinePreview()
-      setTimeout(() => {
-        this.$nextTick(() => {
-          this.$refs.iframeLeft.contentWindow.document.body.style = 'background-color:#fff'
-          console.log(this.$refs.iframeLeft.contentWindow.document.body.style.backgroundColor)
-        })
-      }, 2000)
-
     },
     methods: {
       Fallback() {
@@ -67,13 +70,57 @@
           path: '/documentTranslation'
         })
       },
+      detailUrlLeftLoad() {
+        this.loadingLeft = false
+      },
+      detailUrlrightLoad() {
+        this.loadingRight = false
+      },
       onlinePreview() {
         let fileName = this.fileQuery.fileName
         let index1 = fileName.lastIndexOf('.')
         let index2 = fileName.length
         let fileSuffix = fileName.substring(index1, index2)
+        this.loadingLeft = true
+        this.loadingRight = true
+        // this.readExcelFromRemoteFileLeft(this.downLoadFileUrl + '/' + this.fileQuery.sourceFileId + fileSuffix)
+        // this.readExcelFromRemoteFileRight(this.downLoadFileUrl + '/' + this.fileQuery.targetFileId + fileSuffix)
         this.detailUrlLeft = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + this.fileQuery.sourceFileId + fileSuffix)
         this.detailUrlRight = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + this.fileQuery.targetFileId + fileSuffix)
+      },
+      readExcelFromRemoteFileLeft: function(url) {
+        var vm = this
+        var xhr = new XMLHttpRequest()
+        xhr.open('get', url, true)
+        xhr.responseType = 'arraybuffer'
+        xhr.onload = function() {
+          if (xhr.status == 200) {
+            mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
+              .then(function(resultObject) {
+                vm.$nextTick(() => {
+                  vm.detailUrlLeft = resultObject.value
+                })
+              })
+          }
+        }
+        xhr.send()
+      },
+      readExcelFromRemoteFileRight: function(url) {
+        var vm = this
+        var xhr = new XMLHttpRequest()
+        xhr.open('get', url, true)
+        xhr.responseType = 'arraybuffer'
+        xhr.onload = function() {
+          if (xhr.status == 200) {
+            mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
+              .then(function(resultObject) {
+                vm.$nextTick(() => {
+                  vm.detailUrlRight = resultObject.value
+                })
+              })
+          }
+        }
+        xhr.send()
       }
     }
   }
@@ -126,9 +173,11 @@
     padding: 24px 32px;
     box-sizing: border-box;
     overflow: auto;
+    position: relative;
   }
 
   .detail-content-right {
+    position: relative;
     float: left;
     width: calc(50% - 12px);
     padding: 24px 32px;