第Vue項(xiàng)目導(dǎo)入導(dǎo)出文件功能以及導(dǎo)出文件后亂碼問(wèn)題及解決目錄vue項(xiàng)目導(dǎo)入導(dǎo)出功能1.導(dǎo)出2.導(dǎo)入3.另一種方法實(shí)現(xiàn)文件上傳

vue項(xiàng)目導(dǎo)入導(dǎo)出功能

1.導(dǎo)出

導(dǎo)出功能其實(shí)很簡(jiǎn)單，只需要調(diào)用后端的接口即可，不過(guò)有一些需要注意的地方，具體代碼如下所示：

這是導(dǎo)出按鈕，定義導(dǎo)出的點(diǎn)擊事件：

a-buttontype="primary"@click="downExcel"

template#icon

UploadOutlined/

/template

/a-button

js部分，調(diào)用接口，導(dǎo)出文件：

//導(dǎo)出excel

constdownExcel=()={

if(state.selectedRowKeys.length==0){

Message.warning("請(qǐng)先選擇需要導(dǎo)出的數(shù)據(jù)")

return

//constdate=moment(newDate()).format("YYYY-MM")

constparams={

exportUserIds:state.selectedRowKeys

consthideLoading=message.loading("文件導(dǎo)出中...",0)

apiDownExcel(params)

.then((res:any)={

if(res.status==200){

constsystem=window.navigator.platform=="Win32""window":"mac"

constlink=document.createElement("a")

constblob=newBlob([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)出，不過(guò)打開文件會(huì)出現(xiàn)亂碼，這個(gè)時(shí)候我們需要配置下接口，具體代碼如下所示：

//導(dǎo)出月度薪資

exportconstapiDownExcel=(params:object)={

returnrequest({

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-buttontype="primary"

template#icon

DownloadOutlined/

/template

/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作為上傳文件的接口路徑，通常是沒(méi)有攜帶token的，所以需要在請(qǐng)求頭里自定義帶上token。

文件上傳后js部分代碼：

//文件狀態(tài)--上傳文件后更新列表

constuploadChangeHandle=(data:any)={

if(data.file.status=="done"){

Message.success("文件導(dǎo)入成功")

getList()

if(data.file.status=="error"){

Message.error(data.file.response.messagedata.file.response.message:"文件導(dǎo)入失敗")

getList()

當(dāng)然，還有其他的情況，還可以使用自定義上傳的方式，通過(guò)customRequest覆蓋默認(rèn)上傳的方式

3.另一種方法實(shí)現(xiàn)文件上傳

接口部分：

//導(dǎo)入月度薪資

exportconstapiImportExcel=(params:any)={

returnrequest({

url:'/api/slaughter_smart/mySalaryMonthResult/importExcel',

method:'post',

data:params,

headers:{

'Content-Type':'multipart/form-data'

html部分：

!--導(dǎo)入模板彈框--

a-modaltitle="導(dǎo)入":visible="modalDate.importVisivle"@cancel="cancelModal":maskClosable="false":footer="null":width="540"

div

a-buttontype="primary"ghost@click="downloadTemplateClick"

template#icon

DownloadOutlined/

/template

模板下載

/a-button

div(注：請(qǐng)按照模板進(jìn)行設(shè)計(jì)，如與模板不符將無(wú)法錄入)/div

/div

div

a-upload:showUploadList="false"accept=".xls,.xlsx,xlw":customRequest="customRequestChange"

a-buttontype="primary"ghostv-if="!modalDate.fileList.length"

UploadOutlined/

上傳文件

/a-button

a-buttontype="primary"ghostdisabledv-else

UploadOutlined/

上傳文件

/a-button

/a-upload

div

divv-for="(item,index)inmodalDate.fileList":key="index"

i/i

span{{}}/span

i@click.stop="deleteFileClick(index)"/i

/div

/div

/div

div

a-buttontype="primary"v-prevent-click@click="imporSaveClick"確認(rèn)/a-button

a-button

@click="cancelModal"

取消/a-button

/div

/a-modal

該彈框打開后效果如下圖所示：

js部分：

//自定義導(dǎo)入

constcustomRequestChange=(options:any)={

modalDate.fileList.push(options.file)

//點(diǎn)擊確認(rèn)上傳文件

constimporSaveClick=()={

if(modalDate.fileList.length==0){

message.warning("請(qǐng)選擇上傳的文件")

returnfalse

constparams=newFormData()

modalDate.fileList.forEach((item:any)={

params.append("file",item)

apiImportExcel(params).then((res:any)={

if(res.data.status==20