E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

小程序中预览下载PDF文件由于小程序是在手机端使用,微信小程序的api有时候不满足我们的需求. 所以就自己自定义实现一个下载预览PDF的功能1.小程序端使用web-view组件,在其中打开一个网页,在网页中实现我们需要的功能web-view src=”{{url}}”/web-view其中url就是打开我们网页的地址2.在网页中添加pdf.jsjs下载地址:http://mozilla.github.io/pdf.js/这里只用到下载文件中的两个js:pdf.js 和 pdf.worker.js在H5中添加js文件script type=”text/javascript” src=”/pdf.js”/scriptbody位置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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序中使用pdf.js自定义预览下载pdf文件(使用webview组件)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏