当前位置: 首页 > news >正文

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…...

数据与结构--堆

堆 堆的概念 堆&#xff1a;如果有一个关键码的集合K{k0,k1,k2,…,kn-1}&#xff0c;把它的所有元素按完全二叉树的顺序存储方式存储在一个一维数组中&#xff0c;并满足ki<k2i1且ki<k2i2&#xff08;或满足ki>k2i1且ki>k2i2&#xff09;&#xff0c;其中i0,1,2,…...

Github的使用教程(下载项目、寻找开源项目和上传项目)

根据『教程』一看就懂&#xff01;Github基础教程_哔哩哔哩_bilibili 整理。 1.项目下载 1&#xff09;直接登录到源码链接页或者通过如下图的搜索 通过编程语言对搜索结果进一步筛选。 如何去找开源项目&#xff1a;(Github 新手够用指南 | 全程演示&个人找项目技巧放…...

Linux-线程概念

1. 线程概念 线程&#xff1a;轻量级进程&#xff0c;在进程内部执行&#xff0c;是OS调度的基本单位&#xff1b;进程内部线程共用同一个地址空间&#xff0c;同一个页表&#xff0c;以及内存中的代码和数据&#xff0c;这些资源对于线程来说都是共享的资源 进程&#xff1a;…...

js的桶排序

桶排序&#xff08;Bucket Sort&#xff09;是一种分布式排序算法&#xff0c;它将元素分散到一系列桶中&#xff0c;然后对每个桶中的元素进行排序&#xff0c;并将所有的桶合并起来得到最终的排序结果。桶排序适用于输入的元素均匀分布在一个范围内的情况&#xff0c;它的时间…...

解决ubuntu无法上网问题

发现是网络配置成了Manual手动模式&#xff0c;现在都改成自动分配DHCP模式 打开后&#xff0c;尝试上网还是不行&#xff0c;ifconfig查看ip地址还是老地址&#xff0c;怀疑更改没生效&#xff0c;于是重启试试。 重启后&#xff0c;ip地址变了&#xff0c;可以打开网页了 …...

使用nvm管理多版本node.js

使用nvm&#xff08;Node Version Manager&#xff09;安装Node.js是一个非常方便的方法&#xff0c;因为它允许你在同一台机器上管理多个Node.js版本。以下是使用nvm安装Node.js的基本步骤&#xff1a; Linux 安装nvm 根据你的操作系统&#xff0c;安装命令可能会有所不同。以…...

推导 模型矩阵的逆转置矩阵求运动物体的法向量

一个物体表面的法向量如何随着物体的坐标变换而改变&#xff0c;取决于变换的类型。使用逆转置矩阵&#xff0c;可以安全地解决该问题&#xff0c;而无须陷入过度复杂的计算中。 法向量变化规律 平移变换不会改变法向量&#xff0c;因为平移不会改变物体的方向。 旋转变换会改…...

定时任务的几种实现方式

定时任务实现的几种方式&#xff1a; 1、JDK自带 &#xff08;1&#xff09;Timer&#xff1a;这是java自带的java.util.Timer类&#xff0c;这个类允许你调度一个java.util.TimerTask任务。使用这种方式可以让你的程序按照某一个频度执行&#xff0c;但不能在指定时间运行。…...

docker部署springboot+Vue项目

项目介绍&#xff1a;后台springboot项目&#xff0c;该项目环境mysql、redis 。前台Vue&#xff1a;使用nginx反向代理 方法一&#xff1a;docker run 手动逐个启动容器 1.docker配置nginx代理 将vue项目打包上传到服务器上。创建文件夹存储数据卷&#xff0c;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 - 嵌入式系统总线接口

我们嵌入式系统的总线接口可以分为两类&#xff0c;一类是并行接口&#xff0c;另一类是串行接口。 并行通信就是用多个数据线&#xff0c;每条数据线表示一个位来进行传输数据&#xff0c;串行接口就是一根数据线可以来一位一位地传递数据。 从上图也可以看出&#xff0c;并行…...

【一刷《剑指Offer》】面试题 18:树的子结构

力扣对应题目链接&#xff1a;LCR 143. 子结构判断 - 力扣&#xff08;LeetCode&#xff09; 牛客对应题目链接&#xff1a;树的子结构_牛客题霸_牛客网 (nowcoder.com) 核心考点&#xff1a;二叉树理解&#xff0c;二叉树遍历。 一、《剑指Offer》对应内容 二、分析问题 二叉…...

17 M-LAG 配置思路

16 华三数据中心最流行的技术 M-LAG-CSDN博客 M-LAG 配置思路 什么是M-LAG&#xff1f;为什么需要M-LAG&#xff1f; - 华为 (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 属性&#xff0c;作为一个强大的工具&#xff0c;让我们得以细致入微地控制元素的外观&#xff0c;特别是对于那些具有平台特定样式的表单元素&#xff0c;如按钮、输入框等。本文不仅会深入解析 appearance 属性的基本工作原理和使用场景&#xff0c;还将通…...

C# 集合(五) —— Dictionary类

总目录 C# 语法总目录 集合五 Dictionary 1. Dictionary 1. Dictionary 字典是键值对集合&#xff0c;通过键值对来查找 Dictionary和Hashtable的区别是Dictionary可以用泛型&#xff0c;而HashTable不能用泛型 OrderedDictionary 是按照添加元素时的顺序的字典&#xff0c;是…...

Java 函数式接口BiConsumer

BiConsumer是一个函数式接口&#xff0c;代表一个接受两个输入参数且不返回任何内容的操作符 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名成员&#xff0c;每个成员都有自己从1-n的独特id。 最近使用这个聊天群的成员将会在列表最上方&#xff0c;接下来较次使用聊天软件的成员将会在列表第二名&#xff0…...

四川汇昌联信:拼多多运营属于什么行业?

拼多多运营属于什么行业?这个问题看似简单&#xff0c;实则涉及到了电商行业的深层次理解。拼多多运营&#xff0c;顾名思义&#xff0c;就是在拼多多这个电商平台上进行商品销售、推广、客户服务等一系列活动。那么&#xff0c;这个行业具体包含哪些内容呢?下面就从四个不同…...

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

jdbc查询mysql数据库时,出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...