小程序中使用pdf.js自定义预览下载pdf文件(使用web-view组件)

朴灿烈づ我的快乐病毒、 2022-02-28 03:50 3490阅读 0赞

### 小程序中预览下载PDF文件 ###

由于小程序是在手机端使用,微信小程序的api有时候不满足我们的需求. 所以就自己自定义实现一个下载预览PDF的功能  
1.小程序端使用web-view组件,在其中打开一个网页,在网页中实现我们需要的功能

<web-view src="{
       {url}}"></web-view>

*  其中url就是打开我们网页的地址

2.在网页中添加pdf.js  
js下载地址：[http://mozilla.github.io/pdf.js/][http_mozilla.github.io_pdf.js]  
这里只用到下载文件中的两个js:  
pdf.js 和 pdf.worker.js  
在H5中添加js文件

<script type="text/javascript" src="/pdf.js"></script>

body位置

<div id="canvs"  style="margin:0px auto">
    	<canvas id="the-canvas" ></canvas>
    	<div style="text-align: center">
    		<button id="prev" onclick="onPrevPage()">上一页</button>
    		<span> <span id="page_num"></span> / <span id="page_count"></span></span>
    		<button id="next" onclick="onNextPage()">下一页</button>
    		     	
    	</div>
    </div>

脚本渲染

var url = '/uploadfile/a.pdf';//展示的pdf路径
    PDFJS.workerSrc = '/js/pdf.worker.js';//引入js，不引好像也没事。。。
    var pdfDoc = null,
        pageNum = 1,//页码
        pageRendering = false,//据我观察，是用来应对一时间多次点击下一页按钮的情况的,你可以试试。
        pageNumPending = null,//取得最新的页码
        scale = 2.5,//缩放倍数
        canvas = document.getElementById('the-canvas'),
        ctx = canvas.getContext('2d');
    PDFJS.getDocument(url).then(function(pdfDoc_) {
      pdfDoc = pdfDoc_;
      document.getElementById('page_count').textContent = pdfDoc.numPages;
      renderPage(pageNum);
    });
    /**
     *以下方法可以提取放到单独js里面去
     */
    /**
     *渲染当前页
     */
    function renderPage(num) {
      pageRendering = true;
    
      pdfDoc.getPage(num).then(function(page) {
        var viewport = page.getViewport(scale);
        canvas.height = viewport.height;
        canvas.width = viewport.width;
    
        var renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };
        var renderTask = page.render(renderContext);
    
        renderTask.promise.then(function() {
          pageRendering = false;
          if (pageNumPending !== null) {
            renderPage(pageNumPending);
            pageNumPending = null;
          }
        });
      });
    
      document.getElementById('page_num').textContent = num;
    }
    
    function queueRenderPage(num) {
      if (pageRendering) {
        pageNumPending = num;
      } else {
        renderPage(num);
      }
    }
    
    /**
     *上一页
     */
    function onPrevPage() {
      if (pageNum <= 1) {
        return;
      }
      pageNum--;
      queueRenderPage(pageNum);
    }
    
    /**
     *下一页
     */
    function onNextPage() {
      if (pageNum >= pdfDoc.numPages) {
        return;
      }
      pageNum++;
      queueRenderPage(pageNum);
    }

因做这个时,掉进过几个坑. pdfObject.js手机端不支持,pdf.js可以支持手机端与pc端

参考pdf.js原文:  
[https://blog.csdn.net/qq\_38584967/article/details/83784049][https_blog.csdn.net_qq_38584967_article_details_83784049]

[http_mozilla.github.io_pdf.js]: http://mozilla.github.io/pdf.js/
[https_blog.csdn.net_qq_38584967_article_details_83784049]: https://blog.csdn.net/qq_38584967/article/details/83784049

发表评论取消回复

表情：

评论列表（有 0 条评论，3490人围观）

还没有评论，来说两句吧...

相关阅读

相关 Winform中使用FastReport实现自定义PDF打印预览

场景 Winform中使用FastReport实现简单的自定义PDF导出： [https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI...

悠悠/ 2024年04月19日 10:49/ 0 赞/ 124 阅读

相关使用pdfobject预览pdf文件

1.页面代码，引入js文件，根据文件id加载pdf预览文件 <html xmlns="http://www.w3.org/1999/xhtml"> <head

冷不防/ 2023年10月05日 13:32/ 0 赞/ 40 阅读

相关若依后端实现pdfjs预览PDF文件

> PDF.js用于解析和呈现PDF 的通用、基于 Web 标准的平台。 > > 官网地址：[http://mozilla.github.io/pdf.js/][http_m

本是古典何须时尚/ 2023年09月30日 10:24/ 0 赞/ 46 阅读

相关微信小程序pdf预览功能实现（解决小程序下载pdf文件后缀为unknown导致不可预览问题多种方案）

描述因为项目是使用wepy框架开发的，所以语法上面如果大家是使用其它的方案要注意下，其实思路和核心代码大体上相同。、思路首先，做这个功能得知道，ios使用w

喜欢ヅ旅行/ 2023年07月09日 04:25/ 0 赞/ 46 阅读

相关使用pdf实现在线预览

1.安装引入 npm i vue-pdf import pdf from "vue-pdf"; components: {

ゝ一世哀愁。/ 2022年12月01日 03:41/ 0 赞/ 479 阅读

相关 PDF.js预览文件实现在线预览pdf文件

![20200825155556932.png][]首先下载源码。把他放在自己的文件里面。下载地址：[https://download.csdn.net/download/

川长思鸟来/ 2022年12月01日 01:26/ 0 赞/ 574 阅读

相关 springboot使用pdfjs预览office文件

由于springboot使用aspose预览office文件可以实现文件预览，但部分浏览器却不兼容，所以使用pdfjs预览office文件，兼容浏览器。在spr

以你之姓@/ 2022年10月05日 04:45/ 0 赞/ 373 阅读

相关【教程】PDF组件Spire.PDF 教程：在C＃中显示PDF文件的打印预览

本文演示如何使用[Spire.PDF][]和c＃在Windows窗体应用程序中显示PDF文件的打印预览。在使用下面的代码之前，我们需要创建一个Windows窗体应用程序，在

女爷i/ 2022年06月05日 11:52/ 0 赞/ 1461 阅读

相关文件上传下载PDF预览

1. 创建数据库 --创建文件对象表 CREATE TABLE sys_file ( id bigint NOT NULL identity(1,

不念不忘少年蓝@/ 2022年04月10日 08:47/ 0 赞/ 412 阅读

相关小程序中使用pdf.js自定义预览下载pdf文件(使用web-view组件)

小程序中预览下载PDF文件由于小程序是在手机端使用,微信小程序的api有时候不满足我们的需求. 所以就自己自定义实现一个下载预览PDF的功能 1.小程序端使用web

朴灿烈づ我的快乐病毒、/ 2022年02月28日 03:50/ 0 赞/ 3491 阅读