pdf.js 笔记
1.介绍
- 官方文档，pdf.js是由mozilla开源的js库，用于在web环境中渲染和显示pdf文档
- 目前，绝大多数PC浏览器都已经内置了pdf阅读器，能够直接预览pdf文件（内置了pdf.js），手机浏览器经测试，多数不能直接预览，要么会弹出下载框，要么调用本地已安装的阅读器进行预览
- 为了能够兼容更多的设备，可以在项目中集成pdf.js来预览pdf，从而摆脱浏览器版本的限制
2.优点
- 开源，自带预览UI，使用方便
- 性能好，支持文档分段加载，能秒开大文件
- 兼容性强，支持手机浏览器，IE等其他旧浏览器
- 扩展性好，可基于它做各种定制功能
3.基本使用
- pdf.js库有两个文件夹（web和build），自带的web/viewer.html文件是自带UI的pdf预览页面，访问页面时传入参数即可
http://127.0.0.1:8096/pdfjs-4.4.168-dist/web/viewer.html?file=http://127.0.0.1:8096/pdf/a.pdf
原理：本质上是通过fecth()获取pdf文档，再转换成canvas进行渲染
默认情况下，不能处理跨域的pdf文档，需要做两个处理：第一，改源码，不做同源判断，第二，处理ajax跨域的问题
4.核心浅析
- 读取pdf文档，并获取其页码数量
- 根据页码，获取页码对应的文档信息，并渲染到canvas容器中，可做到局部渲染
<script type="module">
//引入 pdfjsLib
var { pdfjsLib } = globalThis
//设定pdf.worker.mjs地址
pdfjsLib.GlobalWorkerOptions.workerSrc = './libs/pdfjs-4.4.168-dist/build/pdf.worker.mjs'
//解析渲染pdf的方法
async function renderPdf(){
//文档地址
var url = 'http://127.0.0.1:8096/_public/pdf/a.pdf'
try {
//读取文档
const pdf = await pdfjsLib.getDocument('./_public/pdf/a.pdf').promise
//页码数量
console.log('页码数量',pdf.numPages)
//获取页码对应的内容
const page = await pdf.getPage(1)
//当前页码的视口信息（宽高）
var viewport = page.getViewport({ scale: 1 })
//获取canvas
var canvas = document.getElementById('the-canvas')
var context = canvas.getContext('2d')
//根据视口信息设定canvas的宽高
canvas.width = viewport.width
canvas.height = viewport.height
//将内容渲染到canvas
page.render({
canvasContext: context,
viewport
})
} catch (error) {
console.log(error)
}
}
</script>
- 还可以将canvas转换成图片进行输出渲染，这里搭配element-ui进行示范
<body>
<div id="app">
<el-image v-for="(item,index) in img_list" :key="index" style="width: 200px; height: 200px" :src="item" :preview-src-list="img_list" :initial-index="index"></el-image>
</div>
</body>
<script type="module">
var { pdfjsLib } = globalThis
pdfjsLib.GlobalWorkerOptions.workerSrc = './libs/pdfjs-4.4.168-dist/build/pdf.worker.mjs'
//转换成图片
async function pdftoImages(url = ""){
if(!url){
return
}
try {
//读取文档
const pdf = await pdfjsLib.getDocument('./_public/pdf/a.pdf').promise
//页码数量
console.log('页码数量',pdf.numPages)
//所有图片的集合
const arr = []
//转换所有页码
for(var i=1;i<=pdf.numPages;i++){
//获取页码对应的内容
const page = await pdf.getPage(i)
//当前页码的视口信息（宽高）
var viewport = page.getViewport({ scale: 1 })
//获取canvas
var canvas = document.createElement('canvas')
var context = canvas.getContext('2d')
//根据视口信息设定canvas的宽高
canvas.width = viewport.width
canvas.height = viewport.height
//将内容渲染到canvas(同步)
await page.render({
canvasContext: context,
viewport
}).promise
//转换成图片
arr.push(canvas.toDataURL("image/png"))
}
//返回图片合集（base64）
return arr
} catch (error) {
console.log(error)
}
}
new Vue({
el:"#app",
data: {
img_list: []
},
mounted(){
this.getImages()
},
methods: {
async getImages(){
// 转换成图片并保存
this.img_list = await pdftoImages("http://127.0.0.1:8096/_public/pdf/a.pdf")
}
}
})
</script>
pdf.js 笔记的更多相关文章
- pdf.js在IIS中配置使用笔记
最近在手机App开发Android版本时候遇到需要显示PDF文件的需求,记得之前直接使用系统浏览器或者WebView就可以显示,但是现在不可以了,只能另寻其他办法. 最终找到PDF.JS来进行实现,但 ...
- 在线浏览PDF之PDF.JS （附demo）
平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla.gith ...
- 移动端嵌入pdf.js远程请求pdf出现（206）
最近在做移动端的开发,需要嵌入pdf进行预览.看了很多的js组件后选择了pdf.js:使用起来还是比较方便的,至于使用网上有很多的教程. 但在使用过程中出现了如下一个问题(我做的是IOS系统): 问题 ...
- pdf.js pdfdom.js使用（转）
开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是这个想法,说干就干,实践过程总是艰难的,折腾了3 ...
- 使用PDF.JS在线查看PDF
过程简单粗暴. 第一步:下载源码https://github.com/mozilla/pdf.js 第二步:将源码拷贝进项目中,可以新建一个PDFShow文件夹存放代码 第三步:修改viewer.js ...
- PDF.js
http://www.linuxidc.com/Linux/2015-06/118728.htm http://blog.csdn.net/xiangcns/article/details/42089 ...
- pdf.js使用教程
pdf.js框架的魅力所在,为其为HTML5实现的,无需任何本地支持,而且对浏览器的兼容性也是比较好,要求只有一个:浏览器支持HTML5就好了!(不过对于低版本的IE,就只能节哀了!) 据说IE9以上 ...
- [pdf.js]预览pdf时，中文名称乱码的问题
在项目中使用了pdf.js的方式预览pdf,但针对中文名称的时候会出现乱码,导致找不到该文件而出现错误. 解决办法 <script src="viewer.js" chars ...
- 文档在线预览开源实现方案二：OpenOffice + pdf.js
文档在线预览的另一种实现方式采用的技术栈是OpenOffice + pdf.js, office文档转换为pdf的工作依然由OpenOffice的服务来完成,pdf生成后我们不再将其转换为其他文件而是 ...
- 在线阅读PDF文件js插件——pdf.js
最近接到一个需求大致是这样的,要求在移动端和pc端能够在线阅读pdf文件,类似百度文库的功能. 首先想到的就是插件,github(全球最大的男性交友网站- -恩)上一大堆啊,首先找到一个PDFobje ...
随机推荐
- svg之viewbox缩放
先看个示例 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- DOM – Dimension & Coordinate (offset, client, computed, rect)
前言 很多年前有记入过一篇 box-sizing 和 dom width. 想想也挺可悲的, 那年我是负责后端的, 却要帮着前端去学习这些知识来解决问题... 也好, 现在 full stack, 也 ...
- Git Bash OpenSSL – Generate Self Signed Certificate
前言 以前就写过了, 只是写的太乱, 这篇是一个整理版. 以前的文章: Git Bash 创建证书 PowerShell 创建证书 我已经没有用 PowerSheel 做证书了, 所以就不介绍了. 参 ...
- 阿里面试让聊一聊Redis 的内存淘汰（驱逐）策略
大家好,我是 V 哥,粉丝小A面试阿里,说被问到 Redis 的内存淘汰策略的问题,整理这个笔记给他参考,也分享给大家,如果你遇到这个问题,会怎么回答呢? Redis 的内存淘汰策略是指当Redis的 ...
- SuperMap iServer8C证书过期如何解决
说明:该问题是SuperMap iServer8.0.2和8.1.0版本云许可模块问题,需要手动更新云许可HTTPS证书,可以升级到官网8.1.1/9D/10i等方式进行解决 针对无法升级或者老项目维 ...
- P9118 [春季测试 2023] 幂次
二诊前愉快的一次测试,关键是还有奶茶喝 第二题,本来直接暴力去重枚举可以的六十分的,但是.......花了30分钟优化剪纸,优化空间后,惨变35分. [春季测试 2023] 幂次 题目描述 小 Ω 在 ...
- PHP面试，Redis
1. 什么是Redis? Redis(Remote Dictionary Server)是一个开源的内存数据存储系统,它可以用作数据库.缓存和消息中间件.它支持多种数据结构,如字符串.哈希.列表.集合 ...
- SIGIR2024| RAREMed: 不放弃任何一个患者——提高对罕见病患者的药物推荐准确性
SIGIR2024| RAREMed: 不放弃任何一个患者--提高对罕见病患者的药物推荐准确性 TLDR:在本文中,我们针对药物推荐模型对罕见病患者推荐精度低的问题,提出了一种新的基于预训练-微调的药 ...
- MidJourney新手攻略
目录 MidJourney简介 MidJourney的使用 1. 加入Discord 2. 选择一个频道 3. 使用/imagine来输入提示 4. 等待一分钟左右,会输出四张图 5. 查看结果 Re ...
- KubeKey v3.1 发布：快速自定义离线安装包
日前,KubeKey v3.1 正式发布.该版本主要对离线场景部署.离线包制作以及向 Kubernetes v1.24+ 升级进行了优化. KubeKey 简介 KubeKey 是 KubeSpher ...