Vue項(xiàng)目導(dǎo)入導(dǎo)出文件功能以及導(dǎo)出文件后亂碼問題及解決
vue項(xiàng)目導(dǎo)入導(dǎo)出功能
1.導(dǎo)出
導(dǎo)出功能其實(shí)很簡(jiǎn)單,只需要調(diào)用后端的接口即可,不過有一些需要注意的地方,具體代碼如下所示:
這是導(dǎo)出按鈕,定義導(dǎo)出的點(diǎn)擊事件:
<a-button type="primary" @click="downExcel"> <template #icon> <UploadOutlined /> </template> 導(dǎo)出 </a-button>
js部分,調(diào)用接口,導(dǎo)出文件:
// 導(dǎo)出excel const downExcel = () => { if (state.selectedRowKeys.length == 0) { Message.warning("請(qǐng)先選擇需要導(dǎo)出的數(shù)據(jù)") return } // const date = moment(new Date()).format("YYYY-MM") const params = { exportUserIds: state.selectedRowKeys } const hideLoading = message.loading("文件導(dǎo)出中...", 0) apiDownExcel(params) .then((res: any) => { if (res.status == 200) { const system = window.navigator.platform == "Win32" ? "window" : "mac" const link = document.createElement("a") const blob = new Blob([res.data], { type: "application/vnd.ms-excel" }) link.href = URL.createObjectURL(blob) link.download = `月度薪資.${system == "mac" ? "xlw" : "xls"}` //下載的文件名 document.body.appendChild(link) link.click() document.body.removeChild(link) } }) .finally(() => { setTimeout(hideLoading, 0) }) }
在這里需要注意的是:
點(diǎn)擊導(dǎo)出按鈕,接口跑通后,文件會(huì)成功導(dǎo)出,不過打開文件會(huì)出現(xiàn)亂碼,這個(gè)時(shí)候我們需要配置下接口,具體代碼如下所示:
// 導(dǎo)出月度薪資 export const apiDownExcel = (params: object) => { return request({ url: "/api/slaughter_smart/mySalaryMonthResult/exportExcel", method: "post", data: params, responseType: "blob", }) }
需要設(shè)置 ** responseType: “blob” ** 即可正常打開該文件。
2.導(dǎo)入
導(dǎo)入功能也不難,ant-design-vue已經(jīng)封裝了上傳組件,我們按照upload上傳組件開發(fā)即可,具體代碼如下所示:
<a-upload name="file" action="/api/slaughter_smart/mySalaryMonthResult/importExcel" :headers="{ Authorization: token, 'Muyuan-Auth': token }" accept=".xls,.xlsx" :multiple="false" :showUploadList="false" @change="uploadChangeHandle > <a-button type="primary"> <template #icon> <DownloadOutlined /> </template> 導(dǎo)入 </a-button> </a-upload>
解析:
action是上傳文件請(qǐng)求的路徑,headers里面設(shè)置了token,accept表示接受文件的格式,multiple表示是否上傳多個(gè)文件,showUploadList表示是否展示uploadList,@change則表示上傳文件改變時(shí)的狀態(tài),上傳文件有三種狀態(tài),分別是uploading、done以及error。
使用action作為上傳文件的接口路徑,通常是沒有攜帶token的,所以需要在請(qǐng)求頭里自定義帶上token。
文件上傳后js部分代碼:
// 文件狀態(tài) -- 上傳文件后更新列表 const uploadChangeHandle = (data: any) => { if (data.file.status == "done") { Message.success("文件導(dǎo)入成功") getList() } if (data.file.status == "error") { Message.error(data.file.response.message ? data.file.response.message : "文件導(dǎo)入失敗") getList() } }
當(dāng)然,還有其他的情況,還可以使用自定義上傳的方式,通過customRequest覆蓋默認(rèn)上傳的方式
3.另一種方法實(shí)現(xiàn)文件上傳
接口部分:
// 導(dǎo)入月度薪資 export const apiImportExcel = (params: any) => { return request({ url: '/api/slaughter_smart/mySalaryMonthResult/importExcel', method: 'post', data: params, headers: { 'Content-Type': 'multipart/form-data' } }) }
html部分:
<!-- 導(dǎo)入模板彈框 --> <a-modal title="導(dǎo)入" :visible="modalDate.importVisivle" @cancel="cancelModal" :maskClosable="false" :footer="null" :width="540"> <div> <a-button type="primary" ghost @click="downloadTemplateClick"> <template #icon> <DownloadOutlined /> </template> 模板下載 </a-button> <div style="font-size: 14px;color: #FF4122;font-weight: 400;margin-top: 5px">(注:請(qǐng)按照模板進(jìn)行設(shè)計(jì),如與模板不符將無(wú)法錄入)</div> </div> <div style="margin-top: 30px"> <a-upload :showUploadList="false" accept=".xls,.xlsx,xlw" :customRequest="customRequestChange"> <a-button type="primary" ghost v-if="!modalDate.fileList.length"> <UploadOutlined /> 上傳文件 </a-button> <a-button type="primary" ghost disabled v-else> <UploadOutlined /> 上傳文件 </a-button> </a-upload> <div class="martp_15"> <div class="dis_flex flex_y_center" v-for="(item, index) in modalDate.fileList" :key="index"> <i class="iconfont icon-paperclip marrt_10" style="font-size: 14px;color: #0194FE"></i> <span style="color: #0194FE">{{ item.name }}</span> <i class="iconfont icon-icon_close_remove" style="font-size: 20px;margin-left: 15px" @click.stop="deleteFileClick(index)"></i> </div> </div> </div> <div class="text_right" style="margin-top: 20px"> <a-button class="marrt_15" type="primary" v-prevent-click @click="imporSaveClick">確認(rèn)</a-button> <a-button @click="cancelModal" >取消</a-button > </div> </a-modal>
該彈框打開后效果如下圖所示:
js部分:
// 自定義導(dǎo)入 const customRequestChange = (options: any) => { modalDate.fileList.push(options.file) } // 點(diǎn)擊確認(rèn)上傳文件 const imporSaveClick = () => { if (modalDate.fileList.length == 0) { message.warning("請(qǐng)選擇上傳的文件") return false } const params = new FormData() modalDate.fileList.forEach((item: any)=> { params.append("file", item) }) apiImportExcel(params).then((res: any)=>{ if (res.data.status == 200 && res.data.rel) { getList() message.success("上傳成功!") modalDate.importVisivle = false modalDate.fileList = [] }else { message.error(res.data.message) } }) }
該寫法只能上傳一個(gè)文件!??!
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue系列之requireJs中引入vue-router的方法
這篇文章主要介紹了vue系列之requireJs中引入vue-router的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-07-07vue3?reactive響應(yīng)式依賴收集派發(fā)更新原理解析
這篇文章主要為大家介紹了vue3響應(yīng)式reactive依賴收集派發(fā)更新原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03Vue渲染器設(shè)計(jì)實(shí)現(xiàn)流程詳細(xì)講解
在瀏覽器平臺(tái)上,用它來(lái)渲染其中的真實(shí)DOM元素。渲染器不僅能夠渲染真實(shí)的DOM元素,它還是框架跨平臺(tái)能力的關(guān)鍵。所以在設(shè)計(jì)渲染器的時(shí)候一定要考慮好自定義的能力2023-01-01vue自定義tap指令及tap事件的實(shí)現(xiàn)
Vue提供自定義實(shí)現(xiàn)指令的功能, 和組件類似,可以是全局指令和局部指令,這篇文章主要介紹了vue自定義tap指令及tap事件的實(shí)現(xiàn) ,需要的朋友可以參考下2018-09-09Vue列表如何實(shí)現(xiàn)滾動(dòng)到指定位置樣式改變效果
這篇文章主要介紹了Vue列表實(shí)現(xiàn)滾動(dòng)到指定位置樣式改變效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05原生JS?Intersection?Observer?API實(shí)現(xiàn)懶加載
這篇文章主要為大家介紹了原生JS?Intersection?Observer?API實(shí)現(xiàn)懶加載示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Nuxt3項(xiàng)目搭建過程(Nuxt3+element-plus+scss詳細(xì)步驟)
這篇文章主要介紹了Nuxt3項(xiàng)目搭建(Nuxt3+element-plus+scss詳細(xì)步驟),本次記錄一次使用Nuxt3搭建前端項(xiàng)目的過程,內(nèi)容包含Nuxt3的安裝,基于Vite腳手架(默認(rèn))構(gòu)建的vue3項(xiàng)目,element-plus的安裝配置,scss的安裝,目錄結(jié)構(gòu)的創(chuàng)建和解釋,需要的朋友可以參考下2022-12-12vue3中g(shù)etCurrentInstance不推薦使用及在<script?setup>中獲取全局內(nèi)容的三種方式
這篇文章主要給大家介紹了關(guān)于vue3中g(shù)etCurrentInstance不推薦使用及在<script?setup>中獲取全局內(nèi)容的三種方式,文中通過介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02