PS:纯属自己写着玩呢
目录
上传
前端
<template>
<basic-container>
<avue-crud :option="option" :search.sync="search" :table-loading="loading" :data="data" :page.sync="page"
:permission="permissionList" :before-open="beforeOpen" v-model="form" ref="crud"
:cell-style="{ 'text-align': 'center' }" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel"
@search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
@current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
<template slot="menuLeft">
<el-button type="info" plain icon="el-icon-upload2" size="small" @click="handleImport">导入Word</el-button>
</template>
<!-- 状态插槽 -->
<template slot="status" slot-scope="{row}">
<el-tag :type="row.status == 0 ? 'info' : 'success'">
{{ row.status == 0 ? '停用' : '正常' }}
</el-tag>
</template>
</avue-crud>
<!-- 题库导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" :show-close="false" append-to-body>
<el-upload class="upload-demo" :action="upload.url" multiple show-file-list accept=".doc,.docx,.xls,.xlsx"
:before-upload="beforeUpload" ref="upload" :on-preview="handlePreview" :on-remove="handleRemove"
:file-list="fileList" :auto-upload="false" :on-exceed="handleExceed" :on-success="handleUploadSuccess"
:on-change="(file, fileList) => changeHandler(file, fileList)" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<span>模板说明：word文件上传</span>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button size="small" type="primary" @click="submitUpload">确 定</el-button>
<el-button size="small" @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
</basic-container>
</template>
<script>
export default {
data() {
return {
form: {},
query: {},
search: {},
loading: true,
page: {
pageSize: 10,
currentPage: 1,
total: 0
},
selectionList: [],
option: {
height: 'auto',
calcHeight: 30,
align: 'center',
tip: false,
searchShow: true,
searchMenuSpan: 6,
border: true,
index: true,
viewBtn: true,
selection: true,
dialogClickModal: false,
column: [
{
label: "模板名称",
prop: "name",
type: "input",
search: true,
rules: [{
required: true,
message: "请输入模板名称",
trigger: "blur"
}],
},
{
label: "模板地址",
prop: "url",
type: "input",
search: true,
rules: [{
required: true,
message: "请输入模板地址",
trigger: "blur"
}],
},
{
label: "备注",
prop: "remarks",
type: "input",
search: true,
rules: [{
required: true,
message: "请输入备注",
trigger: "blur"
}],
},
{
label: "状态 ",
prop: "status",
type: "switch",
value:1, // 默认是 "正常"
dicData: [
{
label: '停用',
value: 0
},
{
label: '正常',
value: 1
}
]
},
]
},
data: [],
// 题库导入参数
upload: {
// 是否显示弹出层（题库导入）
open: false,
// 弹出层标题（题库导入）
title: "",
// 是否禁用上传
isUploading: false,
updateSupport: 0,
noticeId: "",
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: `/api/resource/template/word?${this.website.tokenHeader}=${getToken()}`,
},
};
},
methods: {
rowSave(row, done, loading) {
add(row).then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
done();
}, error => {
loading();
window.console.log(error);
});
},
rowUpdate(row, index, done, loading) {
update(row).then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
done();
}, error => {
loading();
console.log(error);
});
},
rowDel(row) {
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
return remove(row.id);
})
.then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
});
},
searchReset() {
this.query = {};
this.onLoad(this.page);
},
searchChange(params, done) {
this.query = params;
this.page.currentPage = 1;
this.onLoad(this.page, params);
done();
},
selectionChange(list) {
this.selectionList = list;
},
selectionClear() {
this.selectionList = [];
this.$refs.crud.toggleSelection();
},
currentChange(currentPage) {
this.page.currentPage = currentPage;
},
sizeChange(pageSize) {
this.page.pageSize = pageSize;
},
refreshChange() {
this.onLoad(this.page, this.query);
},
onLoad(page, params = {}) {
this.loading = true;
const {
} = this.query;
let values = {
};
getList(page.currentPage, page.pageSize, values).then(res => {
const data = res.data.data;
this.page.total = data.total;
this.data = data.records;
this.loading = false;
this.selectionClear();
});
},
// 新增的方法
/** 导入按钮操作 */
handleImport() {
this.upload.title = "导入word(.docx)文件";
this.upload.open = true;
this.onLoad.getList();
},
beforeUpload(file) {
console.log(file)
// 文件类型校验
var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
const extension = testmsg === "doc" || testmsg === "docx" || testmsg === "xls" || testmsg === "xlsx";
if (!extension) {
this.$message({
message: "上传文件只能是.doc、.docx、.xls、.xlsx格式!",
type: "warning",
});
// 文件大小校验
let size200M = file.size / 1024 / 1024 < 200
if (!size200M) {
this.$message.warning('上传大小不能超过200M!')
return false
}
}
return extension;
},
changeHandler(file, fileList) {
// 处理文件改变时的逻辑
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
// 点击提交按钮文件上传
submitUpload() {
this.$refs.upload.submit();
this.upload.open = false
this.$message({
message: '导入成功',
type: 'success'
});
getList();
},
},
};
</script>后端
Controller
import org.springframework.web.multipart.MultipartFile;
import org.springframework.ui.Model;
import java.io.InputStream;
@RestController
@AllArgsConstructor
@RequestMapping("/resource/template")
@Api(value = "Template", tags = "Template接口")
public class TemplateController extends BladeController {
/**
* word文件上传
* @return
*/
@RequestMapping("/word")
@ApiOperationSupport(order = 10)
@ApiOperation(value = "导入word文件", notes = "传入Template")
public R parsingWord(/*@RequestParam("file")*/ MultipartFile file, Model model) throws Exception {
int parsingWord = 0;
try {
Template template = new Template();
InputStream inputStream = file.getInputStream();
FileTypeUtils flt = new FileTypeUtils();
String filetype = flt.getFileType(inputStream); // 根据输入流流获取文件的类型(解析文件头判断文件格式) 比如: .dox .docx
InputStream is = file.getInputStream();
if (is.available() != 0) { //判断输入流是否为空(文件是否为空)
//根据不同的文件类型，进行不同的解析
if ("doc".equals(filetype)) {
template = WordLead.readWord2003(is);
} else if ("docx".equals(filetype)) {
template = WordLead.readWord2007(is);
} else if ("xml".equals(filetype)) {
template = WordLead.readXml(is);
}
}
parsingWord = templateService.parsingWord(template);
} catch (IndexOutOfBoundsException e) {
e.printStackTrace();
}
model.addAttribute("msg", "导入成功！");
return R.data(parsingWord);
}
}Utils
FileTypeUtils.java
import java.io.IOException;
import java.io.InputStream;
import java.util.HashMap;
public class FileTypeUtils {
// 缓存文件头信息-文件头信息
public static final HashMap<String, String> mFileTypes = new HashMap<String, String>(); // HashMap集合
// 静态代码块 static {...}
static {
//文档
mFileTypes.put("D0CF11E0", "doc"); // "D0CF11E0" 对应的文件类型是 "doc"，表示 Microsoft Word 97-2003 文档文件。
mFileTypes.put("504B0304", "docx"); // "504B0304" 对应的文件类型是 "docx"，表示 Microsoft Word 2007 及更高版本的文档文件。
mFileTypes.put("3C3F786D", "xml"); // "3C3F786D" 对应的文件类型是 "xml"，表示 XML 格式的文件。
mFileTypes.put("3C68746D", "htm"); // "3C68746D" 对应的文件类型是 "htm"，表示 HTML 格式的文件。
mFileTypes.put("3C21444F", "html"); // "3C21444F" 对应的文件类型是 "html"，同样表示 HTML 格式的文件。
}
/**
* 根据文件路径获取文件头信息
* @param is
* @return 文件头信息
* 通过获取文件头信息，然后查找哈希表中对应的文件类型，并返回这个文件类型字符串
* 总结：这个方法的作用是通过输入流中的文件头信息来确定文件类型，利用之前缓存的文件头字节码与文件类型的映射关系，在哈希表 mFileTypes 中查找匹配的文件类型，然后返回文件类型字符串。
* 这个方法适用于无法从文件扩展名或其他信息中直接确定文件类型的情况，而需要依赖文件头信息来判断文件类型的场景。
*/
// 输入流 InputStream 作为参数，并返回一个字符串，表示根据文件头信息确定的文件类型
public static String getFileType(InputStream is) {
/**
* getFileHeader(is) 方法用于从输入流 is 中获取文件头信息。
* mFileTypes.get(...) 方法根据文件头信息在之前的哈希表 mFileTypes 中查找对应的文件类型。
*/
return mFileTypes.get(getFileHeader(is));
}
/**
* 根据文件路径获取文件头信息
* @param is 文件路径
* @return 文件头信息
*/
public static String getFileHeader(InputStream is) {
String value = null; // 什么空变量
try {
byte[] b = new byte[4]; // 创建了一个长度为 4 的字节数组 b
/*
* int read() 从此输入流中读取一个数据字节。 int read(byte[] b) 从此输入流中将最多 b.length
* 个字节的数据读入一个 byte 数组中。 int read(byte[] b, int off, int len)
* 从此输入流中将最多 len 个字节的数据读入一个 byte 数组中。
*/
is.read(b, 0, b.length); // 调用 is.read(b, 0, b.length) 方法从输入流中读取最多 4 个字节的数据，并将其存储到字节数组 b 中
value = bytesToHexString(b); // 将字节数组 b 转换为表示其十六进制字符串的形式，并将结果赋值给变量 value
} catch (Exception e) {
} finally {
if (null != is) { // 如果输入流 is 不为 null，则调用 is.close() 方法关闭输入流
try {
is.close(); // 关流
} catch (IOException e) {
}
}
}
return value;
}
/**
* 将要读取文件头信息的文件的byte数组转换成string类型表示
* @param src
* 要读取文件头信息的文件的byte数组
* @return 文件头信息
*/
// 总结：这个方法的作用是将给定的字节数组转换为一个十六进制字符串表示，每个字节都以两位的形式表示，并且字母部分都是大写。这种转换通常用于将字节数据转换为可读的十六进制形式，用于显示或其他需要的场景
private static String bytesToHexString(byte[] src) {
StringBuilder builder = new StringBuilder(); // StringBuilder 对象
// 通过条件检查，确保输入的字节数组 src 不为 null 且长度大于 0，如果不满足条件，则返回 null
if (src == null || src.length <= 0) {
return null;
}
String hv;
for (int i = 0; i < src.length; i++) {
// 以十六进制（基数 16）无符号整数形式返回一个整数参数的字符串表示形式，并转换为大写
// 使用 Integer.toHexString(src[i] & 0xFF) 将字节转换为十六进制字符串。这里的 src[i] & 0xFF 用于确保字节被视为无符号整数
// 将转换后的十六进制字符串转换为大写形式，使用 .toUpperCase() 方法
hv = Integer.toHexString(src[i] & 0xFF).toUpperCase();
// 如果转换后的十六进制字符串的长度小于 2，就在其前面添加一个 '0'，以确保每个字节都以两位的形式表示
if (hv.length() < 2) {
// 将每个字节的十六进制字符串追加到 builder 中
builder.append(0);
}
// 循环结束后，调用 builder.toString() 方法将 builder 中的内容转换为一个完整的十六进制字符串，并将其作为方法的返回值
builder.append(hv);
}
return builder.toString();
}
}
HtmWordPro.java
import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
public class HtmWordPro {
/* public WgglFb readHmt(InputStream stream) {
Template template = new Template();
String html = getFileContent(stream);//获取html内容
Document doc = Jsoup.parse(html);
Elements rows = doc.select("table").get(0).select("tr");
for(int i=0;i<rows.size();i++){
Element row = rows.get(i);
int tds = row.select("td").size();
for(int j=0;j<tds;j++){
String content = row.select("td").get(j).text().trim();
if (content.equals("模板名称")) {
template.setName(row.select("td").get(++j).text().trim());
} else if (content.equals("备注")) {
template.setRemarks(row.select("td").get(++j).text().trim());
}
// else if (content.equals("地址")) {
// template.setRy_dz(row.select("td").get(++j).text().trim());
// } else if (content.equals("事件类型")) {
// template.setSj_lx(row.select("td").get(++j).text().trim());
// } else if (content.equals("事件地点")) {
// template.setSj_dd(row.select("td").get(++j).text().trim());
// } else if (content.equals("事件内容")) {
// template.setSj_nr(row.select("td").get(++j).text().trim());
// }
}
}
return template;
}*/
/**
* 获取html内容
* @param stream
* @return
*/
public static String getFileContent(InputStream stream) {
try {
// 通过 new InputStreamReader(stream, "GBK") 创建了一个输入流读取器，同时指定了字符编码为 GBK。这是为了确保以正确的编码方式读取文件内容，以避免乱码问题
BufferedReader bis = new BufferedReader(new InputStreamReader(stream,"GBK"));//写上文件格式，要不然会乱码
StringBuilder szContent = new StringBuilder();
String szTemp;
// readLine() 读取每一行
while ((szTemp = bis.readLine()) != null) {
// 追加
szContent.append(szTemp);
}
bis.close(); // 关流 释放资源
return szContent.toString();
} catch (Exception e) {
return "";
}
}
}
WordLead.java
import org.apache.poi.hwpf.HWPFDocument;
import org.apache.poi.hwpf.usermodel.*;
import org.apache.poi.xwpf.usermodel.*;
import org.openxmlformats.schemas.wordprocessingml.x2006.main.CTTblPr;
import org.springblade.modules.resource.entity.Template;
import org.w3c.dom.Document;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
import javax.xml.parsers.*;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import org.w3c.dom.*;
import org.xml.sax.SAXException;
public class WordLead {
/**
* word2007以上版本
* @param is
* @return
* @throws IOException
*/
public static Template readWord2007(InputStream is) throws IOException {
Template template = new Template(); // 实体类
XWPFDocument doc = new XWPFDocument(is); // 使用给定的输入流创建一个 XWPFDocument 对象，表示 Word 文档
List<XWPFParagraph> paras = doc.getParagraphs(); // 获取文档中的段落列表
// 获取第一个段落中的运行列表
List<XWPFRun> runs = paras.get(0).getRuns();
for (int i = 0; i < runs.size(); i++) {
runs.get(i);
}
// 遍历运行列表，并获取每个运行的文本内容
for (XWPFRun run : runs) {
String text = run.getText(0);
}
// 遍历段落列表，并获取每个段落的文本内容
for (XWPFParagraph para : paras) {//当前段落的属性
String text = para.getText();
}
List tables = doc.getTables(); // 获取文档中的表格列表
XWPFTable xwpf = (XWPFTable) tables.get(0); // 获取第一个表格对象
String text = xwpf.getText(); // 获取表格中的文本内容
CTTblPr pr = xwpf.getCTTbl().getTblPr(); // 获取第一个表格的属性对象 CTTblPr
List<XWPFTableRow> rows = xwpf.getRows(); // 获取表格中的行列表
// 表格有多少数据 下方就写所对应字段数据
for (XWPFTableRow row : rows) {
List<XWPFTableCell> tableCells = row.getTableCells();
for (int i = 0; i < tableCells.size(); i++) {
if (tableCells.get(i).getText().equals("模板名称")) {
template.setName(tableCells.get(++i).getText());
} else if (tableCells.get(i).getText().equals("备注")) {
template.setRemarks(tableCells.get(++i).getText());
}
// else if (tableCells.get(i).getText().equals("地址")) {
// template.setRy_dz(tableCells.get(++i).getText());
// } else if (tableCells.get(i).getText().equals("事件类型")) {
// template.setSj_lx(tableCells.get(++i).getText());
// } else if (tableCells.get(i).getText().equals("事件地点")) {
// template.setSj_dd(tableCells.get(++i).getText());
// } else if (tableCells.get(i).getText().equals("事件内容")) {
// template.setSj_nr(tableCells.get(++i).getText());
// }
}
}
return template; // 返回实体类
}
/**
* word2003版
* @param stream
* @return
* @throws IOException
*/
public static Template readWord2003(InputStream stream) throws IOException {
Template template = new Template(); // 实体类
HWPFDocument hwpf = new HWPFDocument(stream); // HWPFDocument 是 Apache POI 库中用于处理旧版本的 Word 文档（.doc）的类。它通常用于处理 Word 97-2003 格式的文档
Range range = hwpf.getRange();// 得到文档的读取范围
TableIterator it = new TableIterator(range);// 迭代文档中的表格 TableIterator 是 Apache POI 库中的一个类，它用于遍历 Word 文档中的表格。
String info = ""; // 用于存储表格信息
String cellString = ""; // 用于存储表格单元格的内容
if (it.hasNext()) { // 是否还有下一个表格
TableRow tr = null;
TableCell td = null;
Paragraph para = null;
Table tb = it.next(); // 是否有下一个
for (int i = 0; i < tb.numRows(); i++) {
tr = tb.getRow(i);
for (int j = 0; j < tr.numCells(); j++) {
td = tr.getCell(j);// 取得单元格
// 取得单元格的内容
para = td.getParagraph(0);
cellString = para.text();
boolean flag = true;
if (cellString != null && cellString.compareTo("") != 0 && flag == true) {
cellString = cellString.trim(); // 如果不trim，取出的内容后会有一个乱码字符
}
if (cellString.equals("事件编号")) {
template.setName(tr.getCell(++j).getParagraph(0).text());
} else if (cellString.equals("姓名")) {
template.setRemarks(tr.getCell(++j).getParagraph(0).text());
}
// else if (cellString.equals("地址")) {
// template.setRy_dz(tr.getCell(++j).getParagraph(0).text());
// } else if (cellString.equals("事件类型")) {
// template.setSj_lx(tr.getCell(++j).getParagraph(0).text());
// } else if (cellString.equals("事件地点")) {
// template.setSj_dd(tr.getCell(++j).getParagraph(0).text());
// } else if (cellString.equals("事件内容")) {
// template.setSj_nr(tr.getCell(++j).getParagraph(0).text());
// }
}
}
}
return template;
}
/**
* xml格式word
* @param stream
* @return
* @throws IOException
* @throws ParserConfigurationException
* @throws SAXException
*/
public static Template readXml(InputStream stream) throws IOException, ParserConfigurationException, SAXException, SAXException {
Template template = new Template(); // 实体类
DocumentBuilderFactory bdf = DocumentBuilderFactory.newInstance(); // DocumentBuilderFactory.newInstance() 是用于获取一个 DocumentBuilderFactory 实例，它是用于创建 DocumentBuilder 对象的工厂类。
DocumentBuilder bd = bdf.newDocumentBuilder(); // DocumentBuilder 对象 用于解析和操作 XML 文件
Document doc = bd.parse(stream); // 我们可以通过 doc 对象来获取 XML 文档的元素、属性、文本内容等，并进行相应的处理和操作
doc.getDocumentElement().normalize(); // 获取 XML 文档的根元素，并调用 normalize() 方法对文档的结构进行规范化处理。normalize() 方法会移除空白节点，并合并相邻的文本节点，以确保文档的结构一致性和规范性
Element root = doc.getDocumentElement(); // 获取根元素
String rootName = root.getNodeName(); // 获取根元素的节点名称，并将其保存在 rootName 字符串变量中。getNodeName() 方法返回根元素的名称
NodeList namesList = doc.getElementsByTagName("w:tc"); // 获取指定名称为 "w:tc" 的元素列表，并将其保存在一个 NodeList 对象 namesList 中。getElementsByTagName() 方法用于按照指定的元素名称获取所有匹配的元素
int length = namesList.getLength(); // 获取 namesList 中元素的数量，并将其保存在 length 整数变量中
// 根据数量进行循环
for (int i = 0; i < length; i++) {
Node node = namesList.item(i); // 获取每一个节点数据
String content = node.getTextContent(); // getTextContent() 方法返回节点及其子节点的文本内容。如果节点没有文本内容，则返回空字符串
if (content.equals("事件编号")) {
template.setName(namesList.item(++i).getTextContent());
} else if (content.equals("姓名")) {
template.setRemarks(namesList.item(++i).getTextContent());
}
// else if (content.equals("地址")) {
// template.setRy_dz(namesList.item(++i).getTextContent());
// } else if (content.equals("事件类型")) {
// template.setSj_lx(namesList.item(++i).getTextContent());
// } else if (content.equals("事件地点")) {
// template.setSj_dd(namesList.item(++i).getTextContent());
// } else if (content.equals("事件内容")) {
// template.setSj_nr(namesList.item(++i).getTextContent());
// }
}
return template;
}
/**
* htm格式word(因为一个class里会有jar冲突，解析方法单独写了一个类)
* @param stream
* @return
* @throws IOException
* @throws ParserConfigurationException
* @throws SAXException
*/
/*public static WgglFb readHtm(InputStream stream) {
HtmWordPro htmWord=new HtmWordPro();
WgglFb fb = htmWord.readHmt(stream);
return fb;
}*/
}
下载
记录一下
<template>
<div>
<div>
<el-card shadow="hover" class="card">
<div>
<div class="leftPhotograph">照片</div>
<div class="rightMessage">
<el-table :data="tableData">
<el-table-column label="姓名" align="center" prop="name" width="80px">孙悟空</el-table-column>
<el-table-column label="性别" align="center" prop="sex" width="50px"></el-table-column>
<el-table-column label="毕业院校" align="center" prop="graduateInstitutions" width="132px"></el-table-column>
<el-table-column label="最高学历" align="center" prop="maxEducation" width="80px"></el-table-column>
<el-table-column label="专业" align="center" prop="major" width="160px"></el-table-column>
<el-table-column label="职称" align="center" prop="specialistTitle" width="50px"></el-table-column>
<el-table-column label="邮箱" align="center" prop="email" width="160px"></el-table-column>
</el-table>
<el-table :data="tableDataTow">
<el-table-column label="研究领域" align="center" prop="researchField" width="180px">
</el-table-column>
<el-table-column label="现工作单位" align="center" prop="unitPosition"></el-table-column>
<el-table-column label="博导" align="center" prop="doctorTutor" width="100px"></el-table-column>
<el-table-column label="院士" align="center" prop="academician" width="100px"></el-table-column>
<el-table-column label="特殊津贴" align="center" prop="specialAllowance" width="100px"></el-table-column>
</el-table>
</div>
</div>
</el-card>
</div>
<div>
<el-button @click="specialistWord()">上传专家库信息</el-button>
</div>
<p v-html="previewData"></p>
<!-- 专家上传word文件对话框 -->
<el-dialog :title="title" :visible.sync="uploadWord.open" :before-close="handleClose" width="400px">
<el-upload class="upload-demo" drag :action="uploadWord.url" multiple show-file-list accept=".doc,.docx," :before-upload="beforeUploadWord" ref="upload" :on-preview="handlePreview"
:on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :on-exceed="handleExceed" :on-success="handleUploadSuccess" :on-change="(file, fileList) => changeHandler(file, fileList)">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">
只能上传word文件，且能不超过500kb！！！
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
</div>
</el-upload>
<span slot="footer" class="dialog-footer">
<el-button @click="uploadWord.open = false">取 消</el-button>
<el-button type="primary" @click="confirmButtonDialogWord()">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import App from "@/App.vue";
export default {
components: { App },
data() {
return {
lpl: {
opo: "123456测试",
},
tableData: [
{
name: "孙悟空",
sex: "男",
graduateInstitutions: "南京理工大学",
maxEducation: "硕士",
major: "军事理论与实践",
specialistTitle: "教授",
email: "2184786310@qq.com",
},
],
tableDataTow: [
{
researchField: "新式坦克研发",
unitPosition: "南京大学军事学院",
doctorTutor: "是",
academician: "是",
specialAllowance: "是",
},
],
title: "",
// 文件列表
fileList: [],
// word文件导入参数
uploadWord: {
// 是否显示弹出层(对应 dialog 框的显示与隐藏)
open: false,
// 弹出层标题
title: "",
// 是否禁用上传
isUploading: false,
updateSupport: 0,
noticeId: "",
// 设置上传的请求头部
headers: { Authorization: "Bearer " },
// 上传的地址
url: `/dev-api/recruit/web/specialist/uploadWord`,
},
previewData: "",
};
},
created() {
this.getListSpecialist();
},
methods: {
// word 文件上传
specialistWord() {
this.uploadWord.open = true;
},
// dialog 对话框 右上方 叉号
handleClose(done) {
this.$confirm("确认关闭？")
.then((response) => {
done();
})
.catch((response) => {});
},
// word文件上传的一些函数方法
beforeUploadWord(file) {
console.log("文件类型是：", file);
const uploadWord = file.name.substring(file.name.lastIndexOf(".") + 1);
const extensionWord = uploadWord === "doc" || uploadWord === "docx";
if (!extensionWord) {
this.$message.error("上传只能是 .doc 或者 .docx 文件!");
}
// 1TB=1024GB 1GB=1024MB 1MB=1024KB 1KB=1024字节
// 控制台答应的是字节 计算机文件的大小是KB
const uploadWordSize = file.size / 1024 / 1024 < 1;
if (!uploadWordSize) {
this.$message.error("上传文件大小超过1MB");
}
return extensionWord;
},
// 预览文件时调用的方法
handlePreview(file) {
console.log("预览文件操作", file);
// const reader = new FileReader();
// reader.onload = (e) => {
// window.open(file);
// // this.previewData = e.target.result;
// this.$message({
// message: e.target.result,
// type: 'success'
// });
// };
// reader.readAsDataURL(file.raw);
},
// 删除文件时调用的方法
handleRemove(file, fileList) {
console.log("文件移除操作", file, fileList);
},
// 当超过最大数量时调用的方法
handleExceed(files, fileList) {
this.$message.error(
`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
files.length + fileList.length
} 个文件`
);
},
// 当文件上传成功时回调的方法
handleUploadSuccess(response, file, fileList) {
console.log("文件上传成功");
this.uploadWord.isUploading = false;
let messageContent; // 存储要显示的消息内容
if (response != "成功") {
// 处理失败的情况
messageContent = response.msg || "上传失败";
this.$message.error(messageContent);
} else if (response === "成功") {
// 处理成功的清况
messageContent = "上传成功";
this.$message.success(messageContent);
}
},
/** 下载模板操作 */
importTemplate() {
// this.$download(
// "web/specialist/exportTemplate",
// {},
// `专家上传模板_${new Date().getTime()}.xlsx`
// );
this.axios({
methos: "get",
url: "web/specialist/exportTemplate",
requestType: "blob",
}).then((response) => {
console.log("response----------" + JSON.stringify(response));
});
},
// 当选择文件或者移除文件后调用的方法，通过方法参数获取新旧文件对象和文件列表。
changeHandler(file, fileList) {
// 处理文件改变时的逻辑
},
// 确认按钮
confirmButtonDialogWord() {
this.$refs.upload.submit();
this.uploadWord.open = false;
// 判断是否有上传的文件
// if (this.fileList.length != 0) {
// this.$refs.upload.submit();
// this.uploadWord.open = false;
// } else {
// this.$message.warning('请先选择要上传的文件');
// return;
// }
},
getListSpecialist() {
let _this = this;
console.log("这个方法执行了！！！+++++++++++++++++++++++++++++++++++");
console.log(JSON.stringify(_this.lpl) + "qemfjnenewfnjefnjenole");
this.$api.specialist.getSpecialistList().then((response) => {
console.log("这个方法执行了！！！");
});
},
},
};
</script>
<style>
.card {
margin-left: 180px;
width: 920px;
}
.el-card__body {
padding: 0px;
}
.leftPhotograph {
/* 225 */
width: 205px;
height: 205px;
float: left;
}
.rightMessage {
float: left;
}
</style>
772
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
