pdf.js在angular.js项目中的运用实例_angular 打包影响pdfjs文件-CSDN博客

本文链接：https://blog.csdn.net/qq_26780317/article/details/108801248

本文介绍了如何在H5项目中使用pdf.js实现在线PDF预览，包括两种方式：viewer.html页面和canvas渲染。重点讨论了在测试环境遇到的跨域问题及解决策略，展示了从本地到线上部署的实践步骤。

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

前言：在项目开发中，我们有时候经常会遇到在线解析游览PDF的功能，如果，想实现在线游览pdf，可以使用pdf.js实现该功能。而pdf.js核心部分是pdf.js和pdf.worker.js，一个负责API解析，一个负责核心解析。

一、实现pdf预览主要有两种方式：

1.使用pdf.js已经写好的viewer.html页面，需要将pdf.js代码放到服务器上，因为放到本地包有点大（这种方式，展示的pdf较为清晰，而且，方便用户进行放大或者缩小的操作，体验较好，推荐这种方式）；

2.将pdf文件渲染成canvas（这种方式，展示的pdf稍微有点模糊）。

下面，详细说下在项目中，两种方式的具体使用方法和过程中遇到的问题。

二、具体运用

1.第一种方式：使用viewer.html，已读取文件流的方式在线展示pdf文件；

（1）下载pdf.js:

官网下载地址：https://mozilla.github.io/pdf.js/getting_started/#download

下载后将pdf.js放到服务器上，如：http://127.0.0.1:500/lib/pdf.js

（2）使用iframe标签去显示：

<!--pdf展示-->
<div ng-if="deTailsinfo.showPdfFlagRun" style="position:fixed;width:100%;height:100%;top:0;left:0;background:rgba(1,1,1,0.5);z-index:9999;text-align:center;">
    <div style="width:98%;height:90%;border-radius:10px;box-shadow:0 0 10px #3268d2;background:#ffffff;margin-top:1%;">
        <div class="iframe-body-sty" style="height:100%;">
            <iframe src="{