js中怎么把excel和pdf文件转换成图片打包下载

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文件转图片工具</title><!-- 本地引入 --><!-- <script src="js/xlsx.full.min.js"></script><script src="js/html2canvas.min.js"></script><script src="js/jszip.min.js"></script><script src="js/pdf.js"></script><script src="js/pdf.worker.js"></script> --><!-- cdn引入 --><script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
</head><body><input type="file" id="fileInput" accept=".xlsx,.xls,.pdf"><button id="excel-download" onclick="downloadexcel()" style="display:none;">excel转换并下载</button><button id="zip-download" style="display:none;" onClick="downloadPdf()">pdf转换并下载</button><div id="excelContent" class="camvasClass"></div><div id="image-container"></div><script>let SheetNamesList = [];let fileName = '';let zip = new JSZip();let file = {};// excel转图片document.getElementById('fileInput').addEventListener('change', function (event) {file = event.target.files[0];fileName = file.name.split('.')[0];if (!file || file.type !== 'application/pdf') {renderExcel()} else {renderPdf()}});// excel转图片并打包为zip  function renderExcel() {  const reader = new FileReader();  reader.onload = function (e) {  const data = new Uint8Array(e.target.result);  const workbook = XLSX.read(data, { type: 'array' });  SheetNamesList = workbook.SheetNames;  const zip = new JSZip(); // 初始化JSZip实例  SheetNamesList.forEach((sheetName, index) => {  const worksheet = workbook.Sheets[sheetName];  const html = XLSX.utils.sheet_to_html(worksheet);  const divDom = document.createElement('div');  divDom.id = 'sheetDiv' + index;  divDom.innerHTML = html;  document.getElementById('excelContent').appendChild(divDom);  // 使用html2canvas将div转换为图片,并添加到zip中  html2canvas(divDom).then(async canvas => {  const imgDataUrl = canvas.toDataURL('image/png');  const imgBlob = (await (await fetch(imgDataUrl)).blob());  zip.file(sheetName + '.png', imgBlob);  // 检查是否所有图片都已处理完毕  if (index === SheetNamesList.length - 1) {  // 所有图片都已处理完毕,生成并下载zip文件  zip.generateAsync({ type: 'blob' }).then(blob => {  const url = URL.createObjectURL(blob);  const a = document.createElement('a');  a.href = url;  a.download = fileName + '.zip';  document.body.appendChild(a);  a.click();  document.body.removeChild(a);  URL.revokeObjectURL(url);  });  }  });  });  };  reader.readAsArrayBuffer(file);  }// pdf转图片function renderPdf() {const reader = new FileReader();reader.onload = async function (e) {const arrayBuffer = e.target.result;const uint8Array = new Uint8Array(arrayBuffer);const pdf = await pdfjsLib.getDocument({ data: uint8Array }).promise;const numPages = pdf.numPages;const imageContainer = document.getElementById('image-container');const zipDownloadButton = document.getElementById('zip-download');const promises = [];for (let pageNumber = 1; pageNumber <= numPages; pageNumber++) {promises.push(new Promise(async (resolve, reject) => {try {const page = await pdf.getPage(pageNumber);const viewport = page.getViewport({ scale: 1.5 });const canvas = document.createElement('canvas');const context = canvas.getContext('2d');canvas.width = viewport.width;canvas.height = viewport.height;await page.render({ canvasContext: context, viewport }).promise;// 将canvas内容转换为DataURL  const imgDataUrl = canvas.toDataURL('image/png');// const img = document.createElement('img')// img.src = imgDataUrl// imageContainer.appendChild(img)// 创建一个Blob对象  const imgBlob = await (await fetch(imgDataUrl)).blob();// 将Blob对象添加到ZIP中  zip.file(`${fileName}_page_${pageNumber}.png`, imgBlob);// 可选:显示图片和下载链接(这里不再需要,因为只是为了生成ZIP)  // ... (省略显示图片和创建下载链接的代码)  resolve();} catch (error) {reject(error);}}));}try {// 等待所有页面都处理完毕  await Promise.all(promises);// 显示下载ZIP按钮(如果需要的话,这里可以省略,因为已经下载了)  zipDownloadButton.style.display = 'inline-block';} catch (error) {console.error('Error generating ZIP:', error);}};reader.readAsArrayBuffer(file); // 读取文件为ArrayBuffer  }async function downloadPdf() {// 生成ZIP文件并触发下载  const zipBlob = await zip.generateAsync({ type: 'blob' });const zipUrl = URL.createObjectURL(zipBlob);const a = document.createElement('a');a.href = zipUrl;a.download = fileName+'.zip';document.body.appendChild(a);a.click();document.body.removeChild(a);// 清理  URL.revokeObjectURL(zipUrl);}</script><style>#excelContent {padding: 20px;}.pb20 {padding-bottom: 40px;}</style>
</body></html>

2.效果

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

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

相关文章

【Java】异常处理见解,了解,进阶到熟练掌握

各位看官早安午安晚安呀 如果您觉得这篇文章对您有帮助的话 欢迎您一键三连&#xff0c;小编尽全力做到更好 欢迎您分享给更多人哦 大家好我们今天来学习Java面向对象的的抽象类和接口&#xff0c;我们大家庭已经来啦~ 目录 1.(throws和throw&#xff09;我们不管这个异常&…

【MySQL】——数据库恢复技术

&#x1f4bb;博主现有专栏&#xff1a; C51单片机&#xff08;STC89C516&#xff09;&#xff0c;c语言&#xff0c;c&#xff0c;离散数学&#xff0c;算法设计与分析&#xff0c;数据结构&#xff0c;Python&#xff0c;Java基础&#xff0c;MySQL&#xff0c;linux&#xf…

使用Django REST framework构建RESTful API

使用Django REST framework构建RESTful API Django REST framework简介 安装Django REST framework 创建Django项目 创建Django应用 配置Django项目 创建模型 迁移数据库 创建序列化器 创建视图 配置URL 配置全局URL 配置认证和权限 测试API 使用Postman测试API 分页 过滤和排序…

Straightforward Layer-wise Pruning for More Efficient Visual Adaptation

对于模型中冗余的参数&#xff0c;一个常见的方法是通过结构化剪枝方法减少参数容量。例如&#xff0c;基于幅度值和基于梯度的剪枝方法。尽管这些方法在传统训练上通用性&#xff0c;本文关注的PETL迁移有两个不可避免的问题&#xff1a; 显著增加了模型存储负担。由于不同的…

微服务架构面试内容整理-服务拆分的原则

服务拆分是微服务架构设计的关键步骤,以下是一些常见的拆分原则: 1. 单一职责原则 每个微服务应只负责一项特定的业务功能或领域,确保服务的简单性和易于理解。 2. 业务能力驱动 根据业务能力或功能进行拆分,确保每个服务能够独立实现特定的业务价值。<

022集——统计多条线的总长度(CAD—C#二次开发入门)

如下图所示&#xff0c;选择多条线并统计长度&#xff1a; c#中不包含直接获取curve曲线长度 属性&#xff0c;需用如下方法&#xff1a;curve.GetDistanceAtParameter(item.EndParam) 附部分代码如下&#xff1a; using Autodesk.AutoCAD.ApplicationServices; using Autode…

W5100S-EVB-Pico2评估板介绍

目录 1 简介 2 硬件资源 2.1 硬件规格 2.2 引脚定义 2.3 工作条件 3 参考资料 3.1 RP2350数据手册 3.2 W5100S数据手册 3.3 原理图 原理图 & 物料清单 & Gerber 文件 3.4 尺寸图&#xff08;单位&#xff1a;mm&#xff09; 3.5 参考例程 认证 CE FCC …

【Python】自然语言处理神器:NLTK库初探与文本处理案例

自然语言处理神器&#xff1a;NLTK库初探与文本处理案例 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;Python 的 NLTK&#xff08;Natural Language Toolkit&#xff0c;自然语言工具包&#xff09;被广泛认为是入门级和应用级的强大工具之一。无论是处理文本、…

从放弃985计科保研到秋招进大厂,我是怎么做的?【秋招经验分享】

从放弃985计科保研到秋招进大厂&#xff0c;我是怎么做的 先来介绍一下我自己&#xff0c;bg为985计算机本科&#xff0c;我在放弃了计科保研以后&#xff0c;成功拿到了美团等大厂研发岗的offer。目前秋招已经接近尾声了&#xff0c;我想记录一下这段时间的秋招感悟和经验&…

STM32F103C8T6学习笔记4--模拟旋转编码器的按键中断

1、实验内容 通过旋转编码器正反转来计数&#xff0c;由对应的GPIO产生中断。但是我在Proteus里面没有找到相关的EC11旋转编码器元件&#xff0c;暂时通过电路模拟的方式实现。 S1按下引脚PB0产生低电平信号&#xff0c;触发中断&#xff0c;计数值减一。 S2按下引脚PB1产生低…

宝顶白芽,慢生活的味觉盛宴

在快节奏的生活中&#xff0c;人们愈发向往那种悠然自得、返璞归真的生活方式。白茶&#xff0c;以其独特的韵味和清雅的风格&#xff0c;成为了现代人追求心灵宁静与生活品质的象征。而在众多白茶之中&#xff0c;竹叶青茶业出品的宝顶白芽以其甘甜醇爽的特质&#xff0c;成为…

23.智能停车计费系统(基于springboot和vue的Java项目)

目录 1.系统的受众说明 2 相关概念和技术介绍 2.1 JAVA技术介绍 2.2 SpringBoot框架 2.3B/S架构 2.4 MySQL数据库 3 系统需求分析 3.1 问题定义 3.2 可行性分析 3.3系统用例分析 3.4 系统流程分析 3.4.1 登录流程 3.4.2 添加信息流程 3.4.3 删除信息流程 4…

C语言学习,标准库<locale.h>

<locale.h> 是 C 标准库中的一个头文件&#xff0c; 提供了本地化&#xff08;Localization&#xff09;和国际化&#xff08;Internationalization&#xff09;的支持。它提供了一组函数和宏来设置或查询程序的本地化信息&#xff0c;例如日期、时间、货币、数字格式等。…

Chrome 130 版本开发者工具(DevTools)更新内容

Chrome 130 版本开发者工具&#xff08;DevTools&#xff09;更新内容 一、网络&#xff08;Network&#xff09;面板更新 1. 重新定义网络过滤器 网络面板获新增了一些过滤条件&#xff0c;这些过滤条件是根据反馈重新设计的&#xff0c;特定于类型的过滤条件保持不变&…

清华双臂机器人扩散大模型RDT:先预训练后微调,支持语言、图像、动作多种输入(1B参数)

前言 通过上文介绍的GR2&#xff0c;我们看到了视频生成模型在机器人训练中的应用 无独有偶&#xff0c;和GR2差不多一个时期出来的清华RDT&#xff0c;其模型架构便基于视频生成架构DiT改造而成(当然&#xff0c;该清华团队其实也在DiT之前推出了U-ViT&#xff0c;具体下文会…

leetcode动态规划(二十六)-最长重复子数组

题目 718.最长重复子数组 给两个整数数组 nums1 和 nums2 &#xff0c;返回 两个数组中 公共的 、长度最长的子数组的长度 。 示例 1&#xff1a; 输入&#xff1a;nums1 [1,2,3,2,1], nums2 [3,2,1,4,7] 输出&#xff1a;3 解释&#xff1a;长度最长的公共子数组是 [3,2,…

万彪离职,荣耀CEO赵明豪赌AI手机胜算几何?

"荣耀新的远方在哪里&#xff1f;" 作者 | 米 卢 编辑 | 卢旭成 10月30日晚&#xff0c;荣耀在深圳国际会展中心发布了AI旗舰手机mogic7系列&#xff0c;这意味着终于能真正独立操盘荣耀的CEO赵明&#xff0c;开始压上全部身家&#xff0c;豪赌AI手机。 赵明说&…

SpringBoot在线教育系统:集成第三方服务

5系统详细实现 5.1 普通管理员管理 管理员可以对普通管理员账号信息进行添加修改删除操作。具体界面的展示如图5.1所示。 图5.1 普通管理员管理界面 5.2 课程管理员管理 管理员可以对课程管理员进行添加修改删除操作。具体界面如图5.2所示。 图5.2 课程管理员管理界面 5.3 …

uni-app - - - - - 钉钉小程序 uni.showToast回调函数不执行问题(PC端钉钉小程序 接口API回调函数不执行)

uni-app - - - - - 钉钉小程序 uni.showToast回调函数不执行问题 1. 问题描述2. 解决办法 使用钉钉提供的api 1. 问题描述 使用uni-app开发小程序&#xff0c;移动端钉钉小程序使用没问题&#xff0c;但是在PC端钉钉小程序却发现一些逻辑没有执行。经过后端接口日志查询&#…

六、Go语言快速入门之数组和切片

文章目录 数组和切片数组:one: 数组初始化:two: 数组的遍历:three: 多维数组:four: 将数组传递给函数 切片(Slice):one: 切片的初始化:star: new和make区别 :two: 切片的使用:three: 将切片传递给函数:four: 多维切片:four: Bytes包:four: 切片和垃圾回收 &#x1f4c5; 2024年…