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. C#|.net core 基础 - 扩展数组添加删除性能最好的方法

    今天在编码的时候遇到了一个问题,需要对数组变量添加新元素和删除元素,因为数组是固定大小的,因此对新增和删除并不友好,但有时候又会用到,因此想针对数组封装两个扩展方法:新增元素与删除元素,并能到达以下三 ...

  2. SpringMVC——SSM整合-异常处理器

    异常处理器 出现异常的常见位置与常见诱因: 框架内部抛出的异常:因使用不合规导致 数据层抛出异常:因外部服务器故障导致(例如:服务器访问超时) 业务层抛出的异常:因业务逻辑书写错误导致(例如:遍历业务 ...

  3. 深入理解 Nuxt.js 中的 app：error 钩子

    title: 深入理解 Nuxt.js 中的 app:error 钩子 date: 2024/9/27 updated: 2024/9/27 author: cmdragon excerpt: 摘要: ...

  4. CTF中特别小的EXE是怎么生成的

    我们在打CTF时候,出题的爷爷们给出的exe都很小 就10k左右,有的甚至就5k,那时候我很郁闷啊.现在我也能了啊哈哈 不多bb按如下操作: 我们来看看正常的release生成的代码 #include ...

  5. 使用composer创建项目时报错：Composer could not find the config file？

    使用composer创建项目时报错:Composer could not find the config file:C:\Composer ....? 一般报这个错就是composer安装的时候配置了 ...

  6. USB协议详解第3讲（USB描述符-设备描述符）

    我们第一个学习要点就是USB描述符,所谓描述符其实就是C语言里面的结构体或者数组,数组包含的信息说明当前的设备具有哪些特征.USB描述符有设备描述符.配置描述符.接口描述符.端点描述符.字符串描述符, ...

  7. android 性能优化 -systrace

    简介: Systrace允许监视和跟踪Android系统的行为(trace).它会指明系统都在哪些工作上花费时间.CPU周期都用在哪里,甚至可以看到每个线程.进程在指定时间内都在干嘛.它同时还会突出观 ...

  8. torch和numpy的相互转换

    import torch x = torch.rand(2,2) x1 = x.numpy() # torch转换到numpy x2 = torch.from_numpy(x1) #numpy转换to ...

  9. js有效括号匹配

    // 定义一个括号映射 const bracketMap = [ { left: '[', right: ']' }, { left: '<', right: '>' }, { left: ...

  10. vue打包的时候删除 console 和 debugger

    esbuild: { pure: VITE_DROP_CONSOLE ? ['console.log', 'debugger'] : [], supported: { // https://githu ...