pdf预览

最新推荐文章于 2025-06-02 19:17:58 发布

weixin_34306593

最新推荐文章于 2025-06-02 19:17:58 发布

阅读量177

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c8b0c2ff265da2ddc3cc081

本文详细介绍如何使用PDF.js插件实现PDF文档的在线预览功能。包括插件的结构介绍，不同环境下预览方法，如处理blob文件流、base64编码及直接通过url预览，以及解决跨域问题的配置。

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

用pdf.js实现预览

pdfjs是什么？官网

开源的pdf文档读取解析插件。可定制功能，完全脱离浏览器的依赖，web渲染pdf引擎。兼容IE9+

插件结构如下： build路径下是主程序； web路径下是查看器程序。

pdf使用方法

generic 放在有服务器环境的地方，访问目录下viewer.html;
web/viewer.js 中 HOSTED_VIEWER_ORIGINS配置generic预览地址，防止产生跨域问题造成预览报错。

 var HOSTED_VIEWER_ORIGINS = ['null','http://127.0.0.1:8080'];
复制代码

以下示例默认将插件放在vue static目录下：

服务端返回文件urlData：

  //服务端返回bolb文件流
   var files = new File([urlData], file.name, {type: file.type})
  //服务端返回base64
  export function convertBase64UrlToBlob(urlData){  
       var bytes=window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte  
   
       //处理异常,将ascii码小于0的转换为大于0  
       var ab = new ArrayBuffer(bytes.length);  
       var ia = new Uint8Array(ab);  
       for (var i = 0; i < bytes.length; i++) {  
           ia[i] = bytes.charCodeAt(i);  
       }  
       return new Blob( [ab]);  
   }
   var flle = convertBase64UrlToBlob(urlData);

   var url = `../../static/generic/web/viewer.html?file=${window.URL.createObjectURL(flle)}`//本地环境
复制代码

服务端返回文件url：

   window.open(url)
   //本地环境pdf第三页预览
   url = '../../static/generic/web/compressed.tracemonkey-pldi-09.pdf#page=3'
复制代码

iframe src直接展示：

缺点：工具栏由浏览器控制
优点：可兼容ie8展示，ie8需下载阅读器支持
复制代码

转载于:https://juejin.im/post/5c8b0c2ff265da2ddc3cc081