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 笔记的更多相关文章

  1. pdf.js在IIS中配置使用笔记

    最近在手机App开发Android版本时候遇到需要显示PDF文件的需求,记得之前直接使用系统浏览器或者WebView就可以显示,但是现在不可以了,只能另寻其他办法. 最终找到PDF.JS来进行实现,但 ...

  2. 在线浏览PDF之PDF.JS （附demo）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla.gith ...

  3. 移动端嵌入pdf.js远程请求pdf出现（206）

    最近在做移动端的开发,需要嵌入pdf进行预览.看了很多的js组件后选择了pdf.js:使用起来还是比较方便的,至于使用网上有很多的教程. 但在使用过程中出现了如下一个问题(我做的是IOS系统): 问题 ...

  4. pdf.js pdfdom.js使用（转）

    开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是这个想法,说干就干,实践过程总是艰难的,折腾了3 ...

  5. 使用PDF.JS在线查看PDF

    过程简单粗暴. 第一步:下载源码https://github.com/mozilla/pdf.js 第二步:将源码拷贝进项目中,可以新建一个PDFShow文件夹存放代码 第三步:修改viewer.js ...

  6. PDF.js

    http://www.linuxidc.com/Linux/2015-06/118728.htm http://blog.csdn.net/xiangcns/article/details/42089 ...

  7. pdf.js使用教程

    pdf.js框架的魅力所在,为其为HTML5实现的,无需任何本地支持,而且对浏览器的兼容性也是比较好,要求只有一个:浏览器支持HTML5就好了!(不过对于低版本的IE,就只能节哀了!) 据说IE9以上 ...

  8. [pdf.js]预览pdf时，中文名称乱码的问题

    在项目中使用了pdf.js的方式预览pdf,但针对中文名称的时候会出现乱码,导致找不到该文件而出现错误. 解决办法 <script src="viewer.js" chars ...

  9. 文档在线预览开源实现方案二：OpenOffice + pdf.js

    文档在线预览的另一种实现方式采用的技术栈是OpenOffice + pdf.js, office文档转换为pdf的工作依然由OpenOffice的服务来完成,pdf生成后我们不再将其转换为其他文件而是 ...

  10. 在线阅读PDF文件js插件——pdf.js

    最近接到一个需求大致是这样的,要求在移动端和pc端能够在线阅读pdf文件,类似百度文库的功能. 首先想到的就是插件,github(全球最大的男性交友网站- -恩)上一大堆啊,首先找到一个PDFobje ...

随机推荐

  1. VS Code – Keyboard Shortcuts

    前言 记入一些自己常用到的 Keyboard Shortcuts 和 Extensions. Keyboard Shortcuts undo redo 鼠标坐标:shift + left/right ...

  2. HTML – Emmet Shortcut

    前言 程序员就爱 hot key, 就爱 shortcut. 当然这里指的是不牺牲安全和结果的情况下用尽可能少的力气去做事情, 而不是那种 shortcut 了以后会翻车的. Emmet 就是专门写 ...

  3. 【赵渝强老师】SQL的字符函数

    字符函数,顾名思义,操作的就是字符串.通过下图,我们来了解一下Oracle的字符函数. 一.大小写控制函数 lower.upper.initcap select lower('Hello World' ...

  4. mysql-存储过程（二）-逻辑判断语句

    一,if语句: IF(expr1,expr2,expr3) 如果 expr1 是TRUE (expr1 <> 0 and expr1 <> NULL),则 IF()的返回值为e ...

  5. BC1.2和PD 充电的区别

    USB Battery Charging Specification 1.2(BC1.2)和 USB Power Delivery(USB PD)是两个不同的充电标准,它们在应用场景.充电能力.充电协 ...

  6. kotlin更多语言结构——>反射

    类引用 最基本的反射功能是获取 Kotlin 类的运行时引用.要获取对静态已知的 Kotlin 类的引用,可以使用 类字面值 语法 val c = MyClass::class 请注意,Kotlin ...

  7. Android 车载应用开发指南 - CAN Bus 协议详解

    ​ 在现代车载应用开发中,CAN(Controller Area Network)总线协议扮演着不可或缺的角色.作为一个汽车内部网络的标准协议,CAN Bus 已经成为了车载系统通信的基础.而在 An ...

  8. 云原生周刊：Meshery v0.70 发布 ｜ 2024.1.22

    开源项目推荐 flux-cluster-template 该项目用于部署由 Flux.SOPS.GitHub Actions.Renovate.Cilium 等支持的 Kubernetes 集群,专注 ...

  9. javascript语法--for in、for of和forEach

    首先看简单for循环效果,功能最基本,但可以实现所有循环功能 for (let i = 0; i < list.length; i++) { } 接下来看for in.for of和forEac ...

  10. Go语言基础05 _string

    Go语言基础05 _string 1.基本使用 package string import "testing" func TestString(t *testing.T) { va ...