spring boot+vue上传word并通过pdf前端展示

一、需求就是上传word文件，然后用pdf前端展示。

先看效果，带着效果学习，效果最好。

使用的是element ui的上传组件。

二、实现方案。

使用spring boot文件上传保存到本地，同时用LibreOffice提供的功能进行转换pdf，保存在本地服务器中。最后前端调用接口，在新窗口中打开pdf。

三、具体步骤。(需要先安装LibreOffice)

1、配置spring boot依赖。添加依赖，这四个为word转pdf包，注意，版本要选择4.2.0，一开始选了4.2.2会提示找不到pid，启动不起来，浪费我好多时间。

<dependency>
			<groupId>org.jodconverter</groupId>
			<artifactId>jodconverter-spring-boot-starter</artifactId>
			<version>4.2.0</version>
		</dependency>
		<dependency>
			<groupId>org.jodconverter</groupId>
			<artifactId>jodconverter-core</artifactId>
			<version>4.2.0</version>
		</dependency>
		<dependency>
			<groupId>org.jodconverter</groupId>
			<artifactId>jodconverter-local</artifactId>
			<version>4.2.0</version>
		</dependency>
		<dependency>
			<groupId>org.libreoffice</groupId>
			<artifactId>ridl</artifactId>
			<version>5.4.2</version>
		</dependency>

2、编写controller层。即编写上传接口。

@RequestMapping("/upload")
    @ResponseBody
    public R upload(@RequestParam("file") MultipartFile file) throws Exception {
        String errorName = "";
        String fileName = multipartFile.getOriginalFilename();
        if ((fileName.endsWith(".doc") || fileName.endsWith(".docx"))) {
             File dest = new File(filePath + fileName); // 生成word
             String pdfName = fileName.substring(0, fileName.indexOf(".")) + ".pdf";
             File pdf = new File(pdfPath+pdfName);
             try {
                 multipartFile.transferTo(dest);
                 converter.convert(dest).to(pdf).execute();
                 return R.ok();
              } catch (IllegalStateException | IOException e) {
                        e.printStackTrace();
                    }
                     // successFileName.add(fileName);
                }
          else {
                    errorName = fileName;
                    return R.error(201,"失败").put("error",errorName);
                }

            

        
        return R.error(201,"失败").put("error",errorName + "文件格式上传错误");

    }

这个代码 我把业务逻辑给删除了，如果有些括号错误，自行检查。还是上传一下完成的带业务逻辑的吧。

@RequestMapping("/upload")
    @ResponseBody
    public R upload(@RequestParam("file") MultipartFile[] file) throws Exception {
        String errorName = "";
        for (MultipartFile multipartFile: file) {
            String fileName = multipartFile.getOriginalFilename();
            if ((fileName.endsWith(".doc") || fileName.endsWith(".docx"))) {
                // 以下为读取word中的表格 业务为上传的word与地图中单个图斑，也就是feature
                //要关联
                List<String> tableList = null;
                InputStream inputStream = multipartFile.getInputStream();
                WordOperator wordOperator = new WordOperator();
                tableList = wordOperator.testReadByDoc(inputStream);
                String date = tableList.get(15); // 获取表格中的关键字
                canUploadOrNot canUpload = houseService.canUpload(tableList.get(9), date);
                //看上传的图斑号能不能跟数据中的中违建数据对应
                if (canUpload != null) {
                    Integer integer = canUpload.getObjectid();
                    File dest = new File(filePath + fileName); // 生成word
                    String pdfName = fileName.substring(0, fileName.indexOf(".")) + ".pdf";
                    System.out.println(pdfName);
                    // File word = new File("D:\\webgis\\uploadTest\\2号福清市宏路街道东坪村郑强.doc");
                    File pdf = new File(pdfPath+pdfName);

                    try {
                        multipartFile.transferTo(dest);
                        converter.convert(dest).to(pdf).execute();
                        // 以下为数据库操作业务层
                        boolean existFile = houseService.isExistFile(integer);
                        if (!existFile) {
                            Integer integer1 = houseService.saveFileName(integer, pdfName);
                            if (integer1 == 1) {
                                System.out.println("文件名保存成功");
                            }
                        }
                        return R.ok();
                    } catch (IllegalStateException | IOException e) {
                        e.printStackTrace();
                    }
                     // successFileName.add(fileName);
                }
                else {
                    errorName = fileName;
                    return R.error(201,"失败").put("error",errorName);
                }

            }

        }
        return R.error(201,"失败").put("error",errorName + "文件格式上传错误");

    }

3.前端VUE上传组件：

<el-upload
        class="upload-demo"
        ref="upload"
        :action="url" // 后端上传url
        multiple
        :on-success="uploadResult"
        :file-list="fileList"
        :auto-upload="false">

这样就实现了上传功能，单单这个功能很简单，就是业务逻辑有点麻烦。

4、返回pdf接口编写。

@ResponseBody
@RequestMapping("/getPDF/{fileName}")
public void toPdfFile(@PathVariable("fileName") String fileName, HttpServletResponse response) throws IOException {
        ServletOutputStream outputStream = response.getOutputStream();
        InputStream in = new FileInputStream(new File("d:\\webgis\\uploadTest\\pdf\\" + fileName));// 读取文件
        int i = IOUtils.copy(in, outputStream);   // copy流数据,i为字节数
        in.close();
        outputStream.close();
    }

前端只要传过来文件名，便可以得到pdf，在上传的时候，我是把文件名跟所需要连接的要素进行存储数据库的。所以从数据库中获取文件名就行。

前端代码非常简单。

window.open()就完事了