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-assign
return 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) return
const 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 += 1
attr.rowEnd += 1
attr.colStart += 1
attr.colEnd += 1
return 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 } = item
const { rowEnd } = item
const { colStart } = item
const { colEnd } = item
if (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 = filename
document.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-upload
ref="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>原文地址：https://blog.csdn.net/m0_45827438/article/details/140669754
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！