快捷導(dǎo)航

詳解vue2如何實(shí)現(xiàn)點(diǎn)擊預(yù)覽本地文件

更新時(shí)間：2024年04月24日 11:34:08 作者：楊家胡口

這篇文章主要為大家詳細(xì)介紹了vue2如何實(shí)現(xiàn)點(diǎn)擊預(yù)覽本地的word、excle、pdf文件,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

安裝

考慮到三個(gè)包加一起的話會(huì)比較大，所以拆成了三個(gè)包，需要哪個(gè)自行安裝即可。

//docx文檔預(yù)覽組件
npm install @vue-office/docx
 
//excel文檔預(yù)覽組件
npm install @vue-office/excel
 
//pdf文檔預(yù)覽組件
npm install @vue-office/pdf
npm i --save @vue/composition-api@1.3.0

使用示例

docx文檔的預(yù)覽

<template>
  <vue-office-docx :src="docx" @rendered="rendered"/>
</template>
 
<script>
//引入VueOfficeDocx組件
import VueOfficeDocx from '@vue-office/docx'
 
export default {
  components:{
    VueOfficeDocx
  },
  data(){
    return {
      docx: 'http://static.shanhuxueyuan.com/test6.docx' //設(shè)置文檔地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}
</script>

excel文檔預(yù)覽

<template>
  <vue-office-excel :src="excel" @rendered="rendered"/>
</template>
 
<script>
//引入VueOfficeExcel組件
import VueOfficeExcel from '@vue-office/excel'
//引入相關(guān)樣式
import '@vue-office/excel/lib/index.css'
 
export default {
  components:{
    VueOfficeExcel
  },
  data(){
    return {
      excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//設(shè)置文檔地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}
</script>

pdf文檔預(yù)覽

<template>
  <vue-office-pdf :src="pdf" @rendered="rendered"/>
</template>
 
<script>
//引入VueOfficePdf組件
import VueOfficePdf from '@vue-office/pdf'
 
export default {
  components:{
    VueOfficePdf
  },
  data(){
    return {
      pdf: 'http://static.shanhuxueyuan.com/test.pdf' //設(shè)置文檔地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}
</script>

到此這篇關(guān)于詳解vue2如何實(shí)現(xiàn)點(diǎn)擊預(yù)覽本地文件的文章就介紹到這了,更多相關(guān)vue2預(yù)覽本地文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vuex 如何動(dòng)態(tài)引入 store modules
這篇文章主要介紹了vuex 如何動(dòng)態(tài)引入 store modules，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
elementUI el-form 數(shù)據(jù)無(wú)法賦值且不報(bào)錯(cuò)解決方法
本文主要介紹了elementUI el-form 數(shù)據(jù)無(wú)法賦值且不報(bào)錯(cuò)解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-12-12
vue獲取后臺(tái)json字符串方式
這篇文章主要介紹了vue獲取后臺(tái)json字符串方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Electron+Vue實(shí)現(xiàn)截屏功能的兩種方式
在Electron環(huán)境下,截屏功能相對(duì)強(qiáng)大,可以通過(guò)desktopCapturer獲取應(yīng)用視頻流,實(shí)現(xiàn)對(duì)整個(gè)應(yīng)用的截屏,而在非Electron環(huán)境下,截屏功能受限,只能截取瀏覽器內(nèi)容,且存在iframe或base64圖片加載問(wèn)題
2024-10-10
vue-router傳參的4種方式超詳細(xì)講解
我們?cè)诮M件切換時(shí)經(jīng)常會(huì)有傳遞一些數(shù)據(jù)的需求,這樣就涉及到了路由傳參的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue-router傳參的4種超詳細(xì)方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
vue如何使用element-ui 實(shí)現(xiàn)自定義分頁(yè)
這篇文章主要介紹了vue如何使用element-ui 實(shí)現(xiàn)自定義分頁(yè),可以通過(guò)插槽實(shí)現(xiàn)自定義的分頁(yè),本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2024-07-07
vue+css如何實(shí)現(xiàn)圓環(huán)漸變儀表盤(pán)
這篇文章主要介紹了vue+css如何實(shí)現(xiàn)圓環(huán)漸變儀表盤(pán)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue3.0中ref與reactive的區(qū)別及使用場(chǎng)景分析
ref與reactive都是Vue3.0中新增的API,用于響應(yīng)式數(shù)據(jù)的處理,這篇文章主要介紹了vue3.0中ref與reactive的區(qū)別及使用,需要的朋友可以參考下
2023-08-08
vue父組件數(shù)據(jù)更新子組件相關(guān)內(nèi)容未改變問(wèn)題(用watch解決)
這篇文章主要介紹了vue父組件數(shù)據(jù)更新子組件相關(guān)內(nèi)容未改變問(wèn)題(用watch解決)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue路由傳參及獲取參數(shù)的方式總結(jié)
這篇文章主要介紹了vue路由傳參及獲取參數(shù)的方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05