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的方案,读者可以根据具体场景自行选择合适的方案。
相关文章:
web前端之excel转pdf、小黄人发送请求、base64、jspdf、xlsx
MENU 前言方案一方案二结束语 前言 在前端将Excel转换为PDF有多种方案,本文介绍两种简单方案。 方案一 使用jspdf库,先将Excel文件转成Base64格式,然后再使用jspdf库将其转换为PDF格式,最后使用saveAs函数下载PDF文件。 步骤一: 安…...
【面试题】音视频流媒体高级开发(2)
面试题6 衡量图像重建好坏的标准有哪些?怎样计算? 参考答案 SNR(信噪比) PSNR10*log10((2n-1)2/MSE) (MSE是原图像与处理图像之间均方误差,所以计算PSNR需要2幅图像的数据!) SSIM…...
数据与结构--堆
堆 堆的概念 堆:如果有一个关键码的集合K{k0,k1,k2,…,kn-1},把它的所有元素按完全二叉树的顺序存储方式存储在一个一维数组中,并满足ki<k2i1且ki<k2i2(或满足ki>k2i1且ki>k2i2),其中i0,1,2,…...
Github的使用教程(下载项目、寻找开源项目和上传项目)
根据『教程』一看就懂!Github基础教程_哔哩哔哩_bilibili 整理。 1.项目下载 1)直接登录到源码链接页或者通过如下图的搜索 通过编程语言对搜索结果进一步筛选。 如何去找开源项目:(Github 新手够用指南 | 全程演示&个人找项目技巧放…...
Linux-线程概念
1. 线程概念 线程:轻量级进程,在进程内部执行,是OS调度的基本单位;进程内部线程共用同一个地址空间,同一个页表,以及内存中的代码和数据,这些资源对于线程来说都是共享的资源 进程:…...
js的桶排序
桶排序(Bucket Sort)是一种分布式排序算法,它将元素分散到一系列桶中,然后对每个桶中的元素进行排序,并将所有的桶合并起来得到最终的排序结果。桶排序适用于输入的元素均匀分布在一个范围内的情况,它的时间…...
解决ubuntu无法上网问题
发现是网络配置成了Manual手动模式,现在都改成自动分配DHCP模式 打开后,尝试上网还是不行,ifconfig查看ip地址还是老地址,怀疑更改没生效,于是重启试试。 重启后,ip地址变了,可以打开网页了 …...
使用nvm管理多版本node.js
使用nvm(Node Version Manager)安装Node.js是一个非常方便的方法,因为它允许你在同一台机器上管理多个Node.js版本。以下是使用nvm安装Node.js的基本步骤: Linux 安装nvm 根据你的操作系统,安装命令可能会有所不同。以…...
推导 模型矩阵的逆转置矩阵求运动物体的法向量
一个物体表面的法向量如何随着物体的坐标变换而改变,取决于变换的类型。使用逆转置矩阵,可以安全地解决该问题,而无须陷入过度复杂的计算中。 法向量变化规律 平移变换不会改变法向量,因为平移不会改变物体的方向。 旋转变换会改…...
定时任务的几种实现方式
定时任务实现的几种方式: 1、JDK自带 (1)Timer:这是java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务。使用这种方式可以让你的程序按照某一个频度执行,但不能在指定时间运行。…...
docker部署springboot+Vue项目
项目介绍:后台springboot项目,该项目环境mysql、redis 。前台Vue:使用nginx反向代理 方法一:docker run 手动逐个启动容器 1.docker配置nginx代理 将vue项目打包上传到服务器上。创建文件夹存储数据卷,html存放打包…...
Llama3-Tutorial(Llama 3 超级课堂)-- 笔记
第1节—Llama 3 本地 Web Demo 部署 端口转发 vscode里面设置端口转发 https://a-aide-20240416-b4c2755-160476.intern-ai.org.cn/proxy/8501/ ssh -CNg -L 8501:127.0.0.1:8501 rootssh.intern-ai.org.cn -p 43681参考 https://github.com/SmartFlowAI/Llama3-Tutorial/b…...
【备战软考(嵌入式系统设计师)】12 - 嵌入式系统总线接口
我们嵌入式系统的总线接口可以分为两类,一类是并行接口,另一类是串行接口。 并行通信就是用多个数据线,每条数据线表示一个位来进行传输数据,串行接口就是一根数据线可以来一位一位地传递数据。 从上图也可以看出,并行…...
【一刷《剑指Offer》】面试题 18:树的子结构
力扣对应题目链接:LCR 143. 子结构判断 - 力扣(LeetCode) 牛客对应题目链接:树的子结构_牛客题霸_牛客网 (nowcoder.com) 核心考点:二叉树理解,二叉树遍历。 一、《剑指Offer》对应内容 二、分析问题 二叉…...
17 M-LAG 配置思路
16 华三数据中心最流行的技术 M-LAG-CSDN博客 M-LAG 配置思路 什么是M-LAG?为什么需要M-LAG? - 华为 (huawei.com) 1 配置 M-LAG 的固定的MAC地址 [SW-MLAG]m-lag system-mac 2-2-2 2 配置M-LAG 的系统标识符系统范围1到2 [SW-MLAG]m-lag system-nu…...
深入探索CSS3 appearance 属性:解锁原生控件的定制秘密
CSS3 的 appearance 属性,作为一个强大的工具,让我们得以细致入微地控制元素的外观,特别是对于那些具有平台特定样式的表单元素,如按钮、输入框等。本文不仅会深入解析 appearance 属性的基本工作原理和使用场景,还将通…...
C# 集合(五) —— Dictionary类
总目录 C# 语法总目录 集合五 Dictionary 1. Dictionary 1. Dictionary 字典是键值对集合,通过键值对来查找 Dictionary和Hashtable的区别是Dictionary可以用泛型,而HashTable不能用泛型 OrderedDictionary 是按照添加元素时的顺序的字典,是…...
Java 函数式接口BiConsumer
BiConsumer是一个函数式接口,代表一个接受两个输入参数且不返回任何内容的操作符 import java.util.ArrayList; import java.util.List; import java.util.function.BiConsumer;public class BatchOperate<T> {private int batchSize3000;private List<T&…...
SWERC 2022-2023 - Online Mirror H. Beppa and SwerChat (双指针)
Beppa and SwerChat 题面翻译 B和她的怪胎朋友在某个社交软件上的聊天群聊天。 这个聊天群有包括B在内的n名成员,每个成员都有自己从1-n的独特id。 最近使用这个聊天群的成员将会在列表最上方,接下来较次使用聊天软件的成员将会在列表第二名࿰…...
四川汇昌联信:拼多多运营属于什么行业?
拼多多运营属于什么行业?这个问题看似简单,实则涉及到了电商行业的深层次理解。拼多多运营,顾名思义,就是在拼多多这个电商平台上进行商品销售、推广、客户服务等一系列活动。那么,这个行业具体包含哪些内容呢?下面就从四个不同…...
别再死记硬背了!用这5个Shapely实战案例,轻松搞定GIS数据处理
用5个实战案例解锁Shapely:告别枯燥API,玩转GIS数据处理 第一次接触Shapely时,我也曾被那些晦涩的几何术语和冰冷的API文档劝退。直到接手一个城市绿化分析项目,被迫在三天内完成公园边界处理,才真正体会到这个库的魔力…...
Scratch 画笔模块全解析:从零到一绘制动态轨迹
1. 初识Scratch画笔模块:数字画布的神奇魔法 第一次接触Scratch的画笔功能时,我仿佛回到了小时候拿着彩色粉笔在水泥地上涂鸦的快乐时光。这个看似简单的模块,实际上藏着让角色"留下痕迹"的魔法——就像蜗牛爬过会留下闪亮的黏液轨…...
别再只抄datasheet了!TPS5430降压电路PCB布局的5个实战避坑点(附15V转12V/负压案例)
TPS5430降压电路PCB布局的5个实战避坑指南:从理论到15V转12V/负压案例 在硬件设计领域,TPS5430作为一款经典的Buck型DC-DC转换芯片,其性能表现与PCB布局质量密切相关。许多工程师虽然能正确绘制原理图,却在PCB实现阶段因忽视关键…...
用8086汇编和8255芯片,手把手带你复刻一个80年代的键盘显示器(含完整代码与接线图)
用8086汇编和8255芯片复刻80年代键盘显示器:一场穿越时空的硬件考古 在数字技术飞速发展的今天,回望上世纪80年代的计算机硬件,就像打开一本泛黄的技术百科全书。那个时代的工程师们,用简单的芯片和精妙的电路设计,构建…...
CANN ops-fft未来规划:51+接口路线图与社区发展蓝图
CANN ops-fft未来规划:51接口路线图与社区发展蓝图 【免费下载链接】ops-fft ops-fft 是 CANN (Compute Architecture for Neural Networks)算子库中提供 FFT 类计算的基础算子库,采用模块化设计,支持灵活的算子开发和…...
三极管Ube到底变不变?从静态分析到动态放大,一张图帮你彻底搞懂
三极管Ube到底变不变?从静态分析到动态放大,一张图帮你彻底搞懂 刚接触三极管放大电路时,很多初学者都会被一个看似矛盾的现象困扰:教科书告诉我们三极管的Ube电压恒定为0.7V,但在分析动态放大过程时,又说U…...
设计饮用水水质饮用习惯监测程序,统计每日饮水量,提醒科学补水养成健康习惯。
饮用水水质与饮水习惯监测程序——基于日志与规则的健康行为实验系统一、实际应用场景描述在现代城市生活中,很多人存在以下问题:- 不清楚自己每天喝了多少水- 饮水时间集中在晚上或运动后- 长期饮水不足或过量- 对水质来源缺乏基本记录意识本项目的目标…...
地平线6地图有哪些 地平线6可以在手机上玩吗
很多玩家都在关注地平线6地图的细节,想知道这款即将上线的竞速大作究竟有哪些可探索的场景,而地平线6地图的丰富度也直接决定了游戏的可玩性。不少玩家习惯用手机碎片时间想体验游戏,却受设备限制无法解锁地平线6地图的全部风光,这…...
从LaTeX到手写笔记:希腊字母的‘两栖’书写实战指南(含清晰对比图)
从LaTeX到手写笔记:希腊字母的‘两栖’书写实战指南 在数字化与纸质化并行的学术工作流中,希腊字母的书写问题常常成为效率瓶颈。当你在深夜推导公式时,是否曾因手写θ与δ难以区分而被迫重新查阅资料?当你在整理课堂笔记时&#…...
告别键盘连击烦恼:KeyboardChatterBlocker 智能解决方案详解
告别键盘连击烦恼:KeyboardChatterBlocker 智能解决方案详解 【免费下载链接】KeyboardChatterBlocker A handy quick tool for blocking mechanical keyboard chatter. 项目地址: https://gitcode.com/gh_mirrors/ke/KeyboardChatterBlocker 你是否曾经在打…...
