JavaScript生成Excel和PDF方法解析

大家好，今天本人给大家带来文章《JavaScript解析生成ExcelPDF方法详解》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

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

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

解析和生成Excel文件

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

● 安装SheetJS：

在项目中通过npm安装：

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方法解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！