阅读量: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