VUE動態生成word的實現
阿新 • • 發佈:2020-07-27
不廢話,直接上程式碼。
前端程式碼:
<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: '申請人不能為空!',applyPhone: [ { required: true,message: '電話不能為空!',trigger: 'change' } ],startDate: [ { required: true,type: 'date',message: '請輸入license有效期!',endDate: [ { required: true,} } },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,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,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-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,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的實現就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。