前端實現文件線上預覽txt，pdf，doc，xls，ppt幾種格式

做法就是使用iframe標簽

1.text，pdf的文件預覽

<iframe class="filename" :src="文件的地址" width='100%' height='600' frameborder='1' ></iframe>

2.doc,xls,ppt等office的預覽

<iframe class="filename"  :src="https://view.officeapps.live.com/op/view.aspx?src=後面是文件的地址" width='100%' height='600' frameborder='1' ></iframe>

3.我們可以看出，差別隻有src的屬性，所以要設置文件預覽同時可以滿足txt，pdf，和office類型格式的文件，只需要配置src就可以，根據文件尾碼判斷如果是office的類型就在url前加上

https://view.officeapps.live.com/op/view.aspx?src=

for (let i=0;i<this.data.quoteInfo.goodsList.length;i++) {
    for(let j=0;j<this.data.quoteInfo.goodsList[i].goodsAttachments.fileAttachmentList.length;j++){
      let value = this.data.quoteInfo.goodsList[i].goodsAttachments.fileAttachmentList[j]
      let valueFormat = value.name.substring(value.name.lastIndexOf('.') + 1)//前面邏輯不用看，至此拿到文件尾碼
      if(valueFormat=='doc'|| valueFormat=='docx'|| valueFormat=='xls' || valueFormat=='xlsx') {//根據尾碼判斷如果是office格式的，做路徑的拼接，拼接微軟線上預覽地址即可
      要預覽的文件地址='https://view.officeapps.live.com/op/view.aspx?src='+要預覽的文件地址
    }
  }
}

4.iframe 的寬高邊框都是可配的，:width=寬的變數；:height=高的變數；:frameborder=邊框的變數，no則是無邊框

這些格式之外的文件沒有辦法預覽如RAR，ZIP，會直接提醒你下載，基本完成預覽的需求，重點就是預覽文件前，把office文件的路徑配置下，使用微軟提供的線上office預覽