vue實現文件預覽

方法一：【iframe】

所有瀏覽器都支持 < iframe > 標簽，直接將src設置為指定的PDF文件就可以預覽了。

html中直接使用iframe，將src設置為文件url，用js寫文件變量即可。（這里用css設置外層盒子大小）

 代碼：<iframe :src="url"  width="100%" height="100%" border="0"></iframe>

js：

 

當然也可以不搭配js，直接將src設置為文件路徑：

 代碼：<iframe src="file:///E:/測試文檔/test.pdf"  width="100%" height="100%" border="0"></iframe>

當然，最后實現效果都是一致：

方法二：【embed】

< embed > 標簽定義嵌入的內容，比如插件。在HTML5中這個標簽有4個屬性：

 與iframe相同，將src設置為文件路徑即可

html:

 代碼：<embed :src="url" type="application/pdf" width="100%" height="100%">

js：與上述一致

 最后實現效果與iframe一致，但是需要注意的是這個標簽不能提供回退方案，與< iframe > < / iframe > 
不同，這個標簽是自閉合的的，也就是說如果瀏覽器不支持PDF的嵌入，那么這個標簽的內容什么都看不到。

注意：以上兩種方法不適用於word、ppt、xls文件，都會變成超鏈接下載文件。而如果要設置微軟文件的預覽，可以使用微軟的在線預覽功能

 方法三：【微軟在線預覽】

word、ppt、xls文件實現在線預覽的方式比較簡單可以直接通過調用微軟的在線預覽功能實現 (預覽前提：資源必須是公共可訪問的

src就是要實現預覽的文件地址 具體文檔看這微軟接口文檔

“https://view.officeapps.live.com/op/view.aspx?src=”的后面拼上你的服務器word文件地址

html:

 代碼：<div id="iframe"></div>

js:

 

 代碼：

handlePreviewFile (file) { // 預覽文件

      this.currentChooseFile = file

      console.log('handlePreviewFile', file)

      // console.log('this.fielList', this.fileList)

      // 移出已顯示iframe

      const dom = document.getElementById('iframe')

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

      // 獲取文件下載地址

      GetDownUrl({ id: this.currentChooseFile.fileId }).then(res => {

        this.src += encodeURIComponent(res.result)

        if (!this.previewLoading) {

          if (dom.childNodes[0]) { // 如果已有標簽，則改變該標簽的url

            // dom.removeChild(dom.childNodes[0])

            setTimeout(() => {

              dom.childNodes[0].src = this.src

            }, 100)

          } else {

            this.createIframe()

          }

        }

        console.log(res)

      }).catch(() => {

        this.$message.error('獲取失敗')

      })

    },

實現效果：

 

 

注意：

1.最好通過encode處理一下url地址，可以使用encodeURIComponent()方法

2.這個文件的服務器地址必須是域名，不可以使用ip地址，且端口需要是80；（這也是不太方便的一個限制條件，第三方的一般無此限制）