一、前端代码

此处比较简陋，就用了一个window.open(“后端访问地址”)

二、后端代码

1.设置访问静态资源的地址映射

新建了一个配置类，用于映射静态资源的地址。

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
    /**
     * 这里是映射文件路径的方法
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry){ 										     registry.addResourceHandler("/radar/static/**").addResourceLocations("file:/E:/files/");
    }
}

说明：如果前端需要访问资源test.pdf，则访问后端的地址为：localhost:8080/radar/static/test.pdf。添加了这个映射之后，会到服务器的E:/files/下面寻找test.pdf文件进行访问。

预览文件的前端

省略点击按钮点击触发showdialogview()方法的代码

1. 第一种方法
   1. 先在template中加入一个input框，绑定一个字符串类型的变量
   2. 写showdialogview()方法
   3. 调用后台的方法，如果返回的不是null（后台返回的数据是一行一行返回的）,就使用for循环，添加到变量中去。

<template>
  <div class="content">
    <!--文件预览-->
    <el-dialog title="数据预览" :visible.sync="dialogvisibleview" >
      <el-input type="textarea" :rows="10" placeholder="" v-model="dataview">
      </el-input>
    </el-dialog>
  </div>
</template>

<script>
  import api from '../../api/api'
  import $ from 'jquery';
  import axios from 'axios';
  export default {
    name: "DataFile",
    inject: ['reload'],
    data(){
      return {
        dialogvisibleview: false, // 文件预览
        dataview: ''
      }
    },
    methods:{
      //预览文件
      showdialogview(id) {
        this.dataview ='';
        var dataView = new FormData;
       // var num=20;
        dataView.append("id",id);
        api.getDataDetail(dataView).then((response) => response.json())
          .then((data) => {
            if(data!=null){
              this.dialogvisibleview = !this.dialogvisibleview;
              //alert(data.data[0]);
              for (var i=0;i<=data.data.length-1;i++){
                this.dataview+=data.data[i]+"\n";
              }
            }
          });
      }
    },
    created: function () {
      console.log('cteated 钩子执行...');
    }
  }
</script>

2. 第二中方法：
   1. 可以在对话框中加入一个table标签，在tbody标签中使用v-html绑定变量，这样，在字符串中的标签可以展示出来
   2. 因为后台给的接口返回的数据是数组中的一个下标对应的一行数据，把每一行的数据拆分成字符串数组，然后放在单元格中，这样展示出来比较整齐，还可以添加样式。

<template>
  <div class="content">
    <!--预览的模态框-->
    <el-dialog title="文件内容预览" :visible.sync="previewVisible" modal-append-to-body="false" append-to-body="true" style="height: 100%;"width="80%">
      <p style="color:red">若可视化，请选择数值列</p>
      <div id="modalContent" style="height: 600px;overflow:scroll;overflow-x:auto;overflow-y:auto ">
        <table id="box-table" style="border-collapse:collapse;height:60px;">
          <tbody id="table_body" v-html="datafileView"></tbody></table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import api from '../../api/api'
  import $ from 'jquery';
  import axios from 'axios';
  export default {
    name: "DataFile",
    inject: ['reload'],
    data(){
      return {
         previewVisible:false,  // 预览模态框的
         datafileView:'', // 预览的表格
      }
    },
    methods:{
      // 打开预览的模态框
      openPreview (id){
        this.previewVisible = true;
        this.viewData(id);
      },
      // 在后台查询预览
      viewData (fid) {
        this.datafileView="";
        var dataView = new FormData;
        dataView.append("id",fid);
        api.getDataDetail(dataView).then((response) => response.json())
          .then((data) => {
            var viewDataString="<tr>";
            var dataArray = ((String)(data.data[0])).split(",");
            for(var i =0;i<dataArray.length;i++){
              viewDataString=viewDataString+"<td style='text-align:center;width:10%'><input type='radio' name='tableheader' value='"+i+"' @click='f1()' /></td>";
            }
            viewDataString = viewDataString+"</tr><tr style='border-color:#1eb8f7;border-bottom-style:solid;border-width:1px'>";
            for(var i =0;i<dataArray.length;i++){
              viewDataString = viewDataString+"<th style='text-align:center;width:10%'>"+dataArray[i]+"</th>";
            }
            viewDataString = viewDataString+"</tr>";
            console.log(data.data.length);
            for(var x=1;x<data.data.length;x++){
              var dataArray = ((String)(data.data[x])).split(",");
              viewDataString = viewDataString+"<tr>";
              for(var i =0;i<dataArray.length;i++){
                viewDataString = viewDataString+"<td style='text-align:center;width:15%'>"+dataArray[i]+"</td>";
              }
              viewDataString = viewDataString+"</tr>";
            }
            this.datafileView =viewDataString;
            console.log(this.datafileView );
          });
      }
    },
    created: function () {
      console.log('cteated 钩子执行...');
    }
  }
</script>

缺点：使用v-html，即使标签在浏览器中展示出来，但是里面的方法不可以使用，里面的方法失效。
解决方法请查看本博客的其他文章。

一、下载OpenOffice 4

脚本之家下载地址：https://www.jb51.net/softs/595118.html
百度网盘：
链接：https://pan.baidu.com/s/1x_GigpKrQiB_9g1_kmr8DQ
提取码：vsbp

二、导入依赖

  <!--文件预览-->
  <dependency>
      <groupId>org.jodconverter</groupId>
      <artifactId>jodconverter-core</artifactId>
      <version>4.0.0-RELEASE</version>
  </dependency>
  <!-- https://mvnrepository.com/artifact/com.artofsolving/jodconverter -->
  <dependency>
      <groupId>com.artofsolving</groupId>
      <artifactId>jodconverter</artifactId>
      <version>2.2.1</version>
  </dependency>

三、controller层

/**
     * 文件预览
     * @param id 文件保存时名称
     * @param name 文件原名
     * @param ext  文件后缀
     * @param request
     * @param response
     * @return
     * @throws Exception
     */
    @RequestMapping(value = "/inline")
    public String inline(String newName,String name,String ext,HttpServletRequest request,HttpServletResponse response){
        //BaseConfig.uploadPath + "flow_task" 是参数savepath， 为自己设置的文件保存路径
        return FileUtils.inline(BaseConfig.uploadPath + "flow_task", name, newName, ext,request,response);

    }

四、创建工具类

package com.oa.commons.util;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.artofsolving.jodconverter.OfficeDocumentConverter;
import org.jodconverter.office.DefaultOfficeManagerBuilder;
import org.artofsolving.jodconverter.office.OfficeManager;
import org.springframework.util.StringUtils;

import java.io.File;
import java.util.regex.Pattern;

/**
 * 这是一个工具类，主要是为了使Office2003-2007全部格式的文档(.doc|.docx|.xls|.xlsx|.ppt|.pptx)
 * 参考代码 ：https://github.com/ourlang/preview
 * @author fangqm
 */
public class FilePreviewUtil {

    private static final Log LOG = LogFactory.getLog(FilePreviewUtil.class);


    private FilePreviewUtil(){

    }

    /**
     * 使Office2003-2007全部格式的文档(.doc|.docx|.xls|.xlsx|.ppt|.pptx) 转化为pdf文件<br>
     * @param inputFilePath 源文件路径源文件路径
     * 源文件路径，如："e:/test.doc"
     * @return 转换后的pdf文件
     */
    public static File openOfficeToPdf(String inputFilePath) {
        return office2pdf(inputFilePath);
    }

    /**
     * 根据操作系统的名称，获取OpenOffice.org 4的安装目录<br>
     * 如我的OpenOffice.org 4安装在：C:\Program Files (x86)\OpenOffice 4
     * 请根据自己的路径做相应的修改
     * @return OpenOffice.org 4的安装目录
     */
    private static String getOfficeHome() {
		//这个路径为你自己安装openOffice的路径
        return "C:/Program Files (x86)/OpenOffice 4";
    }

    /**
     * 连接OpenOffice.org 并且启动OpenOffice.org
     *
     * @return OfficeManager对象
     */
    private static OfficeManager getOfficeManager() throws OfficeException {
        DefaultOfficeManagerBuilder builder = new DefaultOfficeManagerBuilder();
        // 设置OpenOffice.org 的安装目录
        String officeHome = getOfficeHome();
        builder.setOfficeHome(officeHome);
        // 启动OpenOffice的服务
        OfficeManager officeManager = builder.build();
        officeManager.start();
        return officeManager;
    }

    /**
     * 把源文件转换成pdf文件
     * @param inputFile 文件对象
     * @param outputFilePath pdf文件路径
     * @param inputFilePath 源文件路径
     * @param converter 连接OpenOffice
     */
    private static File converterFile(File inputFile, String outputFilePath, String inputFilePath, OfficeDocumentConverter converter) {
        File outputFile = new File(outputFilePath);
        // 假如目标路径不存在,则新建该路径
        if (!outputFile.getParentFile().exists()) {
            outputFile.getParentFile().mkdirs();
        }
        converter.convert(inputFile, outputFile);
        System.out.println("文件：" + inputFilePath + "\n转换为\n目标文件：" + outputFile + "\n成功!");
        return outputFile;
    }

    /**
     * 使Office2003-2007全部格式的文档(.doc|.docx|.xls|.xlsx|.ppt|.pptx) 转化为pdf文件<br>
     * @param inputFilePath 源文件路径
     * 源文件路径，如："e:/test.doc"
     * 目标文件路径，如："e:/test_doc.pdf"
     * @return  对应的pdf文件
     */
    private static File office2pdf(String inputFilePath) {
        OfficeManager officeManager = null;
        try {
            if (StringUtils.isEmpty(inputFilePath)) {
                LOG.info("输入文件地址为空，转换终止!");
                return null;
            }
            File inputFile = new File(inputFilePath);
            // 转换后的文件路径 这里可以自定义转换后的路径,这里设置的和源文件同文件夹
            String outputFilePath = getOutputFilePath(inputFilePath);

            if (!inputFile.exists()) {
                LOG.info("输入文件不存在，转换终止!");
                return null;
            }
            // 获取OpenOffice的安装路劲
            officeManager = getOfficeManager();
            // 连接OpenOffice
            OfficeDocumentConverter converter = new OfficeDocumentConverter(officeManager);

            return converterFile(inputFile, outputFilePath, inputFilePath, converter);
        } catch (Exception e) {
            LOG.error("转化出错!", e);
        } finally {
            // 停止openOffice
            if (officeManager != null) {
                officeManager.stop();
            }
        }
        return null;
    }

    /**
     * 获取输出文件路径 可自定义
     * @param inputFilePath 源文件的路径
     * @return 取输出pdf文件路径
     */
    private static String getOutputFilePath(String inputFilePath) {
        return inputFilePath.replaceAll("." + getPostfix(inputFilePath), ".pdf");
    }

    /**
     * 获取inputFilePath的后缀名，如："e:/test.doc"的后缀名为："doc"<br>
     * @param inputFilePath 源文件的路径
     * @return 源文件的后缀名
     */
    private static String getPostfix(String inputFilePath) {
        int index = inputFilePath.lastIndexOf('.');
        return inputFilePath.substring(index+1);
    }

}

五、返回响应数据给前端

 /**
	 * 预览文件
	 * @param savePath	保存目录
	 * @param name		文件原名
	 * @param nowName	保存时的UUID 不包含后缀
	 * @param ext		文件后缀
	 * @param request
	 * @param response
	 * @return
	 */
    public static String inline(String savePath,String name,String uuid,String ext,HttpServletRequest request,HttpServletResponse response){
		response.addHeader("Access-Control-Allow-Origin", "*");
    	OutputStream toClient=null;
    	try{
    		String path=savePath+"/"+uuid+"."+ext;
    		//判断此文件是否为pdf
			File file=null;
			if(ext.equals("pdf")){
				//如果是pdf
				file = new File(path);
			}else{
				//如果不是，转化为pdf
				file =FilePreviewUtil.openOfficeToPdf(path);
			}
	        if(!file.exists()){
	        	//不存在
				request.setAttribute("name", name);
	        	return "download_error";//返回下载文件不存在
			}
			//把转换后的pdf文件响应到浏览器上面
			FileInputStream fileInputStream = new FileInputStream(file);
			BufferedInputStream br = new BufferedInputStream(fileInputStream);
			byte[] buf = new byte[1024];
			int length;
			// 清除首部的空白行。非常重要
			response.reset();
			//设置调用浏览器嵌入pdf模块来处理相应的数据。
			response.setContentType("application/pdf");
			response.setHeader("Content-Disposition","inline; filename=" + URLEncoder.encode(file.getName(), "UTF-8"));
			OutputStream out = response.getOutputStream();
			//写文件
			while ((length = br.read(buf)) != -1){
				out.write(buf, 0, length);
			}
			br.close();
			out.close();
	        return null;
	      }catch (Exception e) {
	    	  e.printStackTrace();
	    	  response.reset();
	    	  return "exception";//返回异常页面
	      }finally{
				if(toClient!=null){
		           	 try {
		           		toClient.close();
					  } catch (IOException e) {
							e.printStackTrace();
						}
		            }
				}
    }

六、前端接收数据

1、js代码

//文件预览
export function preview(fileId) {
  return request({
    url:'/eos/upload/previews/'+fileId,
    method:'get',
    responseType: 'blob'
  })
}

2、Vue代码

  //文件预览
  preview(){
      preview(this.ids).then(resp => {
          var blob = new Blob([resp],{
              type: 'application/pdf;chartset=UTF-8'
          });
          console.log("preview"+resp);
          var fileURL = URL.createObjectURL(blob)
          window.open(fileURL)
      });
  }