文档在线预览实现方法

最新推荐文章于 2025-07-07 16:17:52 发布

峰子_

最新推荐文章于 2025-07-07 16:17:52 发布

阅读量7.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javaWeb相关文章标签： aspose

本文链接：https://blog.youkuaiyun.com/weixin_37744601/article/details/82152676

javaWeb相关专栏收录该内容

16 篇文章

订阅专栏

文档预览一般先将word、excel、ppt等文档转换为pdf格式，再用网页展示。本文介绍使用aspose+pdf.js实现该功能，aspose内置转换方法，pdf.js用于显示。还提到将文件输入流内容写到响应输出流供前端显示，以及图片二进制形式传前端用img标签显示的额外知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍：文档预览一般实现步骤为：

1、将文档（word，excel,ppt等）转换为pdf文件格式

2、使用网页展示pdf文件

我使用的是aspose+pdf.js方法实现，使用前者将文档转换为pdf格式，在使用pdf.js插件显示。

将pdf.js插件集成到项目后进行如下操作：

1、aspose内置将（word,excel,ppt）转换为pdf的方法，调用即可。

@RequestMapping("/path/{id}")
    public void getPath(@PathVariable Integer id, HttpServletResponse response) throws IOException {
        File file = service.getPDFById(id, getUploadPath());
        try (FileInputStream input = new FileInputStream(file)) {
            inToOut(input, response.getOutputStream());
        } catch (Exception e) {
            response.getOutputStream().write("预览失败，请重试".getBytes());
        }
    }

2、其中file就是转换好的pdf文件，inToOut()的代码如下:

 protected void inToOut(InputStream in, OutputStream out) throws IOException {
        byte[] dataByte = new byte[1024];
        int l;
        while ((l = in.read(dataByte)) != -1)
            out.write(dataByte, 0, l);
    }

作用是将文件输入流的内容写到response的输出流中，前端显示即可，代码如下：

 if(jQuery.inArray(format,noImg)!=-1){
                    	viewPath="${ctxPath}/plugin/onlineView/web/viewer.html?file=${ctxPath}/${code}/path/"+id;
                    }else{
                    	viewPath="${ctxPath}/plugin/onlineView/imgView.html?id="+id+"&url=${ctxPath}/${code}/getImgStream/";
                    }

前者就是是显示我的pdf文件的路径，将其做为a标签的href属性值即可。

附上一个额外知识点：

@ResponseBody
    @RequestMapping("/getImgStream/{id}")
    public byte[] getImgStream(@PathVariable Integer id) {
        String fileName = service.findById(id).getUrl();
        String filePath = getUploadPath() + "document/" + fileName;
        File file = new File(filePath);

        byte[] buffer = null;
        try (FileInputStream inputFile = new FileInputStream(file)) {
            buffer = new byte[inputFile.available()];
            inputFile.read(buffer);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return Base64.getEncoder().encode(buffer);
    }

由于第二个路径是显示图片，所以先获取图片的二进制形式传到前端使用img标签显示即可

 $("#img").attr("src","data:image/*;base64,"+data);

data就是我的图片二进制形式