vue利用pdf.js 显示服务器上的pdf文件

最新推荐文章于 2025-05-22 23:49:05 发布

qq_42211102

最新推荐文章于 2025-05-22 23:49:05 发布

阅读量1.2k

点赞数

分类专栏： java vue 文章标签： vue java

本文链接：https://blog.youkuaiyun.com/qq_42211102/article/details/108201114

版权

本文介绍如何在Vue项目中利用pdf.js显示服务器上的PDF文件，解决跨域问题。首先，后端通过Java处理PDF文件，将其转换为二进制流并生成URL。接着，Vue前端通过viewer.html访问这个URL来展示PDF内容。

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

公司项目需要用到pdf.js显示服务器上的pdf文件，显示项目内pdf很简单，直接写上pdf的相对路径。

显示服务器上的pdf文件涉及远程访问跨域问题，总体思路需要先在后台拼装 pdf文件二进制流转换url地址，使用前端viewer.html?file= 访问 pdf文件二进制流转换url地址

先获取 pdf文件二进制流转换url地址

 /**
     * 生产pdfUrl
     */
    @PostMapping("/getPdfUrl")
    @ApiOperation(value = "getPdfUrl", notes = "获得PdfUrl")
    public StandardResponse getPdfUrl(HttpServletRequest request) {
        String contextPath = request.getContextPath();
        String path = request.getParameter("path");
        String url = contextPath + "/backend/regulation/getPdf?path=" + path;
        Response response = new Response();
        response.setData(url);
        return response;
    }