Springboot 超简单实现在线预览,Word文档 doc、xlsx、pdf、txt等

忘是亡心i 2022-12-10 02:24 643阅读 0赞

### **前言** ###

PDF、TXT 只要资源可访问，根本就不需要进行任何处理，直接访问查看就完事了。

也是因为这个PDF可以直接查看（现在浏览器基本支持了），那么我们实现Word文档在线预览，其实也是 把WORD文档 复制一份生成一份供预览的 PDF文件而已。

先看看效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70][]

### **正文** ###

这篇实例，实现在线预览WORD文档，分两步：

一. 安装OpenOffice

二.写点小代码

### **一. 安装OpenOffice** ###

不要看到安装东西就觉得麻烦，因为这个安装不需要做任何配置，你只需要下载，选择安装地址，一直下一步 即可。

那么下载地址，我也给你了（Windows版， 线上linux服务器安装的话随便搜一下 Linux 安装 openoffice 就可以）:

百度网盘链接：  
[https://pan.baidu.com/s/17y5O7IqkB0YxA6tWdjJNvA][https_pan.baidu.com_s_17y5O7IqkB0YxA6tWdjJNvA]

提取码：

7u23

安装完之后，你只需要知道你安装在哪里了即可，就像我：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 1][]

我的安装地址是（因为一会项目代码需要用到）：

C:\Program Files (x86)\OpenOffice 4

### **二.写点小代码** ###

首先,pom.xml文件加上核心的依赖（我的springboot版本用的 2.1.4.RELEASE）：

<dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            
            
            <dependency>
                <groupId>org.jodconverter</groupId>
                <artifactId>jodconverter-core</artifactId>
                <version>4.2.2</version>
            </dependency>
    
            
            
            <dependency>
                <groupId>org.jodconverter</groupId>
                <artifactId>jodconverter-spring-boot-starter</artifactId>
                <version>4.2.2</version>
            </dependency>
            
            
            
            <dependency>
                <groupId>org.jodconverter</groupId>
                <artifactId>jodconverter-local</artifactId>
                <version>4.2.2</version>
            </dependency>
    
            
            <dependency>
                <groupId>commons-io</groupId>
                <artifactId>commons-io</artifactId>
                <version>2.6</version>
            </dependency>

接着是 application.yml文件：

server:
      port: 8089
    
    jodconverter:
      local:
        enabled: true
        office-home: C:\Program Files (x86)\OpenOffice 4
        max-tasks-per-process: 10
        port-numbers: 8100

然后就是实现代码，非常简短，我们直接写在接口里，方便我测试（你们自己可以提出来）：

新建一个 TestController.java：

import java.io.File;
    import java.io.FileInputStream;
    import java.io.InputStream;
    import java.util.UUID;
    import javax.servlet.ServletOutputStream;
    import javax.servlet.http.HttpServletResponse;
    import org.apache.commons.io.IOUtils;
    import org.jodconverter.DocumentConverter;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    @Controller
    public class TestController {
    
    
        @Autowired
        private DocumentConverter converter;  //用于转换
    
        @ResponseBody
        @RequestMapping("testPreview")
        public void toPdfFile(HttpServletResponse response) {
            File file = new File("D:\\testMyDoc\\doc\\testJc.docx");//需要转换的文件
            try {
                File newFile = new File("D:/testMyDoc");//转换之后文件生成的地址
                if (!newFile.exists()) {
                    newFile.mkdirs();
                }
                String savePath="D:/testMyDoc/"; //pdf文件生成保存的路径
                String fileName="JCccc"+UUID.randomUUID().toString().replaceAll("-","").substring(0,6);
                String fileType=".pdf"; //pdf文件后缀
                String newFileMix=savePath+fileName+fileType;  //将这三个拼接起来,就是我们最后生成文件保存的完整访问路径了
    
                //文件转化
                converter.convert(file).to(new File(newFileMix)).execute();
                //使用response,将pdf文件以流的方式发送的前端浏览器上
                ServletOutputStream outputStream = response.getOutputStream();
                InputStream in = new FileInputStream(new File(newFileMix));// 读取文件
                int i = IOUtils.copy(in, outputStream);   // copy流数据,i为字节数
                in.close();
                outputStream.close();
                System.out.println("流已关闭,可预览,该文件字节大小："+i);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    
    }

代码简单分析：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 2][]

好了，不多说，到这里已经实现了。

那么我们简单测试一下，运行项目：

这是代码里面写死的需要预览的doc文件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 3][]

然后我们在浏览器访问接口  [http://localhost:8089/testPreview][http_localhost_8089_testPreview]  ，可以看到预览没问题：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 4][]

看一眼，我们生成的用于预览pdf文件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 6][]

控制台：

![20200923145001560.png][]

同样如果你需要在线预览Excel表的内容，那么也是一样只需要把对应的文件xlsx路径传到接口里面即可，如：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 7][]

在线预览：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 8][]

ps:

文件越大，实现预览就越久转换时间也就越久.

那么如果想用户体验更好，怎么办？

前文提到了pdf是直接可以预览的，我们也是将word转为pdf而已，所以如果在客户上传完成的时候，可以异步执行转换的代码，对这个word文档直接去生成对应的pdf，然后绑定关系存储一下。

当用户想预览时，直接查出来对于的pdf文件，然后拼接成资源路径，直接访问即可。

如：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 9][]

当然，这只是我随口说的一种方式，一定程度去改善预览的体验。

还有很多方式，只要你明白预览实现的原理，那么方案自己设计就好。

好的，该篇就到这吧。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70]: /images/20221123/27ec20129aec4c48bd1e2f2636f2220d.png
[https_pan.baidu.com_s_17y5O7IqkB0YxA6tWdjJNvA]: https://pan.baidu.com/s/17y5O7IqkB0YxA6tWdjJNvA
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 1]: /images/20221123/5c5eaaaeafd94ec38c63af67429413f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 2]: /images/20221123/890f2a70df4445d1ad30c3d92dec20b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 3]: /images/20221123/8f11cee764da439e9e1ec945356ed480.png
[http_localhost_8089_testPreview]: http://localhost:8089/testPreview
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 4]: /images/20221123/2b7927f996cf408498af7a454feedd8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 5]: /images/20221123/a1d49c32a89b462a8a64f2317959fbb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 6]: /images/20221123/d9a464d24c1e43549fec3ab847df9156.png
[20200923145001560.png]: /images/20221123/9ebab1170e51488580b3e4e07262b1af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 7]: /images/20221123/bfa79e70db014e988e62993122f24093.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 8]: /images/20221123/e35d73cda64e4f9a95f02834395127f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 9]: /images/20221123/fbb636e3187c4228a89692405a543889.png