java 前端echarts图+表格导出word文档并下载

1.需求背景：

将前端的echarts分析图，和数据表格导出成word文档，并实现现实页面下载。

2.文档效果图：

三.实现步骤：

--1.创建word文档：

按需求要求样式创建word文档，echarts图部分用任意一个图片代替。

--2.另存为xml文档：

将上一步设计好的word文档另存为.xml格式。

--3.制作模版：

需要替换的文字的地方，换成占位符。

找到表格部分

只留一个完整包含里面的内容，增加list循环遍历如下图：

找到图片位置如图

替换图片占位符如下图：

图片比例修改，这个等后续生成文档发现图片比例不协调时可以修改，先不用修改

表格总宽度修改，这个等后续生成文档发现表格比例不协调时可以修改，先不用修改

--4.另存为.ftl文档：

将上一步设计好的xml文档另存为.ftl格式。

--5.工程目录：

--6.html代码




    
    ECharts
    
    
    
    
        .echarts_div {
            width: 900px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 0 auto;
        }

        .table {
            border: 1px solid #ccc;
            margin: 0 auto;
            margin-top: 10px;
        }
        .tables{
            width: 900px;
            margin: 0 auto;
            height: auto;
            margin-top: 20px;
        }
        .table1{
            width: 900px; margin:0px; padding:0px;
        }
        .table1 th{
            border:1px #ddd solid;
        }
        .table1 td{
            border:1px #ddd solid; text-align:center;
        }
    




    
        
        
            申请年
            专利申请量
        
        
            2019
            20000
        
        
            2020
            30000

--7.模版文档




    
        
            
                
                
                
                
            
        
    
    
        
            
                
                
                
                
                
                
            
        
    
    
        
            
                
                    
                        
                            
                            
                            
                            
                                
                                
                            
                        
                        
                        
                        
                            
                                
                                
                            
                            ${banner}
<#--                            手机专利分析报告-->
                        
                    
                    
                        
                            
                            
                            
                                
                                
                            
                        
                        
                            
                                
                                
                            
                            ${title}
<#--                            发明人排名分析-->
                        
                    
                    
                        
                            
                                
                            
                            
                            
                                
                                
                            
                        
                        
                            
                                
                                
                            
                            ${desc}
<#--                            分析该技术领域内的主要发明人。有助于评估特定技术领域内最佳人才并助于公司人才引进。-->
                        
                    
                    
                        
                            
                                
                            
                            
                            
                                
                                
                            
                        
                    
                    
                        
                            
                            
                                
                                
                            
                        
                    
                    
                        
                            
                        
                        
                            
                                
                                    
                                    
                                    
                                    
                                        
                                    
                                    
                                        
                                            
                                                
                                                    
                                                    
                                                        
                                                    
                                                
                                                
                                                    
                                                    
                                                        
                                                    
                                                
                                                
                                                    
                                                        
                                                        
                                                    
                                                    
                                                        
                                                    
                                                    
                                                    
                                                        
                                                    
                                                
                                            
                                        
                                    
                                
                            
                        
                    
                    
                        
                            
                                
                            
                            
                        
                    
                    
                        
                            
                        
                    
                    
                        
                            
                            
                            
                            
                                
                                
                                
                                
                                
                                
                            
                            
                            
                                
                                
                                
                                
                            
                        
                        <#list table_list as rows>
                            
                                <#list rows as cell>
                                    
                                        
                                            
                                        
                                        
                                            
                                                
                                                
                                                
                                                    
                                                
                                            
                                            
                                                
                                                    
                                                
                                                ${cell}
                                            
                                        
                                    
                                
                            
                        
                    
                    
                        
                            
                            
                                
                                
                            
                        
                    
                    
                        
                        
                        
                        
                    
                
            
        
    
    
        
            
                
            
        
    
    
        
            
                
                    
                
            
        
    
    
        
            
                
                    
                
            
        
    
    
        
            
                
                1
                0
                0
                0
                0
                false
                false
                0
                WPS Office_3.1.1.4956_F1E327BC-269C-435d-A152-05C5408002CA
                0
            
        
    
    
        
            
                2021-10-16T23:44:00Z
                chp
                chp
                2021-11-03T18:21:40Z
                1
            
        
    
    
        
            
                
                    2052-3.1.1.4956
                
            
        
    
    
        
            
                
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                    
                
            
        
    
    
        ${echarts_data}

--8.properties

#访问端口号
server.port=8080
#编码格式
server.tomcat.uri-encoding=utf-8
#session生命周期
server.servlet.session.timeout=30m

#thymeleaf
spring.thymeleaf.cache=false
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

--9.ExportController

package com.chp.export.controller;

import com.chp.export.pojo.ExportRequest;
import com.chp.export.util.WordUtil;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.validation.Valid;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.time.LocalDateTime;
import java.time.ZoneOffset;
import java.time.format.DateTimeFormatter;
import java.util.HashMap;
import java.util.Map;


@Controller
@Api(value = "可视化分析word文件生成下载", tags = {"可视化分析word文件生成下载"})
public class ExportController {

    //文件存储路径
    private final String base_PATH = "/Users/chp/Desktop";
    //模板文件名称
    private final String TEMPLATE_FILE_NAME = "export.ftl";

    @GetMapping("/view")
    @ApiOperation("页面跳转")
    public String view() {
        return "view";
    }

    @PostMapping("/exportWord")
    @ResponseBody
    @ApiOperation("word文档生成")
    public String exportWord(@RequestBody @Valid ExportRequest exportRequest, HttpServletRequest req, HttpServletResponse resp) throws IOException {

        //文件生成名称（因为是2003版本的xml模板，这里使用.doc后缀，如果使用.docx后缀生成的文件有问题）
        String wordFileName = LocalDateTime.now(ZoneOffset.of("+8")).format(DateTimeFormatter.ofPattern("yyyyMMddHHmmssSSS")) + ".doc";
        //添加模板数据
        Map dataMap = new HashMap<>();
        //添加主题替换内容
        dataMap.put("banner", exportRequest.getBanner());
        //添加标题替换内容
        dataMap.put("title", exportRequest.getTitle());
        //添加描述替换内容
        dataMap.put("desc", exportRequest.getDesc());
        //替换转移字符
        String newImageInfo = exportRequest.getEchartsbase64Str().replaceAll(" ", "+");
        //取出图片部分
        String[] arr = newImageInfo.split("base64,");
        //添加echarts图片替换数据
        dataMap.put("echarts_data", arr[1]);
        //添加table表替换数据
        dataMap.put("table_list", exportRequest.getTableDatas());
        //生成word文档
        Boolean result = WordUtil.writeWordReport(base_PATH, wordFileName, TEMPLATE_FILE_NAME, dataMap);
        return base_PATH + "/" + wordFileName;

    }

    @ApiOperation("word文档生下载")
    @RequestMapping(value = "/downFile.do", method = RequestMethod.GET)
    public void downPicture(HttpServletRequest request, HttpServletResponse response) throws Exception {
        FileInputStream in = null;
        String filename = request.getParameter("filename");
        String filePath = request.getParameter("filePath");
        filename = new String(filename.getBytes("UTF-8"), "ISO-8859-1");
        try {
            byte[] bs = new byte[1024];
            int len = 0;
            response.reset();
            response.setHeader("Pragma", "no-cache");
            response.setHeader("Cache-Control", "no-cache");
            response.setContentType("application/octet-stream");
            response.setHeader("Content-disposition", "attachment;filename=" + filename);
            in = new FileInputStream(new File(filePath));
            ServletOutputStream out = response.getOutputStream();
            while ((len = in.read(bs)) != -1) {
                out.write(bs, 0, len);
            }
            out.flush();
            //关流
            out.close();
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException("下载失败");
        } finally {
            try {
                in.close();
            } catch (Exception e) {
            }
        }

    }
}

--10.ExportRequest

package com.chp.export.pojo;

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import javax.validation.constraints.NotBlank;
import java.io.Serializable;
import java.util.List;


@Data
@ApiModel(value="可视化分析word文档生成请求参数",description="可视化分析word文档生成请求参数")
public class ExportRequest implements Serializable {

    private static final long serialVersionUID = -1242493306307174690L;

    @NotBlank(message = "主题不能为空!")
    @ApiModelProperty("主题")
    private String banner;

    @NotBlank(message = "标题不能为空!")
    @ApiModelProperty("标题")
    private String title;

    @NotBlank(message = "描述不能为空!")
    @ApiModelProperty("描述")
    private String desc;

    @ApiModelProperty("echarts图转换成的base64字符串")
    private String echartsbase64Str;

    @ApiModelProperty("表格对应每行列数据")
    private List> tableDatas;
}

--11.SwaggerConfig

package com.chp.export.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.spi.documentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

@Configuration
@EnableSwagger2
public class SwaggerConfig {
    @Bean
    public Docket createRestApi() {
        final Docket docket =
                new Docket(documentationType.SWAGGER_2)
                        .apiInfo(this.apiInfo())
                        .select()
                        .apis(RequestHandlerSelectors.basePackage("com.chp.export"))
                        .paths(PathSelectors.any())
                        .build();
        return docket;
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("分析图表导出")
                .description("分析图表导出")
                .termsOfServiceUrl("http://127.0.0.1:8080/view")
                .version("1.0")
                .build();
    }
}

--12.WordUtil

package com.chp.export.util;

import freemarker.template.Configuration;
import freemarker.template.Template;

import java.io.*;
import java.util.Map;


public class WordUtil {

    //模板路径
    private static final String FTL_FP = "/templates/";
    private static Configuration configuration = null;

    static {
        configuration = new Configuration();
        //设置默认的编码
        configuration.setDefaultEncoding("UTF-8");
    }

    public static Boolean writeWordReport(String wordFilePath, String wordFileName, String templateFileName, Map beanParams) {
        Writer out = null;
        try {
            configuration.setClassForTemplateLoading(WordUtil.class, FTL_FP);
            Template template = configuration.getTemplate(templateFileName, "UTF-8");
            //判断文件后缀
            if (wordFilePath.lastIndexOf(File.separator) != wordFilePath.length() - 1) {
                wordFilePath = wordFilePath + File.separator;
            }
            //获取文件目录，如果不存在则创建
            File file = new File(wordFilePath);
            if (!file.exists()) {
                file.mkdirs();
            }
            //输出文件
            FileOutputStream fos = new FileOutputStream(new File(wordFilePath + wordFileName));
            out = new OutputStreamWriter(fos, "UTF-8");
            template.process(beanParams, out);
            return true;
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (out != null) {
                    out.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return false;
    }
}

--13.pom



    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.5.5
         
    
    com.chp
    export
    0.0.1-SNAPSHOT
    export
    Demo project for Spring Boot
    
        1.8
    
    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
        
        
            org.freemarker
            freemarker
            2.3.31
        
        
            org.projectlombok
            lombok
            true
            1.18.20
        
        
            com.google.code.gson
            gson
            2.8.2
        
        
            io.springfox
            springfox-swagger2
            2.9.2
        
        
            io.springfox
            springfox-swagger-ui
            2.9.2
        
        
            javax.validation
            validation-api
            2.0.1.Final
        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
                
                    
                        
                            org.projectlombok
                            lombok

四.代码git地址：

git地址：https://gitlab.com/chpapi/export-doc.git

java 前端echarts图+表格导出word文档并下载

Java相关栏目本月热门文章