官方承諾：K60至尊版將會首批升級MIUI 15
全新的MIUI 15今天也有了消息，在官宣了K60至尊版將會搭載天璣9200+處理器和獨顯芯片X7的同時，Redmi給出了官方承諾，K60至尊重大更新首批升級，會首批推送MIUI 15。也就是說雖然
當我們在做文件預覽功能時，往往會遇到一種糟糕的情況。
就是每預覽一種類型的文件，就需要重新安裝、配置、編寫一個新的庫來實現，很麻煩，也很繁瑣。
于是，我尋找了一個可以通用的預覽庫，來處理這個問題。
vue-office，一個支持多種文件docx、excel、pdf預覽的vue組件庫，作者hit757。這個庫不僅能支持vue2/3，也支持非Vue框架的預覽使用。
先看一下線上演示效果，如果實現效果與項目使用不符，為節約朋友們時間，可自行選擇是否向下閱讀。演示地址：https://501351981.github.io/vue-office/examples/dist/#/docx。
如果朋友們覺得能用，就繼續往下面看看它的實現。
如果不使用這種vue-office通用的多文件類型預覽庫，我們可能需要使用如下這些，關于針對特定類型文件的預覽庫，包括但不限于：
pdf.js：是由 Mozilla 開發的用于在瀏覽器中渲染PDF文件的JavaScript庫。你可以使用它在Vue項目中嵌入PDF預覽功能。
Vue-PDF：是一個用于在Vue項目中顯示PDF文件的組件。它基于PDF.js構建，提供了簡單易用的API。
SheetJS：是一個強大的用于處理Excel文件的JavaScript庫。你可以使用它在Vue項目中讀取Excel文件并顯示內容。
Mammoth.js：是一個用于將.docx文件轉換為HTML的JavaScript庫。你可以使用它在Vue項目中將Word文檔轉換為HTML并顯示。
el-image組件：預覽圖片的需求，用它我覺得一般就足夠了。
Viewer.js：是一個強大的用于在瀏覽器中查看圖片的JavaScript庫。你可以使用它在Vue項目中實現圖片預覽功能。
Vue Image Viewer：是一個用于在Vue項目中實現圖片查看器功能的組件。它支持縮放、旋轉等功能。
安裝依賴：
#docx文檔預覽組件npm install @vue-office/docx vue-demi@0.13.11如果是vue2.6版本或以下還需要額外安裝 @vue/composition-api。
npm install @vue/composition-api/使用文件的網絡地址預覽代碼：
<template><vue-office-docx :src="docx"style="height: 100vh;"@rendered="rendered"/></template><script>//引入VueOfficeDocx組件import VueOfficeDocx from '@vue-office/docx'//引入相關樣式import '@vue-office/docx/lib/index.css'export default {components:{VueOfficeDocx},data(){return {docx: 'http://static.shanhuxueyuan.com/test6.docx' //設置文檔網絡地址，可以是相對地址}},methods:{rendered(){console.log("渲染完成")}}}</script>使用上傳文件預覽代碼（讀取文件的ArrayBuffer）：
<template><div><input type="file" @change="changeHandle"/><vue-office-docx :src="src"/></div></template><script>import VueOfficeDocx from '@vue-office/docx'import '@vue-office/docx/lib/index.css'export default {components: {VueOfficeDocx},data(){return {src: ''}},methods:{changeHandle(event){let file = event.target.files[0]let fileReader = new FileReader()fileReader.readAsArrayBuffer(file)fileReader.onload = () => {this.src = fileReader.result}}}}</script>使用接口返回的二進制文件預覽代碼：
如果后端給的不是CDN地址，而是一些POST接口，該接口返回二進制流，則可以調用接口獲取文件的ArrayBuffer數據，傳遞給src屬性。
<template><vue-office-docx :src="docx"style="height: 100vh;"@rendered="rendered"/></template><script>//引入VueOfficeDocx組件import VueOfficeDocx from '@vue-office/docx'//引入相關樣式import '@vue-office/docx/lib/index.css'export default {components:{VueOfficeDocx},data(){return {docx: '' }}, mounted(){fetch('你的API文件地址', {method: 'post'}).then(res=>{//讀取文件的arrayBufferres.arrayBuffer().then(res=>{this.docx = res})})},methods:{rendered(){console.log("渲染完成")}}}</script>安裝依賴：
#excel文檔預覽組件npm install @vue-office/excel vue-demi@0.13.11如果是vue2.6版本或以下還需要額外安裝 @vue/composition-api。
npm install @vue/composition-api/使用文件的網絡地址預覽代碼、使用上傳文件預覽代碼、使用接口返回的二進制文件預覽代碼，基本都和word文件預覽使用相同，只不過需要修改邏輯中對樣式和組件對象的引用：
//引入VueOfficeExcel組件import VueOfficeExcel from '@vue-office/excel'//引入相關樣式import '@vue-office/excel/lib/index.css'安裝依賴：
#pdf文檔預覽組件npm install @vue-office/pdf vue-demi@0.13.11如果是vue2.6版本或以下還需要額外安裝 @vue/composition-api。
npm install @vue/composition-api/使用文件的網絡地址預覽代碼、使用上傳文件預覽代碼、使用接口返回的二進制文件預覽代碼，基本都和word文件預覽使用相同，只不過需要修改邏輯中對樣式和組件對象的引用：
//引入VueOfficePdf組件import VueOfficePdf from '@vue-office/pdf'為了朋友們閱讀到此處時，方便查閱官方文檔學習。
最后附上，vue-office官方文檔地址：https://github.com/501351981/vue-office。
關于非Vue框架的使用，也請移步參考官方文檔。
本文鏈接：http://www.tebozhan.com/showinfo-26-75310-0.htmlVue2問題：分享一個通用多文件類型預覽庫
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
下一篇： 面試必備：四種經典限流算法講解
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號