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 ...
随机推荐
- BOM – Window.matchMedia
参考 Youtube – Detecting Screen Size and OS Dark Mode with matchMedia() - JavaScript Tutorial 介绍 CSS 有 ...
- sign与unsigned的原理、数据存储与硬件的关系
目录 关键字unsigned和signed 数据在计算机中的存储 原码 与 补码的转化与硬件关系 原,反,补的原理: 整型存储的本质 变量存取的过程 类型目前的作用 十进制与二进制快速转换 大小端字节 ...
- 简单上手 Vue Router
Vue Router 也随着 Vue3 的更新来到了 4 版本,来看一下怎么使用吧!(这里使用的是 composition API 和 TypeScript 模式) 安装 vue-router4 np ...
- C++指针等于地址加偏移量
概述 本文通过c++示例代码演示指针的加减法运算及对 "指针 = 地址 + 偏移量" 的理解. 研究示例 1. 首先来检查各种变量类型所占的内存大小 #include <io ...
- 1. C#面试题 - Webservice和WebApi的区别
1. Webservice : 基于SOAP协议的,数据格式时XML,只支持http协议,不是开源的,只能部署在IIS上 2. Webapi 开源的,.net 平台
- 10-react不同层级的组件之间的数据传递数据 createContext 上下文
// 组件传值 props 接收传递过来的数据 import ReactDom from "react-dom" import { createContext, Component ...
- 使用AVX2指令集加速推荐系统MMR层余弦相似度计算
原文:blog.fanscore.cn/a/62/ 1. 背景 前一段时间公司上线了一套Go实现的推荐系统,上线后发现MMR层虽然只有纯计算但耗时十分离谱,通过pprof定位问题所在之后进行了优化,虽 ...
- KubeSphere 使用 OpenLDAP 进行统一认证完全指南
作者:申红磊,青云QingCloud 容器解决方案架构师,开源项目爱好者,KubeSphere Member. 背景 在实际使用中,会有一些用户,在不同场景中经常碰到 OpenLDAP 对接问题: 能 ...
- 云原生周刊：CNCF 宣布 KubeEdge 毕业
云原生周刊:CNCF 宣布 KubeEdge 毕业 开源项目推荐 Watchtower Watchtower 这个项目能够自动监测并更新正在运行的 Docker 容器.它会定期检查并拉取 Docker ...
- 国内空白，AI将文字搜索转化为交互数据图表，融资4000万，已与Perplexity整合
2024年10月17日.产品为利用生成式AI将文字搜索转化为数据图表的美国初创公司Tako,种子轮融资575万美元,折合人民币4000万元. 国外AI搜索主导者Perplexity,其创始人也参与了这 ...