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 ...
随机推荐
- 搭建ipv6并发代理池
声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 学习目标 ounter(l ...
- 学习高校课程-软件设计模式-软件设计原则（lec2）
Feature of Good Design (1) 优秀设计的特点(一) Code reuse 代码复用 – Challenge: tight coupling between components ...
- ASP.NET Core – Logging & Serilog
前言 以前就写过了 Asp.net core 学习笔记 (Logging 日志), 只是有点乱, 这篇作为整理版. 参考: docs – Logging in .NET Core and ASP.NE ...
- OData – Query to Expression
前言 EF Core 可以把 expression 转换成 string, 但没办法转回来. 想把 string 转成 expression, 目前最合适的工具是 OData. 虽然 Dynamic ...
- RSA 对称加密，对称解密----公钥私钥加密解密过程
RSA 对称加密,对称解密----公钥私钥加密解密过程(Java) 公司说不能传铭文密码,所以只能加密,再解密:麻烦事,其实这在需求文档没有,开发时间点也没有,浪费了了一上午的时间,还占用了公司给的开 ...
- Java中使用BigDecimal进行double类型的计算（高精度，可保留几位小数）
Java中 小数直接进行乘除运算,会出现精度问题导致计算结果有误需要使用 BigDecimal 类型辅助运算,保证精度无误源码: import java.math.BigDecimal;import ...
- MQ核心作用异步&削峰&解耦使用场景详解
说在前面 在如今的高并发互联网应用中,如何确保系统在巨大的流量冲击下还能稳稳当当运转,是每个技术团队都会遇到的挑战.说到这,消息队列(MQ) 就是背后的"大功臣"了. 无论是异步处 ...
- go 使用websocket
package chat import ( "encoding/json" "github.com/gorilla/websocket" "githu ...
- 泛型dotnet
// 什么是泛型List<T> T:表示类型参数,指代任意类型 T可以是任意标识 // 编写代码时使用特殊符号替代位置类型,在实例化或使用/调用时才会进行具体类型的定义 // 特点:重用代 ...
- 存储事件 storage
// 去手动删除本地存储触发存储事件 window.addEventListener('storage', function () { console.log('存储事件触发了') }) const ...