使用pdf.js完美解决跨域显示远程pdf问题

最新推荐文章于 2025-05-19 15:26:03 发布

原创

最新推荐文章于 2025-05-19 15:26:03 发布 · 1.8w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#pdf.js #跨域 #pdf

本文档介绍了如何在业务系统中利用pdf.js解决远程PDF文件跨域显示的问题。作者通过参考官方示例和整合网络资源，创建了一个工作示例，详细步骤包括在页面上动态添加canvas，从后端获取base64字符串，遍历生成多页PDF展示，以及文件流转base64的处理。提供完整源码下载链接。

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

由于公司需要在业务系统展示文服的pdf，最后折腾发现pdf存在严重跨域问题。网上也是各种跨域解决方案，但是没有哪个真正合适或者说能实现的，我参考官方demo和结合网上的一些资源，自己写了一个demo，完美运行，希望对需要的人有一些帮助。

pdf.js官网：http://mozilla.github.io/pdf.js/

1、页面的body，这里放了一个div，将会动态添加多个canvas，也就是显示所有pdf页。

<body>
<div id="canvasDiv" style="width: 100%;background-color:#5f5f5f;text-align: center">
</div>
</body>

2、页面js代码块，

访问后端并获取到base64字符串

//远程文件路径，直接直接从此URL中获取到PDF，如果输入到浏览器应该会下载到一个pdf文件
        var pdfUrl = "http://localhost:8088/files/getFileById?fileId=74b8995310b141413f1a32f86e1e1ecf";

        $.ajax({
            type: "get",
            data: {"param": pdfUrl},
            async: false,
            mimeType: 'text/plain; charset=x-user-defined',
            url: "/getData",
            success: function (data) {
                var pdfData = atob(data);
                // Using DocumentInitParameters object to l