Vue項(xiàng)目導(dǎo)入導(dǎo)出文件功能以及導(dǎo)出文件后亂碼問(wèn)題及解決

更新時(shí)間：2022年09月02日 14:15:58 作者：小劉加油！

這篇文章主要介紹了Vue項(xiàng)目導(dǎo)入導(dǎo)出文件功能以及導(dǎo)出文件后亂碼問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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-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)出，不過(guò)打開文件會(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作為上傳文件的接口路徑，通常是沒(méi)有攜帶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)然，還有其他的情況，還可以使用自定義上傳的方式，通過(guò)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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: