pdfjs 基础使用教程（一）

最新推荐文章于 2024-04-10 16:24:47 发布
最新推荐文章于 2024-04-10 16:24:47 发布
阅读量1.1k 收藏 1
点赞数 2
分类专栏： pdf.js 文章标签： html5 javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/e78com5959ws77/article/details/120572652
版权

首先访问pdfjs 官网 PDF.js 

点击download

我这里面下载的就是稳定版本的2.9.359版本。下载完成之后是个zip压缩包的方式解压之后如下图

 

build目录放的是pdf.js 和pdf.work.js  是pdfjs解析pdf文件的核心

web目录放的是谷歌写的使用 pdf.js的demo网页

这里面如果我们直接打开web底下的viewer.html文件会出现如下图：

 这是因为我们如果直接打开的话使用的是本地的file协议而官网并没有为file协议构建如下图：

这里面的大概意思就是并没有为file协议构建。因此我们需要部署起来，部署的方案很多这里面我选择nginx。首先安装nginx 安装完成之后nginx 会存在以下目录：

其中www目录就是网页html放的位置，我们将pdfjs解压的完整复制过去

这个时候启动nginx 一般nginx都是80 端口 我这边是8080端口

我们在浏览器地址访问 http://localhost:8080/web/viewer.html 如果是80端口8080改为80或者去掉：8080 都可以

这个时候我们发现已经能正常访问了。

好的今天就到这。基础交流群 799827663

WellStar520
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PDF.js亲测可用使用
01-23
解决pdf在浏览器打开，亲测可用使用，使用pdf.js实现功能
pdf.js使用教程
weixin_30321709的博客
05-26 862
pdf.js框架的魅力所在，为其为HTML5实现的，无需任何本地支持，而且对浏览器的兼容性也是比较好，要求只有一个：浏览器支持HTML5就好了！（不过对于低版本的IE，就只能节哀了！） 据说IE9以上是OK的，因为我本地是IE11，所以我只在IE11上测试过，是通过的（当然火狐，360，我也测了一下，是可以的）。 因为项目开发需要，在线展示PDF，而且要兼容IE，所以就选择了pdf.js...
【PDF.js】PDF文件预览
HJay_Chou的博客
04-10 969
使用PDFJS实现pdf文件的预览，支持预览指定页、关键词搜索、缩略图、页面尺寸调整等等。
pdf.js使用方法
热门推荐
Gleason
06-08 11万+
项目中 显示 pdf 的功能,浏览过不少的技术帖,都不太理想,花了点时间研究了下pdf.js正确使用方法,总结下:1.防止自己忘记 2.工作留有痕迹 3.供大家参考借鉴 pdf.js: 将 PDF 文件解析后生成一张 .png 图片,利用 canvas 元素显示在页面上,此方法不推荐使用, 呈现在页面上的pdf会模糊,目前没有找到有效解决办法,给爱钻研的小伙伴提供个思路,在pdf.js官网上有...
pdf.js使用全教程(开发笔记)
splitSecond的博客
03-25 4万+
项目有需求要预览pdf,一开始是使用了iframe标签进行预览.后面发现效果并不理想.加载速度慢,自定义按钮难.最重要的是IE兼容太差! PDF.js似乎是一个完美的解决方案,号称兼容各种浏览器.快速且高效.界面按钮可以配置,而且也比原生iframe框架好看一些,但是一轮的使用下来,确确实实躺了不少的坑,特此记录一下全过程,希望以后使用的时候注意一点. 开头先罗列一下一轮的使用下来遇到的问题: 1,跨域报错, 2,不支持预览base64格式pdf文件流 3,源码中使用了let const 导致老项
PDF.js 前端开发使用指南
西装暴徒_12138的博客
03-27 8713
1. 安装 PDF.js安装PDF.js有两种方法：方法1：通过npm安装这样就会在你的项目中安装PDF.js。方法2：手动下载也可以从官方网站手动下载PDF.js。下载后，将pdf.js和pdf.worker.js文件放到你的项目中。2. 使用 PDF.js使用PDF.js需要做以下几步：步骤1：创建一个空的div在你的HTML文件中创建一个空的div元素，用于显示PDF文档。例如：
PDFJS使用的CMap字体文件
最新发布
04-25
适合人群：前端开发 应用场景：PDF文件使用了pdfjs不支持的字体文件，这时，需要额外为pdfjs提供字体文件
pdfjs快速使用入门
09-17
pdfjs快速使用入门
pdfjs可用版本pdfjs可用版本pdfjs可用版本
09-05
pdfjs可用版本pdfjs可用版本pdfjs可用版本
vue使用pdfjs显示PDF可复制的实现方法
10-17
主要介绍了vue使用pdfjs显示PDF可复制的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
pdfjs1.9.zip
07-14
pdf.js免费开源的这点很重要纯js实现，客户不需要安装额外的插件功能强大，缩放，打印，查找功能应有尽有兼容主流浏览器，火狐，谷歌，ie9+都支持 缺点: 文件偏大会影响加载速度 引文使用H5 技术，ie8 以及ie8 以下...
js入门教程(共8个pdf文件）
02-03
一共分八章讲解：（pdf格式） 第1章 JavaScript语言概述 第2章 JavaScript语言基础 第3章 JavaScript事件处理 第4章 JavaScript基于对象编程 第5章 文档对象模型(DOM) 第6章 String、Math、Array等数据对象 第7章 Window及相关顶级对象 第8章 Document对象
javascript——PDF教程大合集.rar
05-12
javascript——PDF教程大合集 1、100个直接可以拿来用的JavaScript实用功能代码片段 2、JavaScript DOM编程艺术（中文） 3、JavaScript高级程序设计（第3版）中文 高清 完整 4、JavaScript脚本特效编程给力起飞 5、JavaScript权威指南(第6版)(中文版) 6、JavaScript入门经典第4版修订版 7、javascript设计模式 8、JavaScript完全解析 9、JavaScript学习指南 10、JavaScript语言精粹 11、深入浅出JavaScript(中文版)
浅谈PDF.js使用心得
12-11
一次在开发微信预览保单的时候所使用到的，由于安卓手机浏览器不支持解析PDF，所以才用了PDF.js来解析PDF并展示。 pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持。 在线演示地址：http://mozilla.github.com/pdf.js/web/viewer.html PDF.js可在官网下载  地址：http://mozilla.github.io/pdf.js/ 解压后的目录结构是： 其中build目录是PDF.js的核心文件。 web目录是PDF.js的配置与显示文件。 viewer.html是负责显示PDF的，v
jsPDF(用 JS 生成 PDF).zip
07-13
jsPDF 是一个免费的 JavaScript 类库，可以用来创建 PDF 文件，不需要服务器端支持。它支持文本（含格式），画图和图片。       jsPDF 是一个使用Javascript语言生成PDF的开源库。你可以在Firefox插件，服务端脚本或是浏览器脚本中使用它。       客户端Safari 和 iPhone Safari 支持得最好,其次是Opera和Windows下的Firefox 3等。IE暂不支持。
JSPDF(解决了全页面截图文图)
01-02
JSPDF(解决了全页面截图文图)，亲测可用。大家可以放心下载
Pdfjs使用
qq_43070052的博客
11-21 3332
pdfjs预览、pdf水印
PDF.js 超简单使用教程，一看就会！
笔记本
01-09 1万+
下载官方的Prebuilt 下载完成，解压缩： 文件结构： 配置ngnix，让项目跑起来 修改 nginx.conf 文件： server { listen 8877; server_name localhost; location / { root E:/pdfjs-2.2.228-dist; } } 启动 nginx，...
pdfjs-dist使用
08-26
PDF.js是一个用于在Web上呈现PDF文档的JavaScript库。你可以使用pdfjs-dist来引入并使用该库。下面是一些基本的使用步骤： 1. 首先，下载pdfjs-dist库。你可以从PDF.js的官方GitHub仓库中获取最新版本的库文件：https://github.com/mozilla/pdf.js/releases 2. 解压缩下载的文件，你将会看到一个名为`pdfjs-dist`的文件夹。 3. 将`pdfjs-dist`文件夹中的`build`文件夹复制到你的项目中。 4. 在你的HTML文件中引入`pdf.js`和`pdf.worker.js`这两个脚本文件。你可以使用以下代码片段： ```html <script src="path/to/pdf.js"></script> <script src="path/to/pdf.worker.js"></script> ``` 请确保将`path/to/`替换为实际的文件路径。 5. 创建一个用于呈现PDF文档的容器元素。例如，你可以在HTML中添加一个带有id属性的div元素： ```html <div id="pdfContainer"></div> ``` 6. 使用JavaScript代码加载并呈现PDF文档。你可以使用以下代码示例： ```javascript // 获取用于呈现PDF的容器元素 const container = document.getElementById('pdfContainer'); // 使用PDF.js加载PDF文档 PDFJS.getDocument('path/to/pdf/document.pdf').promise.then(pdf => { // 获取第一页 pdf.getPage(1).then(page => { // 创建一个canvas元素来显示页面内容 const canvas = document.createElement('canvas'); container.appendChild(canvas); // 设置canvas的尺寸 const viewport = page.getViewport({ scale: 1 }); canvas.width = viewport.width; canvas.height = viewport.height; // 将页面呈现到canvas上 const renderContext = { canvasContext: canvas.getContext('2d'), viewport: viewport }; page.render(renderContext); }); }); ``` 确保将`path/to/pdf/document.pdf`替换为实际的PDF文档路径。 这只是一个简单的示例，你可以根据自己的需求进行进一步的定制和扩展。你可以在PDF.js的官方文档中找到更多关于使用pdfjs-dist的信息：https://mozilla.github.io/pdf.js/

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值