VUE动态生成word的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
 * 生成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();
    }
  }
 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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;
  }
 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
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;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
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
  }