解决pdf.js预览pdf文件流(base64)亲测可用_pdfjs在viewer.js里如何用es5语法解析多个base64编码渲染pdf进行预览-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43058760/article/details/108680907

本文介绍了如何使用pdf.js预览从前端获取的PDF文件的base64编码。通过将base64编码存储在session中，并在viewer.html中解析展示，实现了前端预览PDF文件的功能。详细步骤包括下载pdf.js、配置viewer.html和viewer.js，以及在主页面处理base64数据。

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

解决pdf.js预览pdf文件流(base64)亲测可用

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

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

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

直接上代码：**

首先pdf.js官网下载：官网下载地址
我下载的是es5兼容低版本的
在这里插入图片描述
1.下载好后，解压出来，结构如下：

2.直接从本地打开web/viewer.html文件，但是注意，pdf这类文件会跨域，所以必须放到服务器上才可以预览。

放到服务器上就是http://mozilla.github.io/pdf.js/web/viewer.html，并不会报错，或是开启本地服务localhost,不知道的可以下下载HBuilder直接开启本地服务
在这里插入图片描述
像上图一样，直接在viewer.html文件，点击上面谷歌浏览器，直接开启本地服务

此时我们需要解决的是将base64如何传入这个插件中并在线展示

3.在web/viewer.html中添加代码

<script type="text/javascript">
  var DEFAULT_URL = "";
  var pdfUrl = document.location.search.substring(1);
  if (null == pdfUrl || "" == pdfUrl) {