jquery中pdf在页面的显示和导出

avatar
作者
猴君
阅读量:4

jquery中pdf在页面的显示和导出

想要实现弹窗中显示pdf内容,并导出pdf.
在这里插入图片描述

01 显示pdf

第一,二个是通过pdf.js实现pdf在页面的显示,只不多第一个只显示一页,第二个可显示全部;第三个是通过jquery.media.js实现pdf在页面的显示
重点讲第二个!!

01 .pdf结尾在线接口显示到页面 (pdf.js库怎么安装及使用):只显示一页

参考:https://www.yisu.com/ask/45769732.html

这个只显示第一页,想要显示全部页面,需要循环加载

02 如何用PDF.JS显示整个PDF (而不仅仅是一页)?

PDFJS有一个成员变量numPages,所以你只需要遍历它们。

但是重要的是要记住,在pdf.js中获取页面是异步的,因此顺序将得不到保证。所以你需要用链子锁住它们。你可以这样做:

var currPage = 1; //Pages are 1-based not 0-based var numPages = 0; var thePDF = null;  //This is where you start PDFJS.getDocument(url).then(function(pdf) {          //Set PDFJS global object (so we can easily access in our page functions         thePDF = pdf;          //How many pages it has         numPages = pdf.numPages;          //Start with first page         pdf.getPage( 1 ).then( handlePages ); });    function handlePages(page) {     //This gives us the page's dimensions at full scale     var viewport = page.getViewport( 1 );      //We'll create a canvas for each page to draw it on     var canvas = document.createElement( "canvas" );     canvas.style.display = "block";     var context = canvas.getContext('2d');     canvas.height = viewport.height;     canvas.width = viewport.width;      //Draw it on the canvas     page.render({canvasContext: context, viewport: viewport});      //Add it to the web page     document.body.appendChild( canvas );      //Move to next page     currPage++;     if ( thePDF !== null && currPage <= numPages )     {         thePDF.getPage( currPage ).then( handlePages );     } } 

参考:https://cloud.tencent.com/developer/ask/sof/251356

03 jQuery实现在线预览PDF文件(通过a标签链接跳转):

参考:
https://blog.csdn.net/angellee1988/article/details/121644256

02 导出pdf

参考:
jquery页面:
https://blog.csdn.net/hnn567/article/details/132356614

微信小程序:
https://blog.csdn.net/hnn567/article/details/132304552

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!