vue 文件預覽 圖片、mp4、txt、pptx、xls、xlsx、docx、pdf、html、xml

最近公司要做一個類似電腦文件夾的功能，支持文件夾操作，文件操作,這里就不說文件夾操作了，說說文件預覽操作，本人是后端java開發，前端vue，目前沒有人，就也由我來寫，直接上代碼（我的文件是上傳到OSS上的，預覽遠程文件的話需要配置好跨域）

圖片就簡單了，直接打開新的窗口

window.open(url,'_blank')

視頻也是一樣的，直接打開新的窗口

window.open(url,'_blank')

docx

這里使用的是vue-office組件，先安裝依賴----------------------------------------#docx文檔預覽組件
npm install @vue-office/docx vue-demi@0.14.6
--------------------------------------------------------
頁面中引入組件
//引入VueOfficeDocx組件
import VueOfficeDocx from '@vue-office/docx'
//引入相關樣式
import '@vue-office/docx/lib/index.css'<script>export default {components:{VueOfficeDocx},
</script>
<template><vue-office-docxclass="show_office":src="docxUrl"style="height: 90vh;"/></template>

excel

這里使用的是vue-office組件，先安裝依賴----------------------------------------#excel文檔預覽組件
npm install @vue-office/excel vue-demi@0.14.6--------------------------------------------------------
頁面中引入組件//引入VueOfficeExcel組件
import VueOfficeExcel from '@vue-office/excel'
//引入相關樣式
import '@vue-office/excel/lib/index.css'<script>
export default {components:{VueOfficeExcel},
</script><template><vue-office-excelclass="show_office":src="excelUrl"style="height: 90vh;"/>
</template>

pdf

這里使用的是vue-office組件，先安裝依賴---------------------------------------#pdf文檔預覽組件
npm install @vue-office/pdf vue-demi@0.14.6
--------------------------------------------------------
頁面中引入組件//引入VueOfficePdf組件
import VueOfficePdf from '@vue-office/pdf'<script>
export default {components:{VueOfficePdf},</script></template><vue-office-pdfclass="show_office":src="pdfUrl"style="height: 90vh;"/>      
</template>             

txt、html

<divstyle="width:100%;height: 90vh;"v-html="txtUrl"/>axios.get(url, { responseType: 'text' }).then(response => {// 根據設置的編碼進行處理，這里假定utf-8this.txtUrl = response.data;})

xml

axios.get(url, { responseType: 'text' }).then(response => {const parser = new DOMParser();const xmlDoc = parser.parseFromString(response.data, 'text/xml');this.parsedXML = new XMLSerializer().serializeToString(xmlDoc.documentElement);})<pre style="width:100%;height: 90vh;"><code>{{ parsedXML }}</code></pre>

pptx

這里使用的是PPTXjs
1.下載好的PPTXjs放到public目錄下

2.修改PPYXjs的index.hhtml,獲取實際文件地址

3 通過拼接地址，請求PPYXjs實現預覽操作

鏈接: https://blog.csdn.net/IAIPython/article/details/137677707
鏈接: https://github.com/501351981/vue-office