luckysheet的使用——17.将表格作为pdf下载到本地

luckysheet源码里面自带有打印按钮,但是功能是无法使用的,所以我把该功能重写了一遍

1.在menuButton.js文件中找到源码打印按钮的触发事件:

$("#luckysheet-icon-print").click(function () {}

2.使用自己写的挂载方法

window.printExcel()

3.在自己的前端项目中,将printExcel挂载上去

window.printExcel = this.printExcel

4.编写我们的导出pdf方法

printExcel(){		// 手动实现全选选区,这样打印pdf才可以将滚动条没有展示的内容也一起打印$('#luckysheet-left-top').click();//获取画布元素let sourceCanvas = document.getElementById('luckysheetTableContent')// 调用luckysheet提供的api,获取选区的截图数据let imgData = window.luckysheet.getScreenshot();// 目标DPI (例如300 DPI)const targetDPI = 300;// 计算从像素到毫米的转换因子 (1 inch = 25.4 mm, 默认屏幕分辨率为96 DPI)const dpiConversionFactor = targetDPI / 96; // 如果目标是300 DPI,则转换因子约为3.125// 将canvas的宽高按目标DPI转换为毫米const pdfWidthMM = (sourceCanvas.width * 25.4) / targetDPI;const pdfHeightMM = (sourceCanvas.height * 25.4) / targetDPI;// 创建 jsPDF 实例const pdf = new jsPDF({orientation: sourceCanvas.width > sourceCanvas.height ? 'l' : 'p', // 根据宽高决定方向unit: 'mm', // 使用毫米作为单位format: [pdfWidthMM * dpiConversionFactor, pdfHeightMM * dpiConversionFactor] // 设置页面尺寸});// 添加图片到 PDF 中,注意这里我们需要根据之前设置的 PDF 页面尺寸来调整图片尺寸// 使用 getEffectivePageSize 来获取实际页面尺寸,因为可能会受到边距等影响const effectivePageWidth = pdf.internal.pageSize.getWidth();const effectivePageHeight = pdf.internal.pageSize.getHeight();//插入luckysheet内容pdf.addImage(imgData, 'PNG', 0, 0, effectivePageWidth, effectivePageHeight);// 保存 PDF 文档pdf.save( "导出.pdf");
}

这里我们需要先安装jsPdf,使用命令行安装

npm install jspdf --save

然后在指定页面引入

import {jsPDF} from "jspdf";

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

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

相关文章

仿真APP助力提升卡车驾驶室驾乘舒适度与安全性

驾驶室作为卡车的重要组成部分,其振动特性对于驾驶员的舒适度和长期健康具有至关重要的影响。振动不仅会导致驾驶员疲劳、分散注意力,还可能引发一系列健康问题。为了确保卡车在复杂路面工况下驾驶室结构不受破坏,并保持良好的NVH性能&#x…

功能强大且易于使用的 JavaScript 音频库howler.js 和AI里如何同时文字跟音频构思想法

howler.js 是一个功能强大且易于使用的 JavaScript 音频库,它提供了跨浏览器的音频播放功能,支持多种音频格式,并且具有丰富的 API,可以方便地控制音频的播放、暂停、循环、音量等。下面是如何在 Vue 项目中使用 howler.js 实现音…

JUC入门(七)

14、ForkJoin ForkJoin框架是Java中用于并行执行任务的框架,特别适合处理可以分解为多个子任务的复杂计算。它基于“分而治之”的思想,将一个大任务分解为多个小任务,这些小任务可以并行执行,最后将结果合并。 ForkJoin框架的核…

第 7 章:综合回顾与性能优化

本章目标: 系统化地回顾各类外设接口选型原则 深入探讨多接口并存时的资源冲突与管理策略 掌握软硬件协同的性能分析方法,快速定位并消除瓶颈 总结一整套从架构设计到现场调试的最佳实践与防坑指南 7.1 综合选型决策矩阵(深度分析) 除了前文的基础矩阵,这里引入两个更细化…

交换机的连接方式堆叠和级联

以下是交换机的堆叠和级联各自的优缺点总结,帮助快速对比选择: ​一、堆叠(Stacking)​ ​优点 ​高性能 堆叠链路带宽高(如10G/40G/100G),成员间数据通过背板直连,无带宽瓶颈。支…

C++高效求解非线性方程组的实践指南

非线性方程组的求解是科学与工程计算中的核心问题之一,涉及物理建模、机器学习、金融分析等多个领域。C因其高性能和底层控制能力成为此类问题的首选语言,但如何高效实现求解仍存在诸多挑战。本文从算法选择、工具应用、稳定性优化及性能提升四个维度&am…

2025年- H42-Lc150 --146. LRU缓存(哈希表,双链表)需二刷--Java版

1.题目描述 2.思路 LRU(最近最少使用):如果缓存的容量为2,刚开始的两个元素都入栈。之后该2元素中有其中一个元素(重点元素)被访问。把最近访问过的重点元素保留,另一个边缘元素就得离开缓存了。 下面是l…

5G 网络中 DNN 的深度解析:从基础概念到核心应用

摘要 本文深度剖析 5G 网络中 DNN(数据网络名称)的核心作用与运行机制,从基础概念入手,详细阐述 DNN 在会话管理、用户面资源分配、切片选择等方面的关键功能。通过实际应用场景分析与技术实现细节探讨,揭示 DNN 如何助力 5G 网络满足多样化业务需求,为 5G 网络部署、优…

MLpack 开源库介绍与使用指南

MLpack 开源库介绍与使用指南 1. MLpack 简介 MLpack 是一个快速、灵活的 C 机器学习库,专注于可扩展性、速度和易用性。它提供了大量经典的机器学习算法实现,包括: 监督学习(分类、回归)无监督学习(聚类…

Python版scorecardpy库woebin函数使用

scorecardpy 是一款专门用于评分卡模型开发的 Python 库,由谢士晨博士开发,该软件包是R软件包评分卡的Python版本。量级较轻,依赖更少,旨在简化传统信用风险计分卡模型的开发过程,使这些模型的构建更加高效且易于操作。…

英语写作中“假设”suppose, assume, presume 的用法

一、suppose 是给出推理的前提,与事实无关,例如: Suppose x >0. Then the square root of x is a real number. (假设x大于0,则x的平方根是实数。) Suppose Jack and Alice share a private channel. …

CAD标注样式如何设置?详细教程来了

CAD中有很多的标注,比如线性标注,对齐标注,坐标标注,面积标注,直径标注,弧长标注等等,标注的种类多,标注的样式也多,今天来给大家介绍一下浩辰CAD看图王中如何设置不同的…

vscode include总是报错

VSCode 的 C/C 扩展可以通过配置 c_cpp_properties.json 来使用 compile_commands.json 文件中的编译信息,包括 include path、编译选项等。这样可以确保 VSCode 的 IntelliSense 与实际编译环境保持一致。 方法一:直接指定 compile_commands.json 路径…

自动化立体仓库WCS与PLC通讯设计规范

导语 大家好,我是社长,老K。专注分享智能制造和智能仓储物流等内容。欢迎大家使用我们的仓储物流技术AI智能体。 新书《智能物流系统构成与技术实践》 新书《智能仓储项目出海-英语手册,必备!》 完整版文件和更多学习资料&#xf…

【window QT开发】简易的对称密钥加解密工具(包含图形应用工具和命令行工具)

前言 项目开发时,配置文件中某些信息不适合直接明文显示,本文提供基于对称密钥的AES-256算法的加解密工具,可集成到项目中。 AES讲解 以下是我分享的一个在国产信创系统(Linux)下使用openssl实现AES加解密的博文 对称加密--AES加解密 本文…

「极简」扣子(coze)教程 | 小程序UI设计进阶(二)!让系统动起来,“禁用”,“加载”状态设置

大家好,上一期大师兄通过一个例子来介绍一下扣子界面中“可见性”的应用。今天大师兄想再进一步介绍控件中的其他一些重要的属性。 扣子(coze)编程 「极简」扣子(coze)教程 | 小程序UI设计进阶!控件可见性设置 「极简」扣子(coze…

前端三件套之html详解

目录 一 认识 二 标签的分类 三 标签 body标签 标题标签 段落标签 换行标签 水平分割线 文本格式化标签 图片标签 音频标签 链接标签 列表标签 表格标签 表单标签 input标签 下拉菜单标签 textarea文本域标签 label标签 语义化标签 button标签 字符实体 …

Google Play 账号创建及材料准备

1:注册一个关联Google Play账号的Google账号,关联邮箱进行自动转发 2:准备一张Visa、Master、JCB、运通卡或Discover等美国信用卡或全球付虚拟信用卡,用来支付25美金的GP账号注册费 3:为避免出现关联原因被封&#x…

Pycharm和Flask的学习心得(4和5)

一:认识路由: (1):接受请求的类型: app.route(hello ,methods [GET ,POST]) 请求类型主要有两种(常用):GET 和 POST ; GET: 直接输入的网址(url访问的就是GET请求) …

DeepSeek 赋能智能电网:从技术革新到全场景应用实践

目录 一、智能电网的发展现状与挑战二、DeepSeek 技术解析2.1 DeepSeek 技术原理2.2 DeepSeek 技术优势 三、DeepSeek 在智能电网中的具体应用3.1 设备管理智能化3.2 电网运行优化3.3 客户服务提升3.4 规划建设智能化3.5 经营管理高效化3.6 办公辅助便捷化 四、DeepSeek 在智能…