vue3 模板下载，导入，导出

又耳邓&丘山岳

已于 2024-05-17 11:53:43 修改

阅读量402

点赞数 8

文章标签：前端 javascript vue.js

于 2024-03-06 14:07:57 首次发布

本文链接：https://blog.csdn.net/m0_67796383/article/details/136328466

版权

模板下载

//定义模板下载的方法（本地存放的模板路径有差异‘’./template/MaintenanceTemplate.xlsx）

const templateDownloadFunction = () => {

window.location.href = `./template/MaintenanceTemplate.xlsx?t=${new Date().getTime()}`;

};

导入

*与后端配合,后端提供导入接口

                     <el-upload ref="fileUpload" class="upload-demo"
                        action="/service/deviceMaintainTemplate/importCheckTemplateList" :show-file-list="false"
                        :on-success="uploadSuccess" :on-change="handleChange">
                        <!--  accept=".zip" -->
                        <el-button :icon="FolderAdd" color="#0542A8" class="resetting">
                            导入
                        </el-button>
                    </el-upload>




// 导入按钮
const handleChange = () => {
    console.log('handleChange---------')
}

//导入成功
const uploadSuccess = (file) => {
    if (file.code === 500) {
        ElMessage({
            showClose: true,
            message: '导入失败',
            type: "error"
        });
    } else {
        ElMessage({
            showClose: true,
            message: '导入成功',
            type: "success",
            duration: 2000,
        });
        getModelsFunction()
    }
}

导出

*与后端配合,后端提供导出接口

定义一个按钮

<el-button type="primary" @click="exportExcelFunction" class="resetting"

><el-icon class="reset-icon">

<Document />

</el-icon>导出</el-button>


// 导出
const exportExcelFunction = () => {
    window.open("/service/deviceVulcanizationErrorLog/export?deviceCode=" + topForm.deviceCode + '&' + 'deviceId=' + topForm.deviceId + '&' + 'deviceName=' + topForm.deviceName + '&' + 'errorMsg=' + topForm.errorMsg, "_blank");
}

*注：window.open("/service/deviceVulcanizationErrorLog/export?deviceCode=" + topForm.deviceCode+...., "_blank"); 接口前面的的"/"千万不能少/(ㄒoㄒ)/~~