Excel下载模板文件和导入文件的步骤

一、配置api

// 题目导入模板下载接口
export function exportTemplate() {return request({url: '/edu/question/exportTemplate',method: 'get',//必加header: {headers: {'Content-Type': 'application/x-download'},},responseType: "blob",//必加})
}
// 题目模板数据导入接口
export function importTemplate(file) {const data = new FormData()//必加data.append('file', file)//必加return request({url: '/edu/question/import',method: 'post',data})
}

二、vue中引用Api

import {exportTemplate,importTemplate,
} from "@/api/edu/question";

三、引用下载文件的方法

//引用下载文件的方法
import { download } from "@/utils/excel";

方法：/utils/excel

/*** 通用js方法封装处理* Copyright (c) 2019*//*** 参数处理* @param {*} params  参数*/// 封装exceljs
import ExcelJS from 'exceljs'
import FileSaver from 'file-saver'export function tansParams(params) {let result = ''for (const propName of Object.keys(params)) {const value = params[propName]let part = `${encodeURIComponent(propName)}=`if (value !== null && value !== '' && typeof value !== 'undefined') {if (typeof value === 'object') {for (const key of Object.keys(value)) {if (value[key] !== null &&value[key] !== '' &&typeof value[key] !== 'undefined') {let params = `${propName}[${key}]`let subPart = `${encodeURIComponent(params)}=`result += `${subPart + encodeURIComponent(value[key])}&`}}} else {result += `${part + encodeURIComponent(value)}&`}}}return result
}// 验证是否为blob格式
export function blobValidate(data) {return data.type !== 'application/json'
}// export function getSrc(url) {
//   return `https://${url}`
// }// 得到字典某个值的内容
export function getDictLabel(dict, value) {let res = dict.filter((item) => item.value === value)return res[0]
}// promise 只执行一次
export function oncePromise(fn, p = null) {return function (...arg) {// eslint-disable-next-line no-return-assignreturn p || (p = fn(...arg).finally(() => (p = null)))}
}/*** 导出数据到Excel方法* @param {Array[Object]} config.data 表格数据* @param {Array[String]} config.fields 字段列表* @param {Array[String]} config.headers excel表头列表[[]]，可以是多级表头[['A1'，'B1'],['A2'，'B2']]* @param {Array[Object]} config.merges 需要合并的单元格，需要考虑表头的行数[{row:1, col:1, rowspan: 1, colspan: 2}]* @param {Array[Object]} config.attrs 单元格样式配置* @param {Array[Object]} config.views 工作表视图配置* @param {Array[Number]} columnsWidth 每个字段列对应的宽度* @param {Object} config.protect 工作表保护【此配置会保护全表，一般推荐只针对单元格进行保护配置】* @param {String} sheetName 工作表名称，默认从sheet1开始* @param {String} fileName excel文件名称*/
export function exportDataToExcel(config, fileName) {if (!config) returnconst options = {fileName: fileName || `导出excel文件【${Date.now()}】.xlsx`,worksheets: [],}if (!Array.isArray(config)) {config = [config]}config.forEach((item) => {// 深拷贝data【JSON.stringify有缺陷，可自行换成_.cloneDeep】const data = JSON.parse(JSON.stringify(item.data))const results = data.map((obj) => item.fields.map((key) => obj[key])) // 生成完整excel数据let excelData = []excelData = excelData.concat(item.headers).concat(results) // 单元格合并处理【excel数据的第一行/列是从1开始】let excelMerges = []excelMerges = item.merges.map((m) => [m.row + 1,m.col + 1,m.row + m.rowspan,m.col + m.colspan,]) // 单元格配置处理【excel数据的第一行/列是从1开始】let excelAttrs = []excelAttrs = item.attrs.map((attr) => {attr.rowStart += 1attr.rowEnd += 1attr.colStart += 1attr.colEnd += 1return attr})options.worksheets.push({data: excelData,merges: excelMerges,attrs: excelAttrs,views: item.views,columnsWidth: item.columnsWidth,protect: item.protect,sheetName: item.sheetName,})})createExcel(options)
}// 创建Excel文件方法
async function createExcel(options) {if (!options.worksheets.length) return // 创建工作簿const workbook = new ExcelJS.Workbook()for (let i = 0; i < options.worksheets.length; i++) {const sheetOption = options.worksheets[i] // 创建工作表const sheet = workbook.addWorksheet(sheetOption.sheetName || `sheet${i + 1}`) // 添加数据行sheet.addRows(sheetOption.data) // 配置视图sheet.views = sheetOption.views // 单元格合并处理【开始行，开始列，结束行，结束列】if (sheetOption.merges) {sheetOption.merges.forEach((item) => {sheet.mergeCells(item)})} // 工作表保护if (sheetOption.protect) {const res = await sheet.protect(sheetOption.protect.password,sheetOption.protect.options)} // 单元格样式处理if (sheetOption.attrs.length) {sheetOption.attrs.forEach((item) => {const attr = item.attr || {} // 获取开始行-结束行; 开始列-结束列const { rowStart } = itemconst { rowEnd } = itemconst { colStart } = itemconst { colEnd } = itemif (rowStart) {// 设置行for (let r = rowStart; r <= rowEnd; r++) {// 获取当前行const row = sheet.getRow(r)if (colStart) {// 列设置for (let c = colStart; c <= colEnd; c++) {// 获取当前单元格const cell = row.getCell(c)Object.keys(attr).forEach((key) => {// 给当前单元格设置定义的样式cell[key] = attr[key]})}} else {// 未设置列，整行设置【大纲级别】Object.keys(attr).forEach((key) => {row[key] = attr[key]})}}} else if (colStart) {// 未设置行，只设置了列for (let c = colStart; c <= colEnd; c++) {// 获取当前列，整列设置【大纲级别】const column = sheet.getColumn(c)Object.keys(attr).forEach((key) => {column[key] = attr[key]})}} else {// 没有设置具体的行列，则为整表设置Object.keys(attr).forEach((key) => {sheet[key] = attr[key]})}})} // 列宽设置if (sheetOption.columnsWidth) {for (let j = 0; j < sheet.columns.length; j++) {sheet.columns[j].width = sheetOption.columnsWidth[j]}}} // 生成excel文件workbook.xlsx.writeBuffer().then((buffer) => {// application/octet-stream 二进制数据FileSaver.saveAs(new Blob([buffer], { type: 'application/octet-stream' }),options.fileName)})
}// 下载文件流文件
export const download = (res, type, filename) => {// 创建blob对象，解析流数据const blob = new Blob([res], {// 设置返回的文件类型// type: 'application/pdf;charset=UTF-8' 表示下载文档为pdf，如果是word则设置为msword，excel为'application/vnd.ms-excel'type,}) // 这里就是创建一个a标签，等下用来模拟点击事件const a = document.createElement('a') // 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载const URL = window.URL || window.webkitURL // 根据解析后的blob对象创建URL 对象const href = URL.createObjectURL(blob) // 下载链接a.href = href // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'a.download = filenamedocument.body.appendChild(a) // 点击a标签，进行下载a.click() // 收尾工作，在内存中移除URL 对象document.body.removeChild(a)window.URL.revokeObjectURL(href)
}

三、添加点击事件下载

HTML:

<template><!-- 导入对话框 --><el-dialog:title="title":visible.sync="localImportShow"width="600px"@close="localImportClose"append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-row><el-col :span="24"><el-form-item label="下载模板" prop="downloadTemplate"><el-button type="primary" @click="downloadCClick">下载<i class="el-icon-download"></i></el-button></el-form-item></el-col></el-row><el-row><el-col :span="24"><el-form-item label="导入数据" prop="file"><el-uploadref="uploadExcel"class="upload-btn"action="#":auto-upload="false"accept=".xls, .xlsx":show-file-list="true":file-list="form.file":on-change="change":on-remove="handleRemove":limit="1"><el-button slot="trigger" size="small" type="primary">选取文件</el-button></el-upload></el-form-item></el-col></el-row></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>
</template>

VUEJS:

<script>
import { exportTemplate, importTemplate } from "@/api/edu/question";
import { download } from "@/utils/excel";export default {props: {//弹出框是否展示importShow: {type: Boolean,default: false,},},data() {return {title: "导入试题数据",form: {file: [],},// 弹出框是否展示localImportShow: this.importShow,rules: {file: [{ required: true, message: "请导入数据", trigger: "change" }],},};},watch: {importShow(newVal) {this.localImportShow = newVal;},"form.file": {handler(nval) {if (nval.length) {this.$refs.form.clearValidate(["file"]);}},deep: true,},},methods: {localImportClose() {this.$emit("update:importShow", false);this.reset();},// 点击下载模板按钮downloadCClick() {exportTemplate().then((res) => {download(res, "application/vnd.ms-excel", "试题模板.xlsx");});},// 更换上传文件change({ raw }) {//使用set watch才能监测到有值this.$set(this.form.file, 0, raw);},handleRemove(file, fileList) {// 移除上传文件this.form.file = [];},// 提交事件submitForm() {this.$refs["form"].validate((valid) => {if (valid) {importTemplate(this.form.file[0]).then((res) => {if (res.code === 200) {this.localImportShow = false;this.$modal.msgSuccess("导入成功");this.$emit("getList");}}).catch((err) => {this.localImportShow = false;});this.$nextTick(() => {this.reset();});}});},// 取消按钮cancel() {this.localImportShow = false;this.reset();},// 重置数据reset() {this.$refs.form.clearValidate();this.form = {// parentId: null,file: [],};},},
};
</script>