前端實現文件預覽功能（png/jpg/jpeg/gif/txt/xls/xlsx/docx）

背景：前段時間項目需求，要實現文件的預覽功能，我也是耗費了一些時間去研究了下，已實現，並發布上線！目前主流格式的文件都可實現預覽，主要有 圖片文件（png/jpg/jpeg/gif）、文本文檔和office文件（excel/word/pdf）。廢話不多說，直接開始：下面的代碼我本來是寫在一起的，但是為了分開展示，邏輯部分分開寫了，具體寫入到哪里都有標注，需要那塊的，自行合並即可。

前提：點擊“預覽”按鈕，調取接口，后端返回數據為文件流

公共代碼部分：

let type = ''
const that = this
axios({
  method: 'GET',
  url: '', // 你的接口地址
  responseType: 'blob'
}).then(res => {
  // 拿到數據后的邏輯處理部分！！！
})

 一、預覽 xls/xlsx 文件 

1. 效果：

 2. 代碼實現：

<div>
  <table ref="xtable" class="xtable"></table>
</div>

import XLSX from 'xlsx' // $ npm install xlsx

 寫入：公共代碼的紅色字體部分：

let reader = new FileReader()
reader.onload = e => {
  //預處理
  var binary = ''
  var buf = new Uint8Array(e.target.result)
  var length = buf.byteLength
  for (var i = 0; i < length; i++) {
    binary += String.fromCharCode(buf[i])
  }
  //讀取excel
  const wb = XLSX.read(binary, { type: 'binary', cellDates: true })
  //抓取第一個sheet
  let wsname = wb.SheetNames[0]
  let ws = wb.Sheets[wsname]
  var csv = XLSX.utils.sheet_to_csv(ws)
  that.$refs.xtable.innerHTML = that.csv2table(csv)
}
reader.readAsArrayBuffer(res.data)

csv2table(csv) {
  var html = '<table>'
  var rows = csv.split('\n')
  rows.pop() // 最后一行沒用的
  rows.forEach(function(row, idx) {
    var columns = row.split(',')
    html += '<tr>'
    columns.forEach(function(column) {
      html +=
        `<td style="border: 1px solid #eee; padding: 10px">` +
        column +
        '</td>'
    })
    html += '</tr>'
  })
  html += '</table>'
  return html
}

二、預覽  png / gif / jpg /jpeg 文件（圖片文件）

1. 效果：

2. 代碼實現：

<div class="demo-image__preview">
  <el-image
    style="
      padding: 0 50px;
      background-size: contain;
      left: 50%;
      transform: translate(-50%);
    "
    :src="imgSrc"
    :preview-src-list="[imgSrc]"
    :z-index="999999999"
  >
  </el-image>
</div>

寫入：公共代碼的紅色字體部分：

let data = window.URL.createObjectURL(res.data)
this.imgSrc = data

三、預覽  pdf 文件

1. 效果：

2. 代碼實現：

<div class="pdf">
  <iframe
    :src="pdfSrc"
    frameborder="0"
    style="width: 1160px; height: 460px"
  ></iframe>
</div>

寫入：公共代碼的紅色字體部分：

type = 'application/pdf'
let blob = new window.Blob([res.data], { type: type })
let requestUrl = window.URL.createObjectURL(blob)
this.pdfSrc = requestUrl

四、預覽  txt 文件

1. 效果：

 2. 代碼實現：

<el-input v-model="txtPre" type="textarea" :rows="20"></el-input>

寫入：公共代碼的紅色字體部分：

let reader = new FileReader()
reader.onload = function(e) {
  that.txtPre = e.target.result
}
reader.readAsText(res.data)

五、預覽 docx 文件

 1. 效果：

2. 代碼實現：

<div
  style="width: 100%; overflow-x: auto; overflow-y: hidden"
  v-html="docContent"
></div>

import mammoth from 'mammoth' // 只能轉換.docx文檔，轉換過程中復雜樣式被忽略。（居中、首行縮進等）$npm install mammoth

寫入：公共代碼的紅色字體部分：

let reader = new FileReader()
reader.readAsArrayBuffer(res.data)
reader.onload = e => {
  var buf = new Uint8Array(e.target.result)
  mammoth
    .convertToHtml({ arrayBuffer: buf })
    .then(result => {
      if (result) {
        that.docContent = result.value
      }
    })
    .catch()
    .done()
}

目前 doc 文件的預覽暫時還沒整理出來，上面的幾種文件格式都可實現預覽，親測有效，趕緊碼起來！！！

當然實現預覽的方法也不止這些，我也沒有 一 一做過研究對比，只是列出我所使用的，只要最后能實現都是可以的 ~

整理不易，如果你覺得有用的話就點贊關注一下吧 ~