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

相关推荐

  1. python】jupyter notebook导出pdfpdf显示中文问题

    2024-07-18 05:44:03       41 阅读
  2. jquery将网页html文档导出pdf图片

    2024-07-18 05:44:03       36 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-18 05:44:03       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-18 05:44:03       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-18 05:44:03       58 阅读
  4. Python语言-面向对象

    2024-07-18 05:44:03       69 阅读

热门阅读

  1. 基于 Vue 3 和 Element Plus 构建图书管理系统

    2024-07-18 05:44:03       25 阅读
  2. Android中Context概述

    2024-07-18 05:44:03       20 阅读
  3. 数据库管理-第221期 Oracle的高可用-04(20240717)

    2024-07-18 05:44:03       21 阅读
  4. 构建自动化:在Gradle中配置项目变量

    2024-07-18 05:44:03       22 阅读
  5. PL/SQL oracle上多表关联的一些记录

    2024-07-18 05:44:03       24 阅读
  6. vb6读取mysql,用odbc mysql 5.3版本驱动

    2024-07-18 05:44:03       19 阅读
  7. 在Spring Boot 中使用Kafka

    2024-07-18 05:44:03       23 阅读
  8. 响应式编程:Project Reactor与WebFlux

    2024-07-18 05:44:03       20 阅读
  9. Django+vue自动化测试平台(28)-- ADB获取设备信息

    2024-07-18 05:44:03       23 阅读
  10. 2024牛客暑期多校训练营1 I.Mirror Maze(题解)

    2024-07-18 05:44:03       21 阅读