web前端之excel转pdf、小黄人发送请求、base64、jspdf、xlsx

MENU

  • 前言
  • 方案一
  • 方案二
  • 结束语


前言

在前端将Excel转换为PDF有多种方案,本文介绍两种简单方案。


方案一

使用jspdf库,先将Excel文件转成Base64格式,然后再使用jspdf库将其转换为PDF格式,最后使用saveAs函数下载PDF文件。


步骤一: 安装jspdf库

npm install jspdf --save

步骤二: 使用xlsx库将Excel文件转换成Base64格式

import * as XLSX from 'xlsx';let wb = XLSX.utils.book_new();
let ws = XLSX.utils.table_to_sheet(document.querySelector('#table'));XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');let base64 = XLSX.write(wb, { type: 'base64' });

步骤三: 使用jspdf库将base64格式的Excel文件转换成PDF

import * as jsPDF from 'jspdf';let pdf = new jsPDF('p', 'pt', 'a4');// 设置图片为A4纸大小
pdf.addImage(base64data, 'JPEG', 0, 0, 595.28, 841.89);
pdf.save('output.pdf');

方案二

使用在线的Excel转PDF工具,将Excel文件上传到该工具中,然后在前端用JavaScript发起HTTP请求下载转换后的PDF文件。


1、找到一个在线的Excel转PDF工具,如Zamzar等。
2、使用JavaScript发送HTTP请求上传Excel文件并将其转换成PDF。

let excelFile = document.querySelector('#excelFile').files[0];
let formData = new FormData();formData.append('source_file', excelFile);
formData.append('target_format', 'pdf');let xhr = new XMLHttpRequest();xhr.open('POST', 'https://api.zamzar.com/v1/jobs', true);
xhr.setRequestHeader('Authorization', 'Basic ' + window.btoa('API_KEY' + ':'));
xhr.onload = function () {let data = JSON.parse(xhr.responseText);let downloadUrl = data['target_files'][0]['url'];window.location.href = downloadUrl;
};
xhr.send(formData);

注意: 这里需要替换API_KEY为自己的API_KEY。


结束语

以上是两种简单的前端Excel转PDF的方案,读者可以根据具体场景自行选择合适的方案。

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

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

相关文章

牛客前端面试2

fetch请求方式 是什么 fetch是一种HTTP数据请求的方式, 用于发起网络请求 是XMLHttpRequest的一种替代方案。 Fetch函数就是原生js,没有使用XMLHttpRequest对象。 fetch()方法返回一个Promise解析Response来自Request显示状态(成功与否&am…

探索循环购模式:消费返利与积分机制的创新融合

大家好,我是吴军,今天非常荣幸能与大家分享一种别具一格的商业模式——循环购模式。这种商业模式在近年来逐渐崭露头角,受到了广大消费者的热烈追捧。或许您之前听说过消费满额即送现金的活动,但循环购模式不仅仅局限于此&#xf…

基于机器学习的网络流量识别分类(完整资源收米)NetFlow-Sentry

项目介绍 这是一个名为NetFlow-Sentry的项目,项目实现了对网络流量的实时检测,特征抓取,内置了基于Pytorch的深度学习模型来进行流量分类。该项目除可以进行实时特征提取,还提供了网络流量数据的输入口,可以直接识别分…

【Arduino】ESP32/ESP8266 JSON格式解析

目录 1、JSON 2、JSON语法格式 基本概念: 语法规则: 数据类型: 示例: 3、JSON解析 单一对象JSON解析(无嵌套) JSON数组解析 使用ArduinoJson官网在线工具解析JSON信息 ESP8266闪存存储的JSON解析…

Java语言的魅力与未来展望

Java,作为当今最流行的编程语言之一,凭借其独特的优势在全球编程界中占据着重要地位。自1995年诞生以来,Java以其跨平台、面向对象、安全稳定等特性,赢得了开发者的广泛青睐。 Java的跨平台特性是其最大的亮点之一。通过Java虚拟…

MySQL性能优化(提升数据库性能的措施)

万物皆有裂痕,那是光照进来的地方。大家好,今天给大家分享一下关于MySQL性能优化,在处理大型数据集和高负载情况下,MySQL数据库的性能优化是至关重要的。通过合理的调优策略,可以有效提高数据库的响应速度和稳定性。本…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-13-按键实验

前言: 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM(MX6U)裸机篇”视频的学习笔记,在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

xhci 寄存器学习

xhci 寄存器介绍 查看linux 代码: 1733 /* There is one xhci_hcd structure per controller */ 1734 struct xhci_hcd { 1735 struct usb_hcd *main_hcd; 1736 struct usb_hcd *shared_hcd; 1737 /* glue to PCI and HCD framework */ 1738 stru…

哈希表第5/9题--两数之和

题目描述: 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现。…

实操专区-第11周-课堂练习专区-图的标记线和标记点

下载安装ECharts,完成如下样式图形。 代码和截图上传 完成 3.1.3.5 图的标记线和标记点 中的任务点 在一些折线图或柱状图当中,可以经常看到图中对最高值和最低值进行了标记。 在ECharts中,标记点(markPoint)常用于表示…

自定义实现 Java17+SpringBoot3+OpenAPI+Knife4j Starter

文章目录 前言正文1 创建starter项目1.1 依赖文件1.2 配置信息 2 自定义starer代码开发2.1 配置字段的定义2.2 自动配置类 3 验证starter3.1 测试项目的配置3.2 功能配置 application.yml3.3 测试代码3.3.1 实体类3.3.2 控制器13.3.2 控制器2 4 效果展示4.1 主页4.2 实体类列表…

构造二叉树

推断二叉树 P1827 [USACO3.4] 美国血统 American Heritage - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 先序遍历 : 根 左 右 中序遍历 : 左 根 右 后序遍历 : 左 右 跟 由前序遍历和中序遍历推后序遍历 // 由中序遍历和先序遍历 --> 后序遍历 void dfs(string InOr…

数据结构之----线性表顺序表

线性表分为 顺序存储结构 和 链式存储结构 线性表的顺序存储结构: 线性表的顺序存储结构,指的是用一段地址连续的存储单元依次存储线性表的数据元素。 1,顺序表的结构: #define MAXSIZE 20 typedef int El…

计算机组成与结构 计算机基本原理 软设刷题

计算机组成与结构 1-9 1-9 1 在()校验方法中,采用模二运算来构造校验位。 A 水平奇偶 B 垂直奇偶 C 海明码 D 循环冗余 Cache与主存之间的映射由硬件实现,主存与辅存之间的交互是硬件与软件结合起来实现的。 D 2 采用n位补码&…

JS中手写函数实现数据的深度拷贝以及异常的抓取

1、手写深度拷贝函数 function deepCopy(data:any) {if (typeof data ! object || data null) {return data; // 非对象直接返回};let copied Array.isArray(data) ? [] : {};for (let key in data) {if (data.hasOwnProperty(key)) {//ts-ignorecopied[key] deepCopy(da…

Windows快速部署DCNv4(成功版)

文章目录 一、介绍二、编译DCNv42.1 下载源码2.2 编译DCNv4 三、报错提示3.1 Cuda is not available3.2 需要Microsoft Visual C 14.0 一、介绍 论文链接:[https://arxiv.org/pdf/2401.06197.pdf] (https://arxiv.org/pdf/2401.06197.pdf)   在这篇文章中介绍了一…

MySQL Undo Log、Redo Log、bin Log

Undo Log 回滚日志,用于将数据回滚到之前的状态。 MySQL在进行数据的增、删、改时,会将数据写入到Undo Log日志中。 对于Undo Log存在着insert和update两种类型的数据。插入语句对应的是insert类型,修改、删除语句对应的是update类型。 U…

【嵌入式开发 Linux 常用命令系列 7.6 -- sed 替换指定字符串】

请阅读【嵌入式开发学习必备专栏】 文章目录 sed 替换指定字符串 sed 替换指定字符串 背景: 找到当前目录下所有的.h 和 .c 文件 将他们中的字符 print_log替换为 demo_log 可以使用find命令结合sed命令在Linux环境下完成这项任务。下面是一个命令行示例&#xff…

【Android】Kotlin学习之Kotlin方法的声明和传参

方法声明 普通类的方法 静态类的方法 不需要构建实例对象, 可以通过类名直接访问静态方法 : NumUtil.double(1) companion object 伴生类的方法 使用companion object 在普通类里定义静态方法 参数 括号内传入方法 : 当参数是方法时, 并且是最后一个参数 , 可以使用括号外…

Linux -- > vim

vi和vim是什么 vi和vim是两款流行的文本编辑器,广泛用于Unix和类Unix系统中。它们以其强大的功能和灵活的编辑能力而闻名,特别是在编程和系统管理中非常受欢迎。 vi(Visual Interface) vi是最初的文本编辑器之一,由…