VUE动态生成word的实现


Posted in Javascript onJuly 26, 2020

不废话,直接上代码。

前端代码:

<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-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的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
javascript css float属性的特殊写法
Nov 13 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
详解vue 命名视图
Aug 14 Javascript
Element Dialog对话框的使用示例
Jul 26 #Javascript
在vue中使用防抖函数组件操作
Jul 26 #Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 #Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 #Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 #Javascript
Element Tooltip 文字提示的使用示例
Jul 26 #Javascript
Element Popover 弹出框的使用示例
Jul 26 #Javascript
You might like
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
php生成QRcode实例
2014/09/22 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
flexigrid 参数说明
2010/11/23 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
JavaScript File分段上传
2016/03/10 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
Python中的Numpy入门教程
2014/04/26 Python
gearman的安装启动及python API使用实例
2014/07/08 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
python3实现基于用户的协同过滤
2018/05/31 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
keras中的backend.clip用法
2020/05/22 Python
大专毕业生自我评价分享
2013/11/10 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android