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

小程序中预览下载PDF文件

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

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

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

2.在网页中添加pdf.js
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