前端小功能：Word、PDF、Excel、log日志文檔vue預覽。

前端小功能：Word、PDF、Excel文檔vue預覽；log日志文件預覽。

要工具不區分框架，把FileReader()文件處理函數可以細細品讀一下。

可以參考https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader文檔

同時可以了解一下， Blob ArrayBuffer,等數據格式，ajax如何獲取Blod的基本操作。

需要處理文件，必須緩存文件，緩存文件必須解決跨域問題。

js-word文檔預覽。

如果你的文檔都是公網可以訪問的，可以用微軟提供的在線預覽

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc' width='1366px' height='623px' frameborder='0'>
This is an embedded 
<a target='_blank' href='http://office.com'>Microsoft Office</a> 
document, powered by 
<a target='_blank' href='http://office.com/webapps'>Office Online</a>
</iframe>

如果是本地文件，或者是內網文件則可以使用以下方法：

PDF：Vue-pdf

Word: mammoth.js

Excel: SheetJS

1. PDF文檔預覽示例：

npm install --save vue-pdf

PDF.vue

<template>
    <div>
          <pdf ref="pdf" :src="pdfUrl" style="width: 100%;" />
    </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
    data(){
        return: {
            pdfUrl: '',
        }
    }
    created() {
       const path = 'test.pdf'// 你獲取到的pdf路徑
       // pdf.createLoadingTask解決文件件跨域問題
       this.pdfUrl = pdf.createLoadingTask(path)
  },
}
</script>        

2. Word文檔預覽示例：

npm install --save mammoth

中文文檔：https://www.kutu66.com/GitHub/article_106969#1-yfsys

mammoth.convertToHtml(input, options)

將源文檔轉換為 HTML。

• input: 描述源文檔的對象。 在 node.js 上，支持以下輸入：

  • {path: path}，其中 path 是. docx 文件的路徑。
  • {buffer: buffer}，其中 buffer 是包含. docx 文件的node.js 緩沖區。

  在瀏覽器中，支持以下輸入：

  • {arrayBuffer: arrayBuffer}，其中 arrayBuffer 是包含. docx 文件的array 緩沖區。

options ( 可選): 轉換的選項。 

瀏覽器表示支持arrayBuffer

轉換也僅僅支持docx

具體巧妙用法就請多自行去看文檔。

Word.vue

<template>
    <div>
          <input id="document" type="file">
          <div v-html="vHtml" />
    </div>
</template>
<script>
import mammoth from 'mammoth'
export default {
    data(){
        return: {
            vHtml: '',
        }
    }
    mounted() {
 document.getElementById('document').addEventListener('change', this.uploading, false)
  },
methods: {
    uploading(event) {
      const that = this
      var file = event.target.files[0] // 獲取文件
      var reader = new FileReader()
      reader.readAsArrayBuffer(file)
      reader.onload = function(e) {
        const buffer = e.target.result // 此時是arraybuffer類型
        mammoth.convertToHtml({ arrayBuffer: buffer }).then((result) => {
          console.log(result)
          that.vHtml = result.value
        }).done()
      }
    },
}
}
</script>        

3. Excel文檔預覽示例

npm install --save xlsx

中文文檔：https://github.com/rockboom/SheetJS-docs-zh-CN

excel.vue

<template>
  <div id="table">

    <div class="tab">
      <el-radio-group v-model="cardActive">
        <el-radio-button v-for="(item,index) in card" :label="item" :key="index" @click="chooseTable(item)"></el-radio-button>
      </el-radio-group>
    </div>

     <el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        v-for="(value,key,index) in tableData[2]"
        :key="index"
        :prop="key"
        :label="key">
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
  data () {
    return {
      tableData: [
        {
          '接口大類': '基礎信息',
          '接口類別': '人防部門',
          '接口類別ID': 'O2_001'
        },
        {
          '接口大類': '基礎信息',
          '接口類別': '人防部門',
          '接口類別ID': 'O2_001'
        }
      ],
      card: [],
      cardActive: '',
      workbook: {}

    }
  },
  watch: {
    cardActive (ov, nv) {
      this.getTable(ov)
    }
  },
  mounted () {
    this.readWorkbookFromRemoteFile('/static/o2.xlsx')
  },
  methods: {
    readWorkbookFromRemoteFile: function (url) {
      var xhr = new XMLHttpRequest()
      xhr.open('get', url, true)
      xhr.responseType = 'arraybuffer'
      let _this = this
      xhr.onload = function (e) {
        if (xhr.status === 200) {
          var data = new Uint8Array(xhr.response)
          var workbook = XLSX.read(data, {type: 'array'})
          console.log(workbook)

          var sheetNames = workbook.SheetNames // 工作表名稱集合
          _this.workbook = workbook
          _this.card = sheetNames
          _this.cardActive = sheetNames[0]
          _this.getTable(sheetNames[0])
        }
      }
      xhr.send()
    },
    getTable (sheetName) {
      console.log(111111111111)
      console.log(sheetName)
      var worksheet = this.workbook.Sheets[sheetName]
      this.tableData = XLSX.utils.sheet_to_json(worksheet)
      console.log(this.tableData)
    }
  }
}
</script>

<style lang="stylus" scoped>
#table
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
  border 1px solid #ebebeb
  padding 20px
  width 80%
  margin 20px auto
  border-shadow 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5)
  border-radius 10px
  overflow scroll
  height 100%
  .tab
    margin 0 0 20px 0
    display flex
    flex-direction row
</style>

<style scoped>
.is-active{
  background-color:#409EFF
}
span{
  background-color:red
}

</style>

注: 文檔使用絕對路徑的時候，先解決跨域的問題。

4. log日志文件預覽
word等文檔顯示，部分樣式需要一些基礎的庫來提供支持，對於log日志形式搜索了一下，基本沒有相關的庫，一般情況下，如果log是后台生成的，可以讓后台直接轉json，每一行為一個list，前端直接循環列表顯示就OK。

遇到特殊情況，log並非后台生成，第三方平台生成，不經過后台服務的時候，轉換json可以就無法實現了。

log前端只能拿到URL的情況，那就直接轉文本顯示就好了。

非常簡單：獲取Blob，轉換text文本就可以直接顯示。

　　// 創建XMLHttpRequest對象
    let xhr = new XMLHttpRequest()
    // 配置請求方式、請求地址以及是否同步
    xhr.open('GET', baseUrl, true)
    // 設置請求結果類型為blob
    xhr.responseType = 'blob'
    // 請求成功回調函數
    xhr.onload = function(option:any) {
      let res = option.target
      if (res.status === 200) {
        let blob = res.response
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = function () {
          let data:any = reader.result
          setLogHtml(data)
        }
        if(tip){
          message.success({
            content: '刷新完成'
          })
        }
      }else{
        message.error({
          content: '服務異常'
        })
        setLogHtml('#暫無日志詳情')
      }
    }
    xhr.send()

文本可以直接展示的，可能不太雅觀，部分換行無法體現。因為是文本，只有給一個textarea，應該就可以解決部分不換行的問題。

如果能力有余，用個代碼編輯器，那就很完美了。https://monaco-react.surenatoyan.com/

 

 

沒有終點，沒有彼岸，堅持就好，願歲月如初