不废话，直接上代码。
前端代码：
<template>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="110">
<FormItem label="项目（全称）：" prop="orgName">
<Input v-model="formValidate.orgName" placeholder="请输入项目名称"></Input>
</FormItem>
<FormItem label="申请人：" prop="applyName" >
<Input v-model="formValidate.applyName" placeholder="请输入申请人"></Input>
</FormItem>
<FormItem label="电话：" prop="applyPhone">
<Input v-model="formValidate.applyPhone" placeholder="请输入电话"></Input>
</FormItem>
<FormItem label="生效日期：" style="float: left">
<Row>
<FormItem prop="startDate">
<DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择生效日期" v-model="formValidate.startData"></DatePicker>
</FormItem>
</Row>
</FormItem>
<FormItem label="失效日期：">
<Row>
<FormItem prop="endDate">
<DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择失效日期" v-model="formValidate.endData"></DatePicker>
</FormItem>
</Row>
</FormItem>
<FormItem label="备注：" prop="vmemo">
<Input v-model="formValidate.vmemo" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="备注"></Input>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formValidate')">生成申请单</Button>
</FormItem>
</Form>
</template>
<script>
import axios from 'axios';
export default {
data () {
return {
formValidate: {
orgName: '',
applyName: '',
applyPhone: '',
startDate: '',
endDate: '',
vmemo:''
},
ruleValidate: {
orgName: [
{ required: true, message: '项目名称不能为空！', trigger: 'blur' }
],
applyName: [
{ required: true, message: '申请人不能为空！', trigger: 'blur' }
],
applyPhone: [
{ required: true, message: '电话不能为空！', trigger: 'change' }
],
startDate: [
{ required: true, type: 'date', message: '请输入license有效期！', trigger: 'change' }
],
endDate: [
{ required: true, type: 'date', message: '请输入license有效期！', trigger: 'change' }
],
}
}
},
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
axios({
method: 'post',
url: this.$store.getters.requestNoteUrl,
data: this.formValidate,
responseType: 'blob'
}).then(res => {
this.download(res.data);
});
}
});
},
download (data) {
if (!data) {
return
}
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', this.formValidate.orgName+'('+ this.formValidate.applyName +')'+'-申请单.doc');
document.body.appendChild(link);
link.click();
}
}
}
</script>
后台：
/**
* 生成license申请单
*/
@RequestMapping(value = "/note", method = RequestMethod.POST)
public void requestNote(@RequestBody LicenseRequestNoteModel noteModel, HttpServletRequest req, HttpServletResponse resp) {
File file = null;
InputStream fin = null;
ServletOutputStream out = null;
try {
req.setCharacterEncoding("utf-8");
file = ExportDoc.createWord(noteModel, req, resp);
fin = new FileInputStream(file);
resp.setCharacterEncoding("utf-8");
resp.setContentType("application/octet-stream");
resp.addHeader("Content-Disposition", "attachment;filename="+ noteModel.getOrgName()+"申请单.doc");
resp.flushBuffer();
out = resp.getOutputStream();
byte[] buffer = new byte[512]; // 缓冲区
int bytesToRead = -1;
// 通过循环将读入的Word文件的内容输出到浏览器中
while ((bytesToRead = fin.read(buffer)) != -1) {
out.write(buffer, 0, bytesToRead);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (fin != null) fin.close();
if (out != null) out.close();
if (file != null) file.delete(); // 删除临时文件
} catch (IOException e) {
e.printStackTrace();
}
}
}
public class ExportDoc {
private static final Logger logger = LoggerFactory.getLogger(ExportDoc.class);
// 针对下面这行有的报空指针，是目录问题，我的目录（项目/src/main/java,项目/src/main/resources）,这块也可以自己指定文件夹
private static final String templateFolder = ExportDoc.class.getClassLoader().getResource("/").getPath();
private static Configuration configuration = null;
private static Map<String, Template> allTemplates = null;
static {
configuration = new Configuration();
configuration.setDefaultEncoding("utf-8");
allTemplates = new HashedMap();
try {
configuration.setDirectoryForTemplateLoading(new File(templateFolder));
allTemplates.put("resume", configuration.getTemplate("licenseApply.ftl"));
} catch (IOException e) {
e.printStackTrace();
throw new RuntimeException(e);
}
}
public static File createWord(LicenseRequestNoteModel noteModel, HttpServletRequest req, HttpServletResponse resp) throws Exception {
File file = null;
req.setCharacterEncoding("utf-8");
// 调用工具类WordGenerator的createDoc方法生成Word文档
file = createDoc(getData(noteModel), "resume");
return file;
}
public static File createDoc(Map<"temp" + (int) (Math.random() * 100000) + ".doc";
File f = new File(name);
Template t = allTemplates.get(type);
try {
// 这个地方不能使用FileWriter因为需要指定编码类型否则生成的Word文档会因为有无法识别的编码而无法打开
Writer w = new OutputStreamWriter(new FileOutputStream(f), "utf-8");
t.process(dataMap, w);
w.close();
} catch (Exception ex) {
ex.printStackTrace();
throw new RuntimeException(ex);
}
return f;
}
private static Map<String, Object> getData(LicenseRequestNoteModel noteModel) throws Exception {
Map<String, Object> map = new HashedMap();
map.put("orgName", noteModel.getOrgName());
map.put("applyName", noteModel.getApplyName());
map.put("applyPhone", noteModel.getApplyPhone());
map.put("ncVersion", noteModel.getNcVersionModel());
map.put("environment", noteModel.getEnvironmentModel());
map.put("applyType", noteModel.getApplyTypeModel());
map.put("mac", GetLicenseSource.getMacId());
map.put("ip", GetLicenseSource.getLocalIP());
map.put("startData", DateUtil.Date(noteModel.getStartData()));
map.put("endData", DateUtil.Date(noteModel.getEndData()));
map.put("hostName", noteModel.getHostNames());
map.put("vmemo", noteModel.getVmemo());
return map;
}
}
public class LicenseRequestNoteModel{
private String orgName = null;
private String applyName = null;
private String applyPhone = null;
private String ncVersionModel= null;
private String environmentModel= null;
private String applyTypeModel= null;
@JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
@DateTimeFormat(pattern = "yyyy-MM-dd")
private Date startData= null;
@JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
@DateTimeFormat(pattern = "yyyy-MM-dd")
private Date endData= null;
private String[] hostName= null;
private String vmemo= null;
private String applyMAC= null;
private String applyIP= null;
public String getOrgName() {
return orgName;
}
public void setOrgName(String projectName) {
this.orgName = projectName;
}
public String getApplyName() {
return applyName;
}
public void setApplyName(String applyName) {
this.applyName = applyName;
}
public String getApplyPhone() {
return applyPhone;
}
public void setApplyPhone(String applyPhone) {
this.applyPhone = applyPhone;
}
public String getNcVersionModel() {
return ncVersionModel;
}
public void setNcVersionModel(String ncVersionModel) {
this.ncVersionModel = ncVersionModel;
}
public String getEnvironmentModel() {
return environmentModel;
}
public void setEnvironmentModel(String environmentModel) {
this.environmentModel = environmentModel;
}
public String getApplyTypeModel() {
return applyTypeModel;
}
public void setApplyTypeModel(String applyTypeModel) {
this.applyTypeModel = applyTypeModel;
}
public Date getStartData() {
return startData;
}
public void setStartData(Date startData) {
this.startData = startData;
}
public Date getEndData() {
return endData;
}
public void setEndData(Date endData) {
this.endData = endData;
}
public String[] getHostName() {
return hostName;
}
public String getHostNames() {
return StringUtils.join(this.hostName,"，");
}
public void setHostName(String[] hostName) {
this.hostName = hostName;
}
public String getVmemo() {
return vmemo;
}
public void setVmemo(String vmemo) {
this.vmemo = vmemo;
}
public String getApplyMAC() {
return applyMAC;
}
public void setApplyMAC(String applyMAC) {
this.applyMAC = applyMAC;
}
public String getApplyIP() {
return applyIP;
}
public void setApplyIP(String applyIP) {
this.applyIP = applyIP;
}
}
补充知识：vue elementui 页面预览导入excel表格数据
html代码：
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>数据预览</span>
</div>
<div class="text item">
<el-table :data="tableData" border highlight-current-row style="width: 100%;">
<el-table-column :label="tableTitle" >
<el-table-column min-width="150" v-for='item tableHeader' :prop="item" :label="item" :key='item'>
</el-table-column>
</el-table-column>
</el-table>
</div>
</el-card>
js代码：
import XLSX from 'xlsx'
data() {
return {
tableData: '',
tableHeader: ''
}
},
mounted: {
document.getElementsByClassName('el-upload__input')[0].setAttribute('accept', '.xlsx, .xls')
document.getElementsByClassName('el-upload__input')[0].onchange = (e) => {
const files = e.target.filesconst itemFile = files[0] // only use files[0]if (!itemFile)
return this.readerData(itemFile)
}
},
methods: {
generateDate({ tableTitle, header, results }) {
this.tableTitle = tableTitle
this.tableData = results
this.tableHeader = header
},
handleDrop(e) {
e.stopPropagation()
e.preventDefault()
const files = e.dataTransfer.files
if (files.length !== 1) {
this.$message.error('Only support uploading one file!')
return
}
const itemFile = files[0] // only use files[0]
this.readerData(itemFile)
e.stopPropagation()
e.preventDefault()
},
handleDragover(e) {
e.stopPropagation()
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
},
readerData(itemFile) {
if (itemFile.name.split('.')[1] != 'xls' && itemFile.name.split('.')[1] != 'xlsx') {
this.$message({message: '上传文件格式错误，请上传xls、xlsx文件！',type: 'warning'});
} else {
const reader = new FileReader()
reader.onload = e => {
const data = e.target.result
const fixedData = this.fixdata(data)
const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
const firstSheetName = workbook.SheetNames[0] // 第一张表 sheet1
const worksheet = workbook.Sheets[firstSheetName] // 读取sheet1表中的数据 delete worksheet['!merges']let A_l = worksheet['!ref'].split(':')[1] //当excel存在标题行时
worksheet['!ref'] = `A2:${A_l}`
const tableTitle = firstSheetName
const header = this.get_header_row(worksheet)
const results = XLSX.utils.sheet_to_json(worksheet)
this.generateDate({ tableTitle, header, results })
}
reader.readAsArrayBuffer(itemFile)
}
},
fixdata(data) {
let o = ''
let l = 0
const w = 10240
for (; l < data.byteLength / w; ++l)
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
return o
},
get_header_row(sheet) {
const headers = []
const range = XLSX.utils.decode_range(sheet['!ref'])
let Cconst R = range.s.r /* start in the first row */
for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
var hdr = 'UNKNOWN ' + C // <-- replace with your desired defaultif (cell && cell.t)
hdr = XLSX.utils.format_cell(cell)
headers.push(hdr)
}
return headers
}
以上这篇VUE动态生成word的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。