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

news2024/11/26 16:45:06

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.coloradmin.cn/o/2233903.html

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

相关文章

Linux 练习三

1、建立用户组 shengcan&#xff0c;其id 为 2000 [rootlocalhost 桌面]# groupadd -g 2000 shengchan 2、建立用户组 caiwu&#xff0c;其id 为 2001 [rootlocalhost 桌面]# groupadd -g 2001 caiwu 3、建立用户组 jishu&#xff0c;其 id 为 2002 [rootlocalhost 桌面]#…

uniapp vue3 使用echarts-gl 绘画3d图表

我自己翻遍了网上&#xff0c;以及插件市场&#xff0c;其实并没有uniapp 上使用echarts-gl的样例&#xff0c;大多数都是使用插件市场的echarts的插件 开始自己尝试直接用echartsgl 没有成功&#xff0c;后来尝试使用threejs 但是也遇到一些问题&#xff0c;最后我看官网的时…

openGauss数据库-头歌实验1-4 数据库及表的创建

一、创建数据库 &#xff08;一&#xff09;任务描述 本关任务&#xff1a;创建指定数据库。 &#xff08;二&#xff09;相关知识 数据库其实就是可以存放大量数据的仓库&#xff0c;学习数据库我们就从创建一个数据库开始吧。 为了完成本关任务&#xff0c;你需要掌握&a…

Android TextView自动换行文本显示不全解决

某些情况下&#xff0c;TextView自动换行后&#xff0c;会出现每行结尾处显示不全的问题&#xff0c; 如图&#xff1a; 常见解决方案&#xff1a; 设置TextView的“ellipsize”属性为“end” 实测无效&#xff01;将TextView外部的Layout改为RelativeLayout 实测无效&…

华为 HarmonyOS NEXT 原生应用开发: 动画的基础使用(属性、显示、专场)动画

2024年11月5日 LiuJinTao 文章目录 鸿蒙中动画的使用一、属性动画 - animation属性动画代码示例 二、显示动画 - AnimateTo三、专场动画 鸿蒙中动画的使用 一、属性动画 - animation 属性动画代码示例 /*** 属性动画的演示*/ Entry Component struct Index {State selfWidth:…

信号与噪声分析——第三节:随机过程的统计特征

随机过程的定义&#xff1a; 随机过程是一种数学模型&#xff0c;用来描述系统或现象在时间或者空间上随之变化的不确定性。 一个随机过程的数字特征 1.数学期望&#xff08;统计平均值&#xff09;&#xff1a; 表示为 数学期望是随机过程在时间 t 上的平均值&#xff0c;通常…

Linux SSH免密登入以及配置脚本

一、ssh原理简单介绍 客户端生成一对公钥和私钥&#xff0c;并将自己的公钥发送到服务器上 其中公钥用来加密&#xff0c;私钥用来解密。 二、ssh免密登入实现步骤详解 我这就以服务器controller和客户端compute来做为例子 2.1、首先在controller上输入ssh-keygen -t rsa …

搜维尔科技:Manus VR数据手套-机器人手部数据采集,推动机器人技术新高度

人工智能机器人培训-构建集成 将实时数据直接传输到ROS并开始控制你的机器人。使用我们的 C Windows 和Linux SDK开发集成&#xff0c;以用于自定义管道。 原始数据&#xff1a;推动机器学习和机器人技术 以CSV格式记录并导出手指运动作为原始数据。为机器学习和机器人应用提…

将HTML项目上传至Gitee仓库(详细教程)

1.登录giett giett地址链接:Gitee - 基于 Git 的代码托管和研发协作平台 2.新建一个giett仓库 创建后得到远程仓库&#xff1a; 3、在本地项目文件夹右击鼠标点击 Open Git Bash Here 4、输入命令 命令:git init&#xff0c;这个目录变成git可以管理的仓库&#xff0c;会出…

重大917该如何复习?难度大不大?重点是啥?

C哥专业提供——计软考研院校选择分析专业课备考指南规划 重大917整体难度不高&#xff0c;认真研究好各年真题&#xff0c;经过系统扎实的复习&#xff0c;相信同学一定能取得好的成绩&#xff01; 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 重庆…

CentOS 7 安装 ntp,自动校准系统时间

1、安装 ntp yum install ntp 安装好后&#xff0c;ntp 会自动注册成为服务&#xff0c;服务名称为 ntpd 2、查看当前 ntpd 服务的状态 systemctl status ntpd 3、启动 ntpd 服务、查看 ntpd 服务的状态 systemctl start ntpdsystemctl status ntpd 4、设置 ntpd 服务开机启…

信息安全工程师(77)常见网络安全应急事件场景与处理流程

前言 网络安全应急事件场景多样&#xff0c;处理流程也需根据具体情况灵活调整。以下将详述几种常见的网络安全应急事件场景及其处理流程。 一、数据泄露事件 场景描述&#xff1a; 数据泄露是指敏感、受保护或机密数据被未经授权的个人复制、传输、查看、窃取或使用。这种事件…

使用Django REST framework构建RESTful API

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

【保姆级教程】使用 oh-my-posh 和 clink 打造个性化 PowerShell 和 CMD

内容预览 ≧∀≦ゞ 终端美化指南—— oh-my-posh 和 clink 篇引言一、准备工作默认终端&#xff1a;Windows Terminal离线安装步骤 包管理器&#xff1a;scoop为什么选择使用 Scoop 安装&#xff1f;scoop 安装 字体下载 二、配置 Windows Terminal三、配置 oh-my-posh安装激活…

「Mac畅玩鸿蒙与硬件17」鸿蒙UI组件篇7 - Animation 组件基础

在应用开发中&#xff0c;动画效果可以增强用户体验。鸿蒙框架提供了 translate、scale 和 rotate 等动画功能&#xff0c;允许对组件进行平移、缩放和旋转等操作。本篇将介绍 Animation 组件的基础知识和示例代码。 关键词 Animation 组件动画效果位置动画自动动画缩放动画 一…

编写第一个 Appium 测试脚本:从安装到运行!

前言 最近接到一个测试项目&#xff0c;简单描述一下&#xff0c;需求就是&#xff1a;一端发送指令&#xff0c;另一端接受指令并处理指令。大概看了看有上百条指令&#xff0c;点点点岂不是废了&#xff0c;而且后期迭代&#xff0c;每次都需要点点点&#xff0c;想想就头大…

vue 使用docx-preview 预览替换文档内的特定变量

在开发合同管理中&#xff0c;需要使用到此功能&#xff0c;就是替换合同模板内的一些字符串&#xff0c;如&#xff1a;甲乙方名称&#xff0c;金额日期等&#xff0c;合同内容不变。效果如下&#xff1a; 使用docx-preview 好处是只预览不可编辑内容。 前端vue import { re…

部署istio应用未能产生Envoy sidecar代理

1. 问题描述及原因分析 在部署Prometheus、Grafana、Zipkin、Kiali监控度量Istio的第2.2章节&#xff0c;部署nginx应用&#xff0c;创建的pod并没有产生Envoy sidecar代理&#xff0c;仅有一个应用容器运行中 故在随后的prometheus中也没有产生指标istio_requests_total。通…

搭建你的私人云盘:使用File Browser与cpolar实现公网传输文件

文章目录 前言1.下载安装File Browser2.启动访问File Browser3.安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4.固定公网地址访问 前言 File Browser是一个开源的文件管理器和文件共享工具&#xff0c;它可以帮助用户轻…

NRF52832学习笔记(41)——添加串口库libuarte

一、背景 由于板子上不支持硬件流控&#xff0c;在使用 app_uart_fifo 库接收串口大数据时&#xff0c;频繁报 APP_UART_COMMUNICATION_ERROR 错误&#xff0c;多次重新初始化后&#xff0c;串口也不再产生中断了。查看官方论坛后决定使用串口异步库 libuarte。 二、简介 Li…