前端使用PDF.js把返回的base64或二进制文件流格式，实现pdf文件预览

pdf文件预览

简单了解PDF.js

PDF.js是一个JavaScript库，可在浏览器中无插件显示PDF文件，提供缩放、翻页、文本搜索等功能。本文介绍了其基本使用方法和示例代码，如添加翻页和搜索功能。

PDF.js的主要功能包括：

• 在浏览器中显示PDF：PDF.js使用HTML5的canvas元素来呈现PDF页面，使得用户可以在浏览器中直接查看PDF文件，而无需依赖外部的PDF阅读器插件
• 支持基本的浏览功能：PDF.js提供了一套用户界面，包括缩放、滚动、翻页等浏览功能，使用户能够方便地导航和浏览PDF文件。
• 支持文本搜索：PDF.js可以对PDF文件进行文本搜索，用户可以输入关键字来查找并定位到相应的内容。
• 支持页面导航：PDF.js提供了页面导航功能，用户可以跳转到特定的页面，或者在查看多页PDF时进行翻页。
• 支持缩放和旋转：PDF.js允许用户调整PDF页面的缩放级别，并可以旋转页面以适应不同的阅读需求。
• 支持批注和标记：PDF.js可以让用户在PDF文件中进行批注和标记，例如划线、画框、添加注释等，以便在阅读或共享时进行交流和标记重点。

下面会把简单时间文件预览的代码呈现出来，如果您想要进一步优化和学习PDF.js，可以打开官方文档学习；

代码实现

我这个举例的项目是一个H5，但是引入的有vue，所以写法是在H5的页面使用vue；

首先，引入依赖

<script src='../../js/vue.js'></script><script src="../../js/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.min.js"></script>

如果您使用的是纯vue项目可以通过npm/pnpm/yarn安装依赖

实现预览逻辑

<div style="width: 100%;" id="pdfPreview"></div>

mounted(){const fileId =getParam("fileId")this.getFile(fileId)},
methods:{
   $.ajax({
       url:"/api-file/file/getFileByte",
       type:'post',
       responseType:'blob',
       data:{
         fileId: fileId,},beforeSend:function(request){
         request.setRequestHeader("Authorization","Bearer "+JSON.parse(window.sessionStorage.getItem('store')||'{}').token);},success:(res)=>{// 将Base64字符串转换为二进制字符串const path = res.data
          const raw = window.atob(path);const rawLength = raw.length;const uInt8Array =newUint8Array(rawLength);for(let i =0; i < rawLength;++i){
             uInt8Array[i]= raw.charCodeAt(i);}const loadingTask =  pdfjsLib.getDocument({data: uInt8Array})
          loadingTask.promise.then(function(pdf){// 获取 PDF 的页数var numPages = pdf.numPages;// 遍历每一页for(var pageNumber =1; pageNumber <= numPages; pageNumber++){
                  pdf.getPage(pageNumber).then(function(page){var viewport = page.getViewport({scale:1.5});// 创建canvas元素var canvas = document.createElement('canvas');// 获取目标元素var target = document.getElementById('pdfPreview');// 将canvas元素插入到目标元素中
                        target.appendChild(canvas);var context = canvas.getContext('2d');
                      canvas.height = viewport.height;
                      canvas.width = viewport.width;// 渲染页码var renderContext ={
                        canvasContext: context,
                        viewport: viewport
                      };
                      page.render(renderContext).promise.then(function(){
                        console.log('PDF 预览成功！');});});}}).catch(function(error){// 错误处理
              console.error('加载PDF时发生错误: ', error);});},error:(err)=>{alert('文件加载失败，请稍后重试！')}}

上面代码只是简单的展示出来文件，没有实现分页，和缩放，如果需要可以自己去查询一下；