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

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

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

spring boot+vue上传word并通过pdf前端展示_第1张图片

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

二、实现方案。

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

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

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


			org.jodconverter
			jodconverter-spring-boot-starter
			4.2.0
		
		
			org.jodconverter
			jodconverter-core
			4.2.0
		
		
			org.jodconverter
			jodconverter-local
			4.2.0
		
		
			org.libreoffice
			ridl
			5.4.2
		

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 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上传组件:

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

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()就完事了

spring boot+vue上传word并通过pdf前端展示_第2张图片

你可能感兴趣的:(前后端分离,java,javascript,vue.js,libreoffice,spring,boot)