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 ...
随机推荐
- 【转】一种Vue应用程序错误/异常处理机制
在前端应用程序中,最常见的错误/异常类型可能包括以下几种: 语法错误:使用了一些错误的语法 运行时错误:由于执行期间的非法操作导致的 逻辑错误:由于程序逻辑错误 Http 错误:API 返回的错误 有 ...
- Angular Material 18+ 高级教程 – Get Started
前言 本编是 Angular Material 教程的开篇,我先介绍一下这个教程. 首先,Angular Material 教程不会像 Angular 教程那么注重原理,也很少会逛源码. 所以,如果你 ...
- 全面掌握 Jest：从零开始的测试指南（上篇）
随着JavaScript在前后端开发中的广泛应用,测试已成为保证代码质量的关键环节. 为什么需要单元测试 在我们的开发过程中,经常需要定义一些算法函数,例如将接口返回的数据转换成UI组件所需的格式.为 ...
- MyBatis——简介
MyBatis MyBatis 是一款优秀的持久层框架,用于简化 JDBC 开发 官网:https://mybatis.net.cn/ 持久层 负责将数据保存到数据库的那一层代码 javaEE 三层架 ...
- PHP命令执行与绕过
一.eval()函数调用--无严格过滤: 1.highlight_file()高亮显示: ?c=highlight_file(base64_decode("ZmxhZy5waHA=" ...
- [TK] 盖房子 hzoi-tg#262
同机房大佬也写了这题的 题解. 通解分析 此类问题我通常喜欢归纳成一类,即阻碍联通的坐标DP. 既然是阻碍联通,那么此类问题的通用思路是这样的: 首先将dp数组图形化. 一般用一个特定图形上的特定点来 ...
- FB 汉化版恢复慢速更新
汉化版将恢复慢速更新 -------------------------[Q群]------------------------ 1 群: 11675361 2 群: 47642719 ------- ...
- 自定义指令 v-imgerror 当图片的 src 资源 无效 就替换 默认的 src 显示图片
// 回顾自定义指令 // 作用 : 自定义一些对dom操作的快捷指令 // 前提:指令就是用来操作 dom (v-if /v-show/v-for ....) // 语法:Vue.directive ...
- vue2 + webpack 分析报告 report == webpack-bundle-analyzer
packjson.js 配置 "build-report":"vue-cli-service build --report", 执行 : npm run bui ...
- 在不需要WiFi密码的情况下进行断网攻击
本教程只能用于学习研究之用 任何未经他人允许的攻击行为都是违法行为 参考教程 https://www.youtube.com/davidbombal 准备 * kali linux 系统 这里使用的是 ...