pdf.js预览pdf文件流（base64）

最新推荐文章于 2025-10-31 01:04:17 发布

原创

最新推荐文章于 2025-10-31 01:04:17 发布 · 3.3w 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#pdf #pdf在线预览 #base64 #Uint8Array

本文档介绍如何在前端使用pdf.js预览从后台获取的PDF文件流，特别是以Base64编码的形式。由于在上传PDF文件时无法获取服务器路径，而是直接获取到Base64字符串，通过修改pdf.js的viewer.js和viewer.html，实现了预览功能。在IE浏览器下可能会遇到对象不支持replace属性的错误，这是由于viewer.js未处理直接打开流的情况。

上一篇降到通过file跳转路径，取后台读取pdf文件。

后来我们需要上传pdf文件时支持预览，因为文件尚未传到服务器，所以不存在取后台取文件了，但是我们前端的小哥也没有获取选择的文件的本地路径，只抛给我一个base64码，很尴尬。。。。。

去网上查阅了很多资料，很少有这方面的文章，遂记下来，以备以后用到。

我用的是pdf自带的viewer.html页面。

直接上代码：

1、打开viewer.js，注释掉：var DEFAULT_URL

2、打开viewer.html，添加如下代码：

<script type="text/javascript">
        var DEFAULT_URL = "";
        var pdfUrl =document.location.search.substring(1);
        if(null == pdfUrl || "" == pdfUrl){
            var BASE64_MARKER = ';base64,';//声明文件流编码格式
            var preFileId = "";
            var pdfAsDataUri = "";
            var pdfAsDataUri = sessionStorage.getItem("_imgUrl");//这里就是pdf文件的base64码，我是通过session传递base64的
            var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
            DEFAULT_URL = pdfAsArray;