小程序中预览下载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" /canvasdiv style="text-align: center"button id="prev" onclick="onPrevPage()"上一页/buttonspan span id="page_num"/span / span id="page_count"/span/spanbutton 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