springboot使用pdfjs预览office文件

以你之姓@ 2022-10-05 04:45 262阅读 0赞

由于springboot使用aspose预览office文件可以实现文件预览，但部分浏览器却不兼容，所以使用pdfjs预览office文件，兼容浏览器。

在springboot使用aspose预览office文件的基础上引入pdfjs的包，再改下前端就行了。

可以参考案例：

[https://blog.csdn.net/weixin\_39220472/article/details/117627142][https_blog.csdn.net_weixin_39220472_article_details_117627142]

预览office文件效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70 3][]

1.pdfjs的相关包目录：

![20210606162038307.png][]

2.后端配置可以直接访问static下资源

import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    
    @Configuration
    public class MvcConfigurerAdapter extends WebMvcConfigurerAdapter {
    
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            //过滤static下文件,可以使用pdfjs预览pdf文件
            registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
            super.addResourceHandlers(registry);
        }
    }

默认预览pdf的页面：[http://localhost:8080/static/plugins/pdfjs/web/viewer.html][http_localhost_8080_static_plugins_pdfjs_web_viewer.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70 4][]

3.后端预览文件主要代码：

@Controller
    public class FileController {
    
        @Autowired
        private FileToPdfComUtils fileToPdfComUtils;
    
        /**
         * index页面
         * @return
         */
        @GetMapping("/index")
        public String index(){
            return "index";
        }
    
        /**
         * 文件预览
         * @param filePath
         * @param request
         * @param response
         * @throws IOException
         */
        @GetMapping("/showFile")
        @ResponseBody
        public void showFile(String filePath, HttpServletRequest request, HttpServletResponse response) throws IOException {
            //源文件路径
            String sourcePath = filePath;
            //pdf文件路径
            String pdfPath = null;
            //获取文件后缀判断是否转换pdf
            int index = filePath.lastIndexOf(".");
            String fileType = filePath.substring(index + 1);
            String toPdfSuffix = "doc,docx,xls,xlsx,ppt,pptx";
            try {
                if(toPdfSuffix.indexOf(fileType) >= 0){
                    pdfPath = sourcePath.substring(0, index) + ".pdf";
                    //源文件转换pdf
                    fileToPdfComUtils.officeToPdf(sourcePath, pdfPath);
                    File pdfFile = new File(pdfPath);
                    InputStream is = new FileInputStream(pdfFile);
                    showPdf(is, pdfPath, request, response);
                } else {
                    //不用转换，直接预览
                    File pdfFile = new File(filePath);
                    InputStream is = new FileInputStream(pdfFile);
                    showPdf(is,filePath, request, response);
                }
            }catch (Exception e){
                e.printStackTrace();
            } finally {
                //最后删除生成的pdf文件
                FileUtils.deleteFile(pdfPath);
            }
    
        }
    
        /**
         * 文件预览
         * @param is
         * @param fileKey
         * @param request
         * @param response
         * @throws IOException
         */
        public void showPdf(InputStream is,  String fileKey, HttpServletRequest request, HttpServletResponse response) throws IOException {
            //根据文件名获取 MIME 类型
            int idx = fileKey.lastIndexOf(".");
            String suffix = fileKey.substring(idx);
            String[] fileKeys = fileKey.split("/");
            String fileName = fileKeys[fileKeys.length - 1];
            String contentType = FileContentType.SUFFIX_TYPE.get(suffix);
            //inline表示直接预览
            String userAgent = request.getHeader("USER-AGENT");
            String contentDisposition = "";
            if(StringUtils.contains(userAgent, "MSIE")||StringUtils.contains(userAgent, "Trident") || StringUtils.contains(userAgent,"Edge")){
                //IE 浏览器
                contentDisposition = "inline;filename=" + URLEncoder.encode(fileName,"UTF8");
            }else {
                //其他浏览器
                contentDisposition = "inline;filename=" + new String(fileName.getBytes("UTF-8"),"ISO8859-1");
            }
            // 设置头
            response.setHeader("Content-Disposition",contentDisposition);
            response.setContentType(contentType);
            // 获取绑定了客户端的流
            ServletOutputStream output = response.getOutputStream();
            // 把输入流中的数据写入到输出流中
            IOUtils.copy(is,output);
            is.close();
        }
    }

4.前端代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>预览文件</title>
    </head>
    <body>
    <button target="_blank" type="button"
            onclick="showFile('d:/file/测试.doc')">预览doc </button>
    <button  target="_blank" type="button"
            onclick="showFile('d:/file/测试.docx')">预览docx </button>
    <button  target="_blank" type="button"
            onclick="showFile('d:/file/测试.xls')">预览xls </button>
    <button target="_blank" type="button"
            onclick="showFile('d:/file/测试.xlsx')">预览xlsx </button>
    <button  target="_blank" type="button"
            onclick="showFile('d:/file/测试.pptx')">预览pptx </button>
    <button  target="_blank" type="button"
            onclick="showFile('d:/file/数据库原理（第5版）（样章）.pdf')">预览pdf </button>
    <script>
        function showFile(filePath){
            var url = "/showFile" + "?filePath=" + filePath;
            if(isPdf(filePath)){
                //pdf类用pdfjs预览
                window.open("/static/plugins/pdfjs/web/viewer.html?file=" + encodeURIComponent(url));
            } else {
                //图片直接预览
                window.open(url);
            }
        };
    
        function isPdf(key){
            if(key.indexOf("pdf") > -1 || key.indexOf("xlsx") > -1 || key.indexOf("xls") > -1
                || key.indexOf("docx") > -1 || key.indexOf("doc") > -1
                || key.indexOf("ppt") > -1 || key.indexOf("pptx") > -1){
                return true;
            }
            return false;
        }
    
    </script>
    </body>
    </html>

5.下载demo:

[https://download.csdn.net/download/weixin\_39220472/19418699][https_download.csdn.net_download_weixin_39220472_19418699]

[https_blog.csdn.net_weixin_39220472_article_details_117627142]: https://blog.csdn.net/weixin_39220472/article/details/117627142
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70]: /images/20221005/2ceea4eac21849b49fd5087f97e60ccc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70 1]: /images/20221005/9dde5db2f23945389d8762080087c66b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70 2]: /images/20221005/171a7e11831a4736a5664ed662f4a374.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70 3]: /images/20221005/c3200696a09d4f318ca22a685e67c518.png
[20210606162038307.png]: /images/20221005/cb0a25a0ced64f0e95c3906fca389447.png
[http_localhost_8080_static_plugins_pdfjs_web_viewer.html]: http://localhost:8080/static/plugins/pdfjs/web/viewer.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70 4]: /images/20221005/8ed4bce25b584e9b879e2cbfaa44748e.png
[https_download.csdn.net_download_weixin_39220472_19418699]: https://download.csdn.net/download/weixin_39220472/19418699