解决办法：

vue中可以使用模板字符串，引入一个图片数组循环数据一次显示。

效果图：

参考资料：https://www.cnblogs.com/SamWeb/p/8519735.html

 

 

前言：表哥之前已经过一篇freemarker模板导出带表格word详细教程  https://blog.csdn.net/erpenggg/article/details/81204061，为什么现在又要写一篇呢。

因为我这次的项目是在手机端导出下载并且查看，用上面的方法导出后，在电脑端和苹果手机端查看是正常的，但是在安卓端，打开却是模版源码，经过测试，发现是word存模版的时候格式问题，上述链接的导出我另存的是xml格式，在安卓手机端不兼容，所以这篇是用的word xml格式。既然格式改了，那模版里面有的数据绑定的方式就需要改变(下文会举例说明)。

 一。整体环境：

           开发环境：java,idea

           部署环境：tomcat7/jar包两种方式

二。功能需求：（数据需要导出成以下格式）

1.简单格式：

2.复杂一点 表格格式：

3.复杂一点 图片格式（图片数量不确定，需要循环）：

三。准备工作：

先准备好Freemarker模版：步骤如下：

1.简单的文本，我们需要做的就是把需要导出到word的数据 使用${}替换下（这就相当于占位符）如图；

把需要导出的内容用占位符替换下。

2.表格的：

3.图片的：

在需要插入图片的地方放入一张图片占位。

四。修改模版

上面改好之后把word另存为word xml,我这次不用xml，前面说到的在手机上不兼容,然后通过在线的xml格式化通过notepad++打开，修改好格式：

1.普通文本：

2.表格的话需要在<w:tbl>标签内<w:tr>加上list标签，用来接收后面后端的数据：

list结束标签。

 因为序号并不是写死的，直接用<w:t>${zjl_index+1}</w:t>替换，（因为默认为0，所以加1）

 最后把后缀改成.ftl就好了，过程：.word>.word xml>.ftl。

3.图片的，也是本章重点讲的：

(1).如果另存为xml格式的话,比较简单,图开始那张展位的图片在xml里面是很长一串base64的代码，替换掉，用${XXX}替换，添加list标签，并且用index区分图片集合的数据。

(2).也就是本文中的另存为word xml格式的模版，图片的话会比较复杂；需要修改三个地方

 1.一般都是模版顶部

2.占位的地方

3.模版底部，

<pkg:binaryData>标签代码其实代表的是图片的实际内容，传入的是图片的base64码，后面代码有图片转码的过程。

 

五。开始后端编码

人狠话不多，直接贴编码：上个教程有....这里加了一段代码

 加载模版方法：https://blog.csdn.net/erpenggg/article/details/81216386

图片List添加转码的图片

public static String imageToBase64(String path) {
        InputStream in = null;
        byte[] data = null;
        try {
            in = new FileInputStream(path);
        } catch (FileNotFoundException e) {
            log.error("加载图片未找到", e);
            e.printStackTrace();
        }
        try {
            data = new byte[in.available()];
            //注：FileInputStream.available()方法可以从输入流中阻断由下一个方法调用这个输入流中读取的剩余字节数
            in.read(data);
            in.close();
        } catch (IOException e) {
            log.error("IO操作图片错误", e);
            e.printStackTrace();
        }
        BASE64Encoder encoder = new BASE64Encoder();
        return encoder.encode(data);

    }

不同与上次的是在浏览器导出，这次需要的是导出到手机，所以我是把导出的word存放在服务器上，然后返回存放地址。

大功告成，这玩意有点要人命。

六：案例demo程序下载

https://download.csdn.net/download/erpenggg/12524329

导出结果：

 

七：题外话

每做一次 踩坑一次。 如果遇到问题 请加QQ 602841248

1.另存模版的时候xml ，word xml， word 2003 Xml 每个数据绑定的模式都不一样。

2.循环图片的时候记得rid不要重复，不然循环的是同一张图片。

3.指定图片的宽高： 参考 https://blog.csdn.net/justry_deng/article/details/84144023

在Vue中通常使用v-for来遍历一个数组或者对象，但在去循环一个图片数组时出现了一些问题

结果却无法显示图片

经过百度之后得到了一个解决方法，通过require去动态获取图片路径

这样图片就可以完全显示了

为什么会出现这样的问题呢，是因为我们在动态的获取图片路径时，这个路径会被解析成一个字符串，这样就无法显示原来的图片。而require是CommonJS中的关键字，用来加载模块可以解析路径。

根据参数的不同格式，require命令去不同路径寻找模块文件。

    如果参数字符串以“/”开头，则表示加载的是一个位于绝对路径的模块文件。
    如果参数字符串以“./”开头，则表示加载的是一个位于相对路径的模块文件
    如果参数字符串不以“./“或”/“开头，则表示加载的是一个默认提供的核心模块（node核心模块，或者通过全局安装或局部安装在node_modules目录中的模块）