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.rhkb.cn/news/464741.html

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

相关文章

盘点 2024 十大免费/开源 WAF

WAF 是 Web Application Firewall 的缩写&#xff0c;也被称为 Web 应用防火墙。区别于传统防火墙&#xff0c;WAF 工作在应用层&#xff0c;对基于 HTTP/HTTPS 协议的 Web 系统有着更好的防护效果&#xff0c;使其免于受到黑客的攻击。 近几年经济增速开始放缓&#xff0c;科…

蓝牙资讯|苹果AirPods Pro 2推出听力测试、助听器和听力保护等功能

苹果推送iOS 18.1 系统版本更新&#xff0c;AirPods Pro 2 用户也在 iOS 18.1 中获得了强大的新功能。 运行固件 7B19 的 AirPods Pro 2 用户&#xff0c;搭配 iOS 18.1 系统的 iPhone&#xff0c;将获得三项强大的听力健康功能&#xff1a;听力测试、助听器和听力保护。 听力…

如何检查雷池社区版 WAF 是否安装成功?

容器运行状态检查&#xff1a; 使用命令行检查&#xff1a;打开终端&#xff0c;连接到安装雷池的服务器。运行 docker ps 命令&#xff0c;查看是否有与雷池相关的容器正在运行。 如果能看到类似 safeline-mgt、safeline-tengine 等相关容器&#xff0c;并且状态为 Up&#x…

【AI开源项目】Botpress - 开源智能聊天机器人平台及其部署方案

文章目录 Botpress 概述Botpress 的定位 Botpress 的主要特点1. OpenAI 集成2. 易于使用3. 定制和扩展性4. 多平台支持5. 集成和扩展 API6. 活跃的社区和详尽的文档 部署方案集成集成开发集成部署机器人示例开发工具代理本地开发先决条件从源代码构建 Botpress 如何解决常见问题…

Rust 力扣 - 1652. 拆炸弹

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们只需要遍历长度长度为k的窗口&#xff0c;然后把窗口内数字之和填充到结果数组中的对应位置即可 题解代码 impl Solution {pub fn decrypt(code: Vec<i32>, k: i32) -> Vec<i32> {let n c…

HTMLCSS:打造酷炫下载安装模拟按钮

效果演示 这段代码通过HTML和CSS创建了一个具有交互效果的下载按钮&#xff0c;当复选框被选中时&#xff0c;会触发一系列动画和样式变化&#xff0c;模拟了一个下载和安装的过程&#xff0c;包括圆形的动画、文本的显示和隐藏等。 HTML <div class"container&quo…

【C++、数据结构】哈希表——散列表(一)(概念/总结)

「前言」 &#x1f308;个人主页&#xff1a; 代码探秘者 &#x1f308;C语言专栏&#xff1a;C语言 &#x1f308;C专栏&#xff1a; C / STL使用以及模拟实现 &#x1f308;数据结构专栏&#xff1a; 数据结构 / 十大排序算法 &#x1f308;Linux专栏&#xff1a; Linux系统编…

WindowsDocker安装到D盘,C盘太占用空间了。

Windows安装 Docker Desktop的时候,默认位置是安装在C盘,使用Docker下载的镜像文件也是保存在C盘,如果对Docker使用评率比较高的小伙伴,可能C盘空间,会被耗尽,有没有一种办法可以将Docker安装到其它磁盘,同时Docker的数据文件也保存在其他磁盘呢? 答案是有的,我们可以…

mac|安装redis及RedisDesk可视化软件

一、安装 通过Homebrew安装 brew install redis 在安装过程可以得到以下信息&#xff1a; 1、启动redis或重新登陆redis brew services start redis 如果只想在前端运行&#xff0c;而不是在后端&#xff0c;则使用以下命令 /opt/homebrew/opt/redis/bin/redis-server /opt…

程序中怎样用最简单方法实现写excel文档

很多开发语言都能找到excel文档读写的库&#xff0c;但是在资源极其受限的环境下开发&#xff0c;引入这些库会带来兼容性问题。因为一个小功能引入一堆库&#xff0c;我始终觉得划不来。看到有项目引用的jar包有一百多个&#xff0c;看着头麻&#xff0c;根本搞不清谁依赖谁。…

重读《人月神话》(12)-未雨绸缪(Plan to Throw One Away)

对程序员而言&#xff0c;一个不容忽视的事实是&#xff1a;任何系统都将经历变更&#xff0c;最初精心设计的软件也可能因不断的修补而变得面目全非。无论设计多么完美&#xff0c;随着时间推移&#xff0c;系统难免陷入混乱&#xff0c;只是程度和速度有所不同。因此&#xf…

(附项目源码)python开发语言,基于python Web的高校毕业论文管理系统 51,计算机毕设程序开发+文案(LW+PPT)

摘 要 随着信息化技术的迅速发展&#xff0c;人类信息化文明的到来&#xff0c;为人类的日常生活以及日常生产活动提供了非常大的便利&#xff0c;有效地解决了很多曾经无法解决的问题。本次基于python Web的高校毕业论文管理系统的开发是针对我国传统的高校毕业论文管理模式沟…

计算机网络:网络层 —— 网络地址转换 NAT

文章目录 网络地址转换 NAT 概述最基本的 NAT 方法NAT 转换表的作用 网络地址与端口号转换 NAPTNAT 和 NAPT 的缺陷 网络地址转换 NAT 概述 尽管因特网采用了无分类编址方法来减缓 IPv4 地址空间耗尽的速度&#xff0c;但由于因特网用户数量的急剧增长&#xff0c;特别是大量小…

C++进阶:unordered_map和unordered_set的使用

目录 一.unordered_set系列 1.1unordered_set类的介绍 1.2unordered_set与set的差异 二.unordered_map的系列 三.unordered_multimap/unordered_multiset 一.unordered_set系列 1.1unordered_set类的介绍 • unordered_set的声明如下&#xff0c;Key就是unordered_set底层…

【6G 需求与定义】ITU(国际电联)对全球6G标准的愿景

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G技术研究。 博客内容主要围绕…

java:题目:用Java实现简单的自取取款操作

import java.util.Scanner; public class ATM {public static void main(String[] args){//自主取款主类Scanner scnew Scanner(System.in);System.out.println("请输入账户号码&#xff1a;");String BankAccoutsrsc.nextLine();/BankAccout3 newBankAccoutnew Bank…

Windows 部署非安装版Redis

1.下载Redis https://github.com/microsoftarchive/redis/releases 选择下载zip包&#xff0c;如Redis-x64-3.0.504.zip&#xff0c;并解压 2.启动非安装版redis服务 进入到redis目录&#xff0c;打开cmd 执行命令 redis-server.exe redis.windows.conf 3.登录redis客户端…

【连续多届检索,ACM出版】第四届大数据、人工智能与风险管理国际学术会议 (ICBAR 2024,11月15-17)--冬季主会场

第四届大数据、人工智能与风险管理国际学术会议 (ICBAR 2024)--冬季主会场 2024 4th International Conference on Big Data, Artificial Intelligence and Risk Management 会议官网&#xff1a;www.icbar.net 2024 4th International Conference on Big Data, Artificial I…

HTML 基础概念:什么是 HTML ? HTML 的构成 与 HTML 基本文档结构

文章目录 什么是 HTML &#xff1f;HTML 的构成 &#xff1f;什么是 HTML 元素&#xff1f;HTML 元素的组成部分HTML 元素的特点 HTML 基本文档结构如何打开新建的 HTML 文件代码查看 什么是 HTML &#xff1f; HTML&#xff08;超文本标记语言&#xff0c;HyperText Markup L…