前端使用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;

首先,引入依赖

javascript 复制代码
<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安装依赖

实现预览逻辑

javascript 复制代码
 <div style="width: 100%;" id="pdfPreview"></div>
javascript 复制代码
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 = new Uint8Array(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('文件加载失败,请稍后重试!')
       }
}

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

相关推荐
雪碧聊技术几秒前
01-Ajax入门与axios使用、URL知识
前端·javascript·ajax·url·axios库
adminIvan4 分钟前
Element plus使用menu时候如何在折叠时候隐藏掉组件自带的小箭头
前端·javascript·vue.js
会发光的猪。24 分钟前
【 ElementUI 组件Steps 步骤条使用新手详细教程】
前端·javascript·vue.js·elementui·前端框架
我家媳妇儿萌哒哒24 分钟前
el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现
前端·javascript·elementui
baiduguoyun40 分钟前
react的import 导入语句中的特殊符号
前端·react.js
前端青山41 分钟前
webpack指南
开发语言·前端·javascript·webpack·前端框架
NiNg_1_2341 小时前
ECharts实现数据可视化入门详解
前端·信息可视化·echarts
励志前端小黑哥2 小时前
有了Miniconda,再也不用担心nodejs、python、go的版本问题了
前端·python
喵叔哟2 小时前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特2 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts