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. JavaScript——案例-表单验证

    需求       <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. Java序列化、反序列化、反序列化漏洞

    目录 1 序列化和反序列化 1.1 概念 1.2 序列化可以做什么? 3 实现方式 3.1 Java 原生方式 3.2 第三方方式 4 反序列化漏洞 1 序列化和反序列化 1.1 概念 Java 中序 ...

  3. 配置windows update失败还原更改

    配置windows update失败还原更改_解决方案 解决方法: 方法1:     重启,按F8,选择最后一次正常启动.     如果还是需要等待.可采用方法2: 方法2:     重启,按F8,选 ...

  4. 【赵渝强老师】MySQL高可用架构：MHA

    MHA(Master HA)是一款开源的 MySQL 的高可用程序,它为 MySQL 主从复制架构提供了 automating master failover 功能.MHA 在监控到 master 节 ...

  5. vue前端使用nexus配置npm私有仓库

    当我们运行前端项目的时候,常常在解决依赖的时候会加上一个参数npm install --registry=https://registry.npm.taobao.org将源指定为淘宝的源,以期让速度加 ...

  6. 16. VUE怎么阻止冒泡

    给事件添加 stop 修饰符 ,比如 click.stop  ; 补充: 阻止默认行为 prevent 修饰符 ,超链接的跳转,表单的默认提交 : once 修饰符 事件只触发一次 ps:事件修饰符可 ...

  7. 4.flask 源码解析：上下文

    目录 一.flask 源码解析:上下文 1.1 上下文(application context 和 request context) 1.2 Update: 为什么要用 LocalProxy Flas ...

  8. npm install报错 SyntaxError: Unexpected end of JSON input while parsing near '...=GmVg\r\n-----END PGP'

    解决方法:  npm cache clean --force 然后重新执行:npm install即可

  9. KubeSphere 开源 KubeEye：Kubernetes 集群自动巡检工具

    为什么开源 KubeEye Kubernetes 作为容器编排的事实标准,虽然架构优雅功能也非常强大,但是 Kubernetes 在日常运行过程中总会有一些疑难杂症和隐性的问题让集群管理员和 Yaml ...

  10. 你真的理解 Kubernetes 中的 requests 和 limits 吗？

    在 Kubernetes 集群中部署资源的时候,你是否经常遇到以下情形: 经常在 Kubernetes 集群种部署负载的时候不设置 CPU requests 或将 CPU requests 设置得过低 ...