28個(gè)SpringBoot項(xiàng)目中常用注解，日常開發(fā)、求職面試不再懵圈
前言在使用SpringBoot開發(fā)中或者在求職面試中都會(huì)使用到很多注解或者問到注解相關(guān)的知識(shí)。本文主要對(duì)一些常用的注解進(jìn)行了總結(jié)，同時(shí)也會(huì)舉出具體例子，供大家學(xué)習(xí)和參考。注解
當(dāng)我們?cè)谧鑫募A(yù)覽功能時(shí)，往往會(huì)遇到一種糟糕的情況。
就是每預(yù)覽一種類型的文件，就需要重新安裝、配置、編寫一個(gè)新的庫來實(shí)現(xiàn)，很麻煩，也很繁瑣。
于是，我尋找了一個(gè)可以通用的預(yù)覽庫，來處理這個(gè)問題。
vue-office，一個(gè)支持多種文件docx、excel、pdf預(yù)覽的vue組件庫，作者h(yuǎn)it757。這個(gè)庫不僅能支持vue2/3，也支持非Vue框架的預(yù)覽使用。
先看一下線上演示效果，如果實(shí)現(xiàn)效果與項(xiàng)目使用不符，為節(jié)約朋友們時(shí)間，可自行選擇是否向下閱讀。演示地址：https://501351981.github.io/vue-office/examples/dist/#/docx。
如果朋友們覺得能用，就繼續(xù)往下面看看它的實(shí)現(xiàn)。
如果不使用這種vue-office通用的多文件類型預(yù)覽庫，我們可能需要使用如下這些，關(guān)于針對(duì)特定類型文件的預(yù)覽庫，包括但不限于：
pdf.js：是由 Mozilla 開發(fā)的用于在瀏覽器中渲染PDF文件的JavaScript庫。你可以使用它在Vue項(xiàng)目中嵌入PDF預(yù)覽功能。
Vue-PDF：是一個(gè)用于在Vue項(xiàng)目中顯示PDF文件的組件。它基于PDF.js構(gòu)建，提供了簡(jiǎn)單易用的API。
SheetJS：是一個(gè)強(qiáng)大的用于處理Excel文件的JavaScript庫。你可以使用它在Vue項(xiàng)目中讀取Excel文件并顯示內(nèi)容。
Mammoth.js：是一個(gè)用于將.docx文件轉(zhuǎn)換為HTML的JavaScript庫。你可以使用它在Vue項(xiàng)目中將Word文檔轉(zhuǎn)換為HTML并顯示。
el-image組件：預(yù)覽圖片的需求，用它我覺得一般就足夠了。
Viewer.js：是一個(gè)強(qiáng)大的用于在瀏覽器中查看圖片的JavaScript庫。你可以使用它在Vue項(xiàng)目中實(shí)現(xiàn)圖片預(yù)覽功能。
Vue Image Viewer：是一個(gè)用于在Vue項(xiàng)目中實(shí)現(xiàn)圖片查看器功能的組件。它支持縮放、旋轉(zhuǎn)等功能。
安裝依賴：
#docx文檔預(yù)覽組件npm install @vue-office/docx vue-demi@0.13.11如果是vue2.6版本或以下還需要額外安裝 @vue/composition-api。
npm install @vue/composition-api/使用文件的網(wǎng)絡(luò)地址預(yù)覽代碼：
<template><vue-office-docx :src="docx"style="height: 100vh;"@rendered="rendered"/></template><script>//引入VueOfficeDocx組件import VueOfficeDocx from '@vue-office/docx'//引入相關(guān)樣式import '@vue-office/docx/lib/index.css'export default {components:{VueOfficeDocx},data(){return {docx: 'http://static.shanhuxueyuan.com/test6.docx' //設(shè)置文檔網(wǎng)絡(luò)地址，可以是相對(duì)地址}},methods:{rendered(){console.log("渲染完成")}}}</script>使用上傳文件預(yù)覽代碼（讀取文件的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>使用接口返回的二進(jìn)制文件預(yù)覽代碼：
如果后端給的不是CDN地址，而是一些POST接口，該接口返回二進(jìn)制流，則可以調(diào)用接口獲取文件的ArrayBuffer數(shù)據(jù)，傳遞給src屬性。
<template><vue-office-docx :src="docx"style="height: 100vh;"@rendered="rendered"/></template><script>//引入VueOfficeDocx組件import VueOfficeDocx from '@vue-office/docx'//引入相關(guān)樣式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文檔預(yù)覽組件npm install @vue-office/excel vue-demi@0.13.11如果是vue2.6版本或以下還需要額外安裝 @vue/composition-api。
npm install @vue/composition-api/使用文件的網(wǎng)絡(luò)地址預(yù)覽代碼、使用上傳文件預(yù)覽代碼、使用接口返回的二進(jìn)制文件預(yù)覽代碼，基本都和word文件預(yù)覽使用相同，只不過需要修改邏輯中對(duì)樣式和組件對(duì)象的引用：
//引入VueOfficeExcel組件import VueOfficeExcel from '@vue-office/excel'//引入相關(guān)樣式import '@vue-office/excel/lib/index.css'安裝依賴：
#pdf文檔預(yù)覽組件npm install @vue-office/pdf vue-demi@0.13.11如果是vue2.6版本或以下還需要額外安裝 @vue/composition-api。
npm install @vue/composition-api/使用文件的網(wǎng)絡(luò)地址預(yù)覽代碼、使用上傳文件預(yù)覽代碼、使用接口返回的二進(jìn)制文件預(yù)覽代碼，基本都和word文件預(yù)覽使用相同，只不過需要修改邏輯中對(duì)樣式和組件對(duì)象的引用：
//引入VueOfficePdf組件import VueOfficePdf from '@vue-office/pdf'為了朋友們閱讀到此處時(shí)，方便查閱官方文檔學(xué)習(xí)。
最后附上，vue-office官方文檔地址：https://github.com/501351981/vue-office。
關(guān)于非Vue框架的使用，也請(qǐng)移步參考官方文檔。
本文鏈接：http://www.www897cc.com/showinfo-26-75310-0.htmlVue2問題：分享一個(gè)通用多文件類型預(yù)覽庫
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)