VUE动态生成word的实现

不废话，直接上代码。

前端代码：

<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<?, ?> dataMap, String type) { String name = '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- 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.resultconst fixedData = this.fixdata(data)const workbook = XLSX.read(btoa(fixedData), { type: ’base64’ })const firstSheetName = workbook.SheetNames[0] // 第一张表 sheet1const worksheet = workbook.Sheets[firstSheetName] // 读取sheet1表中的数据 delete worksheet[’!merges’]let A_l = worksheet[’!ref’].split(’:’)[1] //当excel存在标题行时worksheet[’!ref’] = `A2:${A_l}`const tableTitle = firstSheetNameconst 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的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。