如何用JavaScript解析和生成Excel或PDF文件?

JavaScript可通过SheetJS解析生成Excel、用jsPDF生成PDF。①SheetJS支持读写.xlsx文件,可将JSON转为表格并导出;②jsPDF结合html2canvas能将HTML内容转为PDF,适用于前端导出页面内容;③复杂文件建议在Node.js处理以避免阻塞界面。

如何用javascript解析和生成excel或pdf文件?

JavaScript可以在浏览器和Node.js环境中解析和生成Excel或PDF文件,主要依赖第三方库来实现。以下是具体方法和常用工具。

解析和生成Excel文件

在JavaScript中处理Excel文件(如.xlsx)最常用的库是 SheetJS (xlsx),它支持读取、修改和创建电子表格。

● 安装SheetJS:

在项目中通过npm安装:

立即学习“Java免费学习笔记(深入)”;

npm install xlsx

● 解析Excel文件:

读取用户上传的Excel文件并提取数据:

const XLSX = require(‘xlsx’);
const workbook = XLSX.readFile(‘example.xlsx’);
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
const data = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
console.log(data);

● 生成Excel文件:

从JSON数据创建新的Excel文件:

const newData = [
  [‘姓名’, ‘年龄’, ‘城市’],
  [‘张三’, 25, ‘北京’],
  [‘李四’, 30, ‘上海’]
];
const ws = XLSX.utils.aoa_to_sheet(newData);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, ‘数据表’);
XLSX.writeFile(wb, ‘输出.xlsx’);

生成PDF文件

生成PDF常用的是 jsPDF 库,它可以结合 html2canvas 将HTML内容转为PDF。

● 安装jsPDF和html2canvas:

npm install jspdf html2canvas

● 基本PDF生成:

创建一个简单的PDF文档:

import { jsPDF } from ‘jspdf’;
const doc = new jsPDF();
doc.text(‘Hello World’, 10, 10);
doc.save(‘document.pdf’);

● 将HTML内容导出为PDF:

适合导出页面中的某个div为PDF:

import html2canvas from ‘html2canvas’;
import { jsPDF } from ‘jspdf’;

const element = document.getElementById(‘content-to-export’);
html2canvas(element).then(canvas => {
  const imgData = canvas.toDataURL(‘image/png’);
  const pdf = new jsPDF(‘p’, ‘mm’, ‘a4’);
  const imgWidth = 190;
  const pageHeight = 297;
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  let heightLeft = imgHeight;
  let position = 10;

  pdf.addImage(imgData, ‘PNG’, 10, position, imgWidth, imgHeight);
  heightLeft -= pageHeight – 20;

  while (heightLeft > 0) {
    position = heightLeft – imgHeight + 10;
    pdf.addPage();
    pdf.addImage(imgData, ‘PNG’, 10, position, imgWidth, imgHeight);
    heightLeft -= pageHeight – 20;
  }
  pdf.save(‘exported-content.pdf’);
});

注意事项

● SheetJS 主要支持 .xlsx 格式,对复杂公式或宏支持有限。
● jsPDF 适合生成简单布局的PDF,复杂排版建议使用服务端生成或专用工具。
● 在浏览器中处理文件时注意跨域和权限问题。
● 大文件操作建议在Node.js后端进行,避免阻塞前端界面。

基本上就这些。用好SheetJS和jsPDF,大多数前端场景下的Excel和PDF需求都能满足。

以上就是如何用JavaScript解析和生成Excel或PDF文件?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1527135.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
JavaScript中的垃圾回收机制是如何工作的,有哪些性能优化点?
上一篇 2025年12月20日 19:09:50
在 JavaScript 中,如何模拟其他语言中的“宏”功能来进行代码转换?
下一篇 2025年12月20日 19:10:05

相关推荐

  • 美图秀秀导出视频卡住 美图视频保存失败修复方案

    导出视频卡住或保存失败,通常和设备性能、软件状态或操作方式有关。直接强制退出再尝试是很多人会做的,但更有效的是先排查具体原因。 检查设备资源与软件状态 导出视频是个高负载任务,容易因资源不足中断。 关闭后台应用:尤其是浏览器、游戏或其他大型程序,释放内存和处理器资源。 确认存储空间:确保手机或电脑有…

    2026年9月21日
    000
  • 谷歌浏览器新建窗口无法继承上次会话标签如何解决

    谷歌浏览器新建窗口无法继承上次会话标签如何解决谷歌浏览器新建窗口无法继承上次会话标签如何解决谷歌浏览器新建窗口无法继承上次会话标签如何解决谷歌浏览器新建窗口无法继承上次会话标签如何解决

    答案是检查“启动时”设置并确保选择“继续上次会话”。具体操作为:打开谷歌浏览器设置→启动时→选择“继续上次会话”;新建窗口默认不继承标签页属正常设计,可通过拖拽标签或使用扩展解决;若问题仍存,可检查策略、禁用扩展或重置设置。 谷歌浏览器新建窗口无法继承上次会话的标签页,通常是因为设置未开启或某些配置…

    2026年9月21日 用户投稿
    000
  • 如何在Java中配置与数据库连接环境

    答案:Java中配置数据库连接需引入JDBC驱动,如MySQL在Maven中添加对应依赖;通过DriverManager或连接池(如HikariCP)获取Connection,使用try-with-resources管理资源;建议将连接参数存入properties文件,并处理常见问题如驱动加载、权限…

    2026年9月21日
    000
  • PHP错误日志怎么查看_PHP错误日志定位与查看方法

    要查看PHP错误日志,首先确定php.ini中error_log路径,若未设置则检查Web服务器(如Apache/Nginx)错误日志;确保log_errors=On、error_reporting合理配置,并通过tail、grep等工具分析日志,结合框架日志和系统日志(如syslog)全面定位问题…

    2026年9月21日
    200
  • Java Executors类提供哪些线程池方法

    Executors类提供创建线程池的静态方法:newFixedThreadPool创建固定大小线程池,适用于稳定负载;newCachedThreadPool创建可缓存线程池,适合短期异步任务;newSingleThreadExecutor创建单线程池,保证任务顺序执行;newScheduledThr…

    2026年9月21日
    200
  • VSCode中怎么使用REM_VSCode移动端REM布局编写与换算教程

    答案:REM_VSCode插件可自动将像素转换为REM,需配置rootFontSize和precision,支持自动与手动转换,确保与html的font-size一致,配合media query适配不同屏幕,若插件异常可检查配置、重启或重装,替代工具有postcss-pxtorem、在线转换工具及浏…

    2026年9月21日
    100
  • UC浏览器如何开启省流模式_UC浏览器开启省流模式方法

    开启省流模式可减少UC浏览器流量消耗,通过设置菜单、首页快捷入口或搜索功能三种方式均可启用,系统会压缩网页内容以节省资源。 如果您在使用UC浏览器时希望减少数据流量消耗,尤其是在移动网络环境下,可以通过开启省流模式来优化网页加载方式。该功能会压缩页面内容,降低图片质量和资源体积,从而节省流量。 本文…

    2026年9月21日
    100
  • 如何使用mysql设计客户信息管理项目

    答案:设计客户信息管理系统需先明确功能需求,再合理规划数据库结构。1. 根据客户需求划分模块,包括客户基本信息、分类、状态、跟进记录等;2. 创建核心表如customers、company_info、follow_ups和users,确保字段完整且符合业务逻辑;3. 在关键字段上建立索引以提升查询效…

    2026年9月21日
    400
  • VSCode怎么新建ipynb文件_VSCode创建和编辑Jupyter笔记本文件教程

    答案:在VSCode中运行Jupyter笔记本需准备Python环境、安装Python扩展并确保安装ipykernel;通过命令面板或文件菜单新建笔记本,编辑时可添加代码或Markdown单元格,运行代码后结果实时显示;通过右上角内核选择器切换Python环境,推荐为不同项目配置独立虚拟环境以避免依…

    2026年9月21日
    100
  • UC浏览器下载速度慢怎么提升_UC浏览器下载速度提升方法

    开启极速模式、更换APN接入点、更改下载路径至内部存储、启用云端加速、清理缓存及切换网络环境可提升UC浏览器下载速度。 如果您在使用UC浏览器下载文件时遇到速度缓慢的问题,这可能是由于网络设置、缓存堆积或下载路径不佳所导致。以下是针对此问题的多种解决方法。 本文运行环境:小米14 Pro,Andro…

    2026年9月21日
    200
  • 夸克Ai搜索如何设置默认_夸克Ai搜索默认引擎更改

    首先在夸克APP中将默认搜索引擎设为AI引擎,再开启相关AI功能开关以启用AI搜索服务。具体步骤:1、打开夸克APP,点击右下角菜单进入设置;2、选择“通用”选项,点击“搜索引擎”;3、选择“AI引擎”或“夸克AI搜索”作为默认服务;4、返回主界面测试搜索关键词,确认AI结果是否展示;5、进入“AI…

    2026年9月21日
    400
  • Excel引用函数怎么用_Excel引用函数功能使用教程

    答案:Excel中常用INDIRECT、OFFSET、INDEX和CHOOSE函数实现动态引用与跨表查询。首先,INDIRECT函数通过文本字符串创建间接引用,支持跨工作表动态获取数据;其次,OFFSET函数基于偏移量返回区域引用,常用于构建动态求和范围,但属易失性函数需注意性能影响;接着,INDE…

    2026年9月21日
    000
  • Linux查看系统日志的常用命令

    答案是查看Linux日志需综合使用journalctl、dmesg、tail、grep等工具。journalctl用于systemd系统集中查询服务及内核日志,支持时间、优先级、字段等多维度过滤;dmesg专注内核启动与硬件问题;tail -f实时监控日志动态;cat、grep、less结合正则和管…

    用户投稿 2026年9月21日
    000
  • Java中设计可扩展类的技巧与经验

    设计可扩展类应优先组合而非继承,通过接口解耦;明确开放protected扩展点并封闭关键逻辑;提供详细文档说明扩展规则;谨慎处理状态与初始化,避免构造器中调用可重写方法;多数场景推荐接口与组合,必要时才允许继承。 在Java中设计可扩展类时,核心目标是让类既能满足当前需求,又便于未来被安全、可控地继…

    2026年9月21日
    100
  • mysql如何实现后台管理系统

    答案:基于MySQL的%ignore_a_1%需设计用户、权限、日志等表结构,通过后端语言实现安全的CRUD接口与JWT认证,前端展示数据并控制权限,确保系统安全稳定。 实现一个基于 MySQL 的后台管理系统,核心是构建一个安全、稳定、可扩展的系统架构,将数据库作为数据存储层,配合后端语言和前端界…

    2026年9月21日
    000
  • 如何为VSCode设置自定义的代码高亮颜色?

    答案:通过settings.json中的editor.tokenColorCustomizations可自定义VSCode代码高亮颜色,支持全局或特定主题下修改关键字、字符串等元素颜色,结合textMateRules和作用域精确控制,提升代码可读性。 为 VSCode 设置自定义的代码高亮颜色,可以…

    2026年9月21日
    000
  • 百度浏览器自动跳转怎么办 百度浏览器页面跳转广告拦截方法

    百度浏览器自动跳转通常由恶意软件或设置被篡改引起,需检查浏览器设置、清除异常插件、修复快捷方式与注册表,并使用安全软件扫描清理,同时启用广告拦截与隐私保护功能以彻底解决问题。 百度浏览器出现自动跳转,通常不是浏览器本身的问题,而是由恶意软件、插件或设置被篡改导致的。解决这个问题需要从多个方面入手,检…

    2026年9月21日
    100
  • 115网盘资源查找入口_115网盘资源快速链接通道

    115网盘资源查找入口为http://www.115.com/,支持多平台访问、高效媒体管理及安全存储,提供网页端与客户端多种使用方式。 115网盘资源查找入口在哪里?这是不少网友都关注的,接下来由PHP小编为大家带来115网盘资源快速链接通道,感兴趣的网友一起随小编来瞧瞧吧! http://www…

    2026年9月21日
    000
  • vivo浏览器如何开启硬件加速提升流畅度_vivo浏览器开启硬件加速提升浏览体验的方法

    开启硬件加速可改善vivo手机浏览器卡顿,首先在浏览器设置中查找并开启“硬件加速”功能;若无此选项,可进入系统“开发者选项”,启用“强制进行GPU渲染”;同时建议检查系统更新,确保系统版本最新以保障功能兼容性。 如果您在使用vivo手机内置浏览器时遇到页面加载缓慢或动画卡顿的情况,可能是由于硬件加速…

    2026年9月21日
    000
  • 在Java中多态是如何通过虚方法实现的

    多态通过动态方法调度实现,JVM利用虚方法表(vtable)在运行时根据对象实际类型确定方法调用。Java中除private、static、final方法和构造器外均为虚方法,子类重写方法后其vtable指向新实现,调用时JVM通过对象类型查找vtable定位具体方法。如Animal a = new…

    2026年9月21日
    200

发表回复

登录后才能评论
关注微信