vue使用Office?Web實(shí)現(xiàn)線上文件預(yù)覽

更新時(shí)間：2022年07月14日 15:27:59 作者：青煙小生

這篇文章主要為大家介紹了vue使用微軟的開發(fā)接口Office?Web,實(shí)現(xiàn)線上文件預(yù)覽,預(yù)覽word，excel，pptx，pdf文件,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

我們在瀏覽器閱讀word，excel，pptx的offic文件，可以使用微軟的開發(fā)接口，一個(gè)閱讀器Office Web

什么是 Office Web 查看器？

它是一種創(chuàng)建 Office Web Viewer 鏈接的服務(wù)。Office Web Viewer 鏈接可在瀏覽器中打開 Word、PowerPoint 或 Excel 文件，否則這些文件將被下載。您可以輕松地將下載鏈接轉(zhuǎn)換為 Office Web Viewer 鏈接以在您的網(wǎng)站或博客中使用（例如，食譜、照片幻燈片、菜單或預(yù)算模板）。

Office Web Viewer 的一些優(yōu)點(diǎn)包括：

您無需為 Web 轉(zhuǎn)換 Office 文件（例如，PDF、HTML）。
任何人都可以從您的網(wǎng)站或博客查看 Office 文件，即使他們沒有 Office。
它會密切關(guān)注您的網(wǎng)站或博客，因?yàn)樽x者無需下載文件，他們就可以留在瀏覽器中。
一個(gè)鏈接適用于計(jì)算機(jī)、平板電腦和手機(jī)。

vue預(yù)覽word，excel，pptx，pdf文件

1、做word，excel，pptx的預(yù)覽，要先確定文件路徑訪問是通過域名的url來預(yù)覽，不可以通過IP的url來訪問

先把文件路徑的url進(jìn)行url編碼（encodeURIComponent）

let router = 'https://aaaaaa.com/file/download?filename=file.obj_id'  //文件路徑
let url = encodeURIComponent(routeUrl)

然后用Office Web Viewer的路徑接口

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

把兩個(gè)拼接在一起

let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+url
window.open(officeUrl,'_target')

這樣就可以預(yù)覽word，excel，pptx文件了

完整的代碼

let routeUrl = 'https://aaaaaa.com/file/download?filename=file.obj_id'
let url = encodeURIComponent(routeUrl)
let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+url
window.open(officeUrl,'_target')

2、pdf文件預(yù)覽

下載好pdf.js(下載地址在下面)，放到static的目錄下面

網(wǎng)站鏈接 http://mozilla.github.io/pdf.js/getting_started/#download

然后

<div style="height:800px;">
  <iframe :src="pdfSrc" width="100%" height="100%"></iframe>
</div>

getSeePdf(file){
      this.pdffile=file
      let routeUrl = '文件地址url';
      let pSrc = routeUrl + '?r=' + new Date();
      this.pdfSrc = 'static/pdf/web/viewer.html?file=' + encodeURIComponent(pSrc) + '.pdf';
    },

更多的可以了解下微軟的這個(gè)查看器的官網(wǎng)

以上就是vue使用Office Web實(shí)現(xiàn)線上文件預(yù)覽的詳細(xì)內(nèi)容，更多關(guān)于vue Office Web文件預(yù)覽的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: