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

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

  • 01 显示pdf
    • 01 .pdf结尾在线接口显示到页面 (pdf.js库怎么安装及使用):只显示一页
    • 02 如何用PDF.JS显示整个PDF (而不仅仅是一页)?
    • 03 jQuery实现在线预览PDF文件(通过a标签链接跳转):
  • 02 导出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 functionsthePDF = pdf;//How many pages it hasnumPages = pdf.numPages;//Start with first pagepdf.getPage( 1 ).then( handlePages );
});function handlePages(page)
{//This gives us the page's dimensions at full scalevar viewport = page.getViewport( 1 );//We'll create a canvas for each page to draw it onvar 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 canvaspage.render({canvasContext: context, viewport: viewport});//Add it to the web pagedocument.body.appendChild( canvas );//Move to next pagecurrPage++;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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/47574.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RocketMq源码解析十二:消息消费负载

RocketMQ消息队列重新分配是由RebalancService线程来实现,一个MQClientinstance持有一个RebalanceService的实现,并随着MQClientInstance的启动而启动。我们看下下面的代码 位置:MQClientInstance:start方法 public void start() throws MQClientException {synchronized (…

‍我想我大抵是疯了,我喜欢上了写单元测试

前言 大家好我是聪。相信有不少的小伙伴喜欢写代码&#xff0c;但是对于单元测试这些反而觉得多此一举&#xff0c;想着我都在接口文档测过了&#xff01;还要写什么单元测试&#xff01;写不了一点&#xff01;&#xff01; 由于本人也是一个小小程序猿&#x1f649;&#xf…

关于HDFS、Hive和Iceberg

HDFS & Hive 如果我们将Hive比喻为储藏室&#xff0c;那么HDFS&#xff08;Hadoop Distributed File System&#xff09;就可以比作是储藏室所在的建筑物的地基和结构。 HDFS是一个分布式文件系统&#xff0c;它的设计目标是存储和管理海量数据。在我们的类比中&#xff…

华为云SQLServer 慢日志查看

作者&#xff1a;梦莱 1、背景 华为云目前只支持 SQLServer 登录数据库&#xff0c;不支持查看慢日志。对于开启慢日志的实例&#xff0c;也只能通过将慢日志下载到本地 再远程连接目标实例数据库查看。本篇将华为云 SQLServer 实例出现资源异常&#xff0c;排查问题的方案整…

QT5_C++基础

1. 什么是类和对象 C的类是一种构造类型&#xff0c;与C语言的结构体类似&#xff0c;但是进行了一些拓展&#xff0c;类的成员不但可以是变量&#xff0c;还可以是函数&#xff1b;通过类定义出来的变量也有特定的称呼&#xff0c;叫做“对象”类是创建对象的模板&#xff0c…

【java】力扣 合法分割的最小下标

文章目录 题目链接题目描述思路代码 题目链接 2780.合法分割的最小下标 题目描述 思路 这道题是摩尔算法的一种扩展 我们先可以找到候选人出来&#xff0c;然后去计算他在左右两边元素出现的次数&#xff0c;只有当他左边时&#xff0c;左边出现的次数2 >左边的长度&…

【 LCD1602显示屏】使用STC89C51控制1602显示、读写操作时序

文章目录 LCD1602显示概述&#xff1a;引脚说明控制指令接线 控制思路步骤 代码示例总结对databuffer dataShow;的理解 LCD1602显示 概述&#xff1a; LCD1602&#xff08;Liquid Crystal Display&#xff09;是一种工业字符型液晶&#xff0c;能够同时显示 1602 即 32 字符…

Android Studio的xml文件的layout布局,在添加属性的过程中,没有自动补全代码问题的解决方案

在build.gradle文件中&#xff0c;把compileSdkVersion和targetSdkVersion两个参数改成32就好了。 参考&#xff1a;关于Android Studio的xml文件的layout布局&#xff0c;在添加属性的过程中&#xff0c;不显示提示词&#xff08;没有自动补全代码&#xff09;的问题的解决方…

SpringBoot增加网关服务

一、新建gateway项目 二、添加依赖 dependencies {implementation org.springframework.cloud:spring-cloud-starter-gateway:4.0.0 } 三、增加路由规则配置 一个web服务、一个service服务 bootstrap.yaml&#xff1a; server:port: 80 spring:application:name: gatewayc…

子树的重心

描述 输入一棵树,判断每一棵子树的重心是哪一个节点。 输入描述 第一行输入n,q。n表示树的节点个数&#xff0c;q表示询问次数 第二行n-1个数&#xff0c;分别表示从节点2开始&#xff0c;各节点的父亲节点。 后面q行&#xff0c;每行一个数x&#xff0c;表示询问当前以x为根…

【STM32 HAL库】I2S的使用

使用CubeIDE实现I2S发数据 1、配置I2S 我们的有效数据是32位的&#xff0c;使用飞利浦格式。 2、配置DMA **这里需要注意&#xff1a;**i2s的DR寄存器是16位的&#xff0c;如果需要发送32位的数据&#xff0c;是需要写两次DR寄存器的&#xff0c;所以DMA的外设数据宽度设置16…

入门C语言只需一个星期(星期二)

点击上方"蓝字"关注我们 01、算术运算符 int myNum = 100 + 50;int sum1 = 100 + 50; // 150 (100 + 50)int sum2 = sum1 + 250; // 400 (150 + 250)int sum3 = sum2 + sum2; // 800 (400 + 400) + 加 将两个值相加 x + y - 减 从另一个值中减去一个值 …

探索Python自然语言处理的新篇章:jionlp库介绍

探索Python自然语言处理的新篇章&#xff1a;jionlp库介绍 1. 背景&#xff1a;为什么选择jionlp&#xff1f; 在Python的生态中&#xff0c;自然语言处理&#xff08;NLP&#xff09;是一个活跃且不断发展的领域。jionlp是一个专注于中文自然语言处理的库&#xff0c;它提供了…

Ubuntu 安装 XRDP,替代系统自带RDP远程桌面

起因&#xff0c;Ubuntu的自带RDP远程桌面很好用&#xff0c;但很傻卵&#xff0c;必须登录。 而设置了自动登录也不能解开KEYRING&#xff0c;必须必须必须用GUI手动登录。 &#xff08;我远程我用头给你坐机子面前开显示器先登录&#xff1f;&#xff1f;&#xff09; 比起VN…

【HarmonyOS】HarmonyOS NEXT学习日记:三、初识ArkUI

【HarmonyOS】HarmonyOS NEXT学习日记&#xff1a;三、初识ArkUI 忘掉HTML和CSS&#xff0c;ArkUI里构建页面的最小单位就是 “组件”&#xff0c;所以今天的目标就是认识一些常用的基础组件&#xff0c;以及他们的用法&#xff0c;对ArkUI形成一个基本认识。 基本组成 了解…

重塑七星拼团模式:共创互赢新生态

在当今商业模式的洪流中&#xff0c;七星拼团模式凭借其创新的激励机制与深植的互助文化&#xff0c;独树一帜&#xff0c;成为了推动市场活跃与消费者参与的新引擎。本文将重新构思并阐述该模式的三大支柱——直推奖赏、滑落回馈与循环成就奖&#xff0c;同时深入探讨其互助逻…

获取不重复流水号(java)

一&#xff1a;概述 很多业务场景都需要获取不重复的业务流水号&#xff0c;当微服务项目或服务多节点部署时&#xff0c;获取流水号场景使用分布式锁性能低下&#xff0c;可以基于数据库行锁实现获取不重复流水号。 二&#xff1a;创建流水号数据库 CREATE TABLE serial (i…

(error) MOVED 12706 192.168.187.139:6379

Redis操作set、get等操作出现如下错误 (error) MOVED 12706 192.168.187.139:6379 这种情况一般是因为启动 redis-cli 时没有设置集群模式所导致&#xff1b; 在开启集群后&#xff0c;redis-cli用普通用户登录无法操作集群中的数据&#xff0c;需要加上-c 用集群模式登录才可…

网络故障处理及分析工具:Wireshark和Tcpdump集成

Wireshark 是一款免费的开源数据包嗅探器和网络协议分析器&#xff0c;已成为网络故障排除、分析和安全&#xff08;双向&#xff09;中不可或缺的工具。 本文深入探讨了充分利用 Wireshark 的功能、用途和实用技巧。 无论您是开发人员、安全专家&#xff0c;还是只是对网络操…

k8s集群 安装配置 Prometheus+grafana

k8s集群 安装配置 Prometheusgrafana k8s环境如下&#xff1a;机器规划&#xff1a; node-exporter组件安装和配置安装node-exporter通过node-exporter采集数据显示192.168.40.180主机cpu的使用情况显示192.168.40.180主机负载使用情况 Prometheus server安装和配置创建sa账号&…